Permalink
Browse files

Knockback-Inspector initial commit

  • Loading branch information...
0 parents commit 4efd48148246e78176ba9525a71d5c7427090f8b Kevin Malakoff committed May 30, 2012
Showing with 20,975 additions and 0 deletions.
  1. +1 −0 .gitignore
  2. +25 −0 Cakefile
  3. +22 −0 LICENSE
  4. +69 −0 README.md
  5. +32 −0 knockback-inspector.css
  6. +141 −0 knockback-inspector.js
  7. +9 −0 knockback-inspector.min.js
  8. +26 −0 package.json
  9. +10 −0 src/lib/kbi_core.coffee
  10. +15 −0 src/lib/kbi_string_template_engine.coffee
  11. +19 −0 src/models/kbi_fetched.coffee
  12. +17 −0 src/view_models/kbi_node_view_model.coffee
  13. +14 −0 src/views/kbi_collection_node_view.coffee
  14. +29 −0 src/views/kbi_model_node_view.coffee
  15. +110 −0 test/index.html
  16. +21 −0 tutorials/coffeescript/step1/Cakefile
  17. +37 −0 tutorials/coffeescript/step1/index.html
  18. +19 −0 tutorials/coffeescript/step1/javascripts/lib/kbi_core.js
  19. +10 −0 tutorials/coffeescript/step1/src/lib/kbi_core.coffee
  20. +21 −0 tutorials/coffeescript/step2/Cakefile
  21. +62 −0 tutorials/coffeescript/step2/index.html
  22. +19 −0 tutorials/coffeescript/step2/javascripts/lib/kbi_core.js
  23. +43 −0 tutorials/coffeescript/step2/javascripts/lib/kbi_string_template_engine.js
  24. +35 −0 tutorials/coffeescript/step2/javascripts/view_models/kbi_node_view_model.js
  25. +6 −0 tutorials/coffeescript/step2/javascripts/views/kbi_collection_node_view.js
  26. +6 −0 tutorials/coffeescript/step2/javascripts/views/kbi_model_node_view.js
  27. +10 −0 tutorials/coffeescript/step2/src/lib/kbi_core.coffee
  28. +15 −0 tutorials/coffeescript/step2/src/lib/kbi_string_template_engine.coffee
  29. +17 −0 tutorials/coffeescript/step2/src/view_models/kbi_node_view_model.coffee
  30. +14 −0 tutorials/coffeescript/step2/src/views/kbi_collection_node_view.coffee
  31. +29 −0 tutorials/coffeescript/step2/src/views/kbi_model_node_view.coffee
  32. +21 −0 tutorials/coffeescript/step3/Cakefile
  33. +74 −0 tutorials/coffeescript/step3/index.html
  34. +19 −0 tutorials/coffeescript/step3/javascripts/lib/kbi_core.js
  35. +43 −0 tutorials/coffeescript/step3/javascripts/lib/kbi_string_template_engine.js
  36. +35 −0 tutorials/coffeescript/step3/javascripts/view_models/kbi_node_view_model.js
  37. +6 −0 tutorials/coffeescript/step3/javascripts/views/kbi_collection_node_view.js
  38. +6 −0 tutorials/coffeescript/step3/javascripts/views/kbi_model_node_view.js
  39. +10 −0 tutorials/coffeescript/step3/src/lib/kbi_core.coffee
  40. +15 −0 tutorials/coffeescript/step3/src/lib/kbi_string_template_engine.coffee
  41. +17 −0 tutorials/coffeescript/step3/src/view_models/kbi_node_view_model.coffee
  42. +14 −0 tutorials/coffeescript/step3/src/views/kbi_collection_node_view.coffee
  43. +29 −0 tutorials/coffeescript/step3/src/views/kbi_model_node_view.coffee
  44. +21 −0 tutorials/coffeescript/step4/Cakefile
  45. +73 −0 tutorials/coffeescript/step4/index.html
  46. +19 −0 tutorials/coffeescript/step4/javascripts/lib/kbi_core.js
  47. +43 −0 tutorials/coffeescript/step4/javascripts/lib/kbi_string_template_engine.js
  48. +54 −0 tutorials/coffeescript/step4/javascripts/models/kbi_fetched.js
  49. +35 −0 tutorials/coffeescript/step4/javascripts/view_models/kbi_node_view_model.js
  50. +6 −0 tutorials/coffeescript/step4/javascripts/views/kbi_collection_node_view.js
  51. +6 −0 tutorials/coffeescript/step4/javascripts/views/kbi_model_node_view.js
  52. +10 −0 tutorials/coffeescript/step4/src/lib/kbi_core.coffee
  53. +15 −0 tutorials/coffeescript/step4/src/lib/kbi_string_template_engine.coffee
  54. +19 −0 tutorials/coffeescript/step4/src/models/kbi_fetched.coffee
  55. +17 −0 tutorials/coffeescript/step4/src/view_models/kbi_node_view_model.coffee
  56. +14 −0 tutorials/coffeescript/step4/src/views/kbi_collection_node_view.coffee
  57. +29 −0 tutorials/coffeescript/step4/src/views/kbi_model_node_view.coffee
  58. +39 −0 tutorials/javascript/step1/index.html
  59. +10 −0 tutorials/javascript/step1/javascripts/lib/kbi_core.js
  60. +63 −0 tutorials/javascript/step2/index.html
  61. +10 −0 tutorials/javascript/step2/javascripts/lib/kbi_core.js
  62. +17 −0 tutorials/javascript/step2/javascripts/lib/kbi_string_template_engine.js
  63. +21 −0 tutorials/javascript/step2/javascripts/view_models/kbi_node_view_model.js
  64. +13 −0 tutorials/javascript/step2/javascripts/views/kbi_collection_node_view.js
  65. +27 −0 tutorials/javascript/step2/javascripts/views/kbi_model_node_view.js
  66. +75 −0 tutorials/javascript/step3/index.html
  67. +10 −0 tutorials/javascript/step3/javascripts/lib/kbi_core.js
  68. +17 −0 tutorials/javascript/step3/javascripts/lib/kbi_string_template_engine.js
  69. +21 −0 tutorials/javascript/step3/javascripts/view_models/kbi_node_view_model.js
  70. +13 −0 tutorials/javascript/step3/javascripts/views/kbi_collection_node_view.js
  71. +27 −0 tutorials/javascript/step3/javascripts/views/kbi_model_node_view.js
  72. +74 −0 tutorials/javascript/step4/index.html
  73. +10 −0 tutorials/javascript/step4/javascripts/lib/kbi_core.js
  74. +17 −0 tutorials/javascript/step4/javascripts/lib/kbi_string_template_engine.js
  75. +26 −0 tutorials/javascript/step4/javascripts/models/kbi_fetched.js
  76. +21 −0 tutorials/javascript/step4/javascripts/view_models/kbi_node_view_model.js
  77. +13 −0 tutorials/javascript/step4/javascripts/views/kbi_collection_node_view.js
  78. +27 −0 tutorials/javascript/step4/javascripts/views/kbi_model_node_view.js
  79. +1,431 −0 vendor/backbone-0.9.2.js
  80. +1,425 −0 vendor/backbone-relational.js
  81. +9,404 −0 vendor/jquery-1.7.2.js
  82. +2,169 −0 vendor/knockback-0.15.1.js
  83. +3,443 −0 vendor/knockout-2.1.0.js
  84. +999 −0 vendor/underscore-1.3.1.js
@@ -0,0 +1 @@
+node_modules/*
@@ -0,0 +1,25 @@
+{print} = require 'util'
+{spawn} = require 'child_process'
+path = require 'path'
+
+callback = ->
+ spawn 'uglifyjs', ['-o', 'knockback-inspector.min.js', 'knockback-inspector.js']
+ print "#{(new Date).toLocaleTimeString()} - generated knockback-inspector.min.js\n"
+
+task 'build', 'Build javascripts/ from src/', ->
+ coffee = spawn 'coffee', ['-c', '-j', 'knockback-inspector.js', 'src']
+ coffee.stderr.on 'data', (data) ->
+ process.stderr.write data.toString()
+ coffee.stdout.on 'data', (data) ->
+ print data.toString()
+ coffee.on 'exit', (code) ->
+ callback?() if code is 0
+
+task 'watch', 'Watch src/ for changes', ->
+ coffee = spawn 'coffee', ['-w', '-o', '.', '-j', 'knockback-inspector.js', 'src']
+ coffee.stderr.on 'data', (data) ->
+ print 'Error'
+ process.stderr.write data.toString()
+ coffee.stdout.on 'data', (data) ->
+ print data.toString()
+ callback?()
22 LICENSE
@@ -0,0 +1,22 @@
+Copyright (c) 2012 Kevin Malakoff
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,69 @@
+````
+ _ __ _ _ _
+| |/ /_ __ ___ ___| | __| |__ __ _ ___| | __
+| ' /| '_ \ / _ \ / __| |/ /| '_ \ / _` |/ __| |/ /
+| . \| | | | (_) | (__| < | |_) | (_| | (__| <
+|_|\_\_| |_|\___/ \___|_|\_\|_.__/ \__,_|\___|_|\_\
+
+
+ ___ _
+|_ _|_ __ ___ _ __ ___ ___| |_ ___ _ __
+ | || '_ \/ __| '_ \ / _ \/ __| __|/ _ \| '__|
+ | || | | \__ \ |_) | __/ (__| |_| (_) | |
+|___|_| |_|___/ .__/ \___|\___|\__|\___/|_|
+ |_|
+````
+
+Knockback-Inspector.js provides an inspector tree view library for Backbone.Models and Backbone.Collections using Knockback.js
+
+### For more information on Knockback.js, please look at the website: http://kmalakoff.github.com/knockback/
+
+The Knockout-Inspector is designed as a small standalone library that you can integrate into your own application for debugging purposes. Just include the library file and optional styling into your HTML file:
+
+- <script src='knockback-inspector.min.js'></script>
+- <link rel='stylesheet' href='knockback-inspector.css'>
+
+along with Knockback.js and its dependencies:
+
+- [Knockout.js]:[https://github.com/SteveSanderson/knockout/downloads/]
+- [Underscore.js]:[http://documentcloud.github.com/underscore/]
+- [Backbone.js]:[http://documentcloud.github.com/backbone/]
+- [Knockback.js]:[http://kmalakoff.github.com/knockback/]
+
+If you want to inspect a model, set up the bindings like:
+
+````
+ <ul id='model' class='kbi' data-bind="template: {name: 'kbi_model_node', data: new kbi.NodeViewModel('root', true, $data)}"></ul>
+ <script type='text/javascript'>
+ var view_model = kb.viewModel(new Backbone.Model({name: 'Hello', place: 'World!'}));
+ ko.applyBindings(view_model, $('#model')[0]);
+ </script>
+````
+
+If you want to inspect a collection, set up the bindings like:
+
+````
+ <ul id='collection' class='kbi' data-bind="template: {name: 'kbi_collection_node', data: new kbi.NodeViewModel('root', true, $data)}"></ul>
+ <script type='text/javascript'>
+ var collection_observable = kb.collectionObservable(new Backbone.Collection([{name: 'Hello', place: 'World!'}, {name: 'Goodbye', place: 'Samsara!'}]));
+ ko.applyBindings(collection_observable, $('#collection')[0]);
+ </script>
+````
+
+For a step-by-step guide to creating and using Knockback-Inspector, please take a look at the full tutorial [here][http://kmalakoff.github.com/knockback/tutorial_inspector_library.html].
+
+
+Building the library
+-----------------------
+
+Installing:
+
+1. install node.js: http://nodejs.org
+2. install node packages: (sudo) 'npm install'
+
+Commands:
+
+1. 'cake build' - performs a single build
+2. 'cake watch' - automatically scans for and builds the project when changes are detected
+
+The library itself is in the root directory, but you can also build each tutorial individually using the Cakefile in their own directories.
@@ -0,0 +1,32 @@
+ul.kbi {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+li.kbi {
+ padding-left: 1px;
+ margin-left: 10px;
+ border-style: solid;
+ border-color: rgb(90, 0, 180); /* The Fallback */
+ border-color: rgba(90, 0, 180, 0.2);
+ border-width: 1px;
+ border-radius: 5px;
+}
+li.kbi.closed {
+ border-style: none; font-style:italic;
+}
+
+fieldset.kbi {border: none;}
+fieldset.kbi > label {
+ display: block;
+ float: left;
+ width: 25%;
+ text-align: right;
+ margin-right: 10px;
+}
+fieldset.kbi > input {
+ display: block;
+ float: left;
+ width: 70%;
+}
Oops, something went wrong.
Oops, something went wrong.
@@ -0,0 +1,26 @@
+{
+ "author": "Kevin Malakoff <https://github.com/kmalakoff>",
+ "name": "knockback-inspector",
+ "description": "Knockback-Inspector.js provides an inspector tree view library for Backbone.Models and Backbone.Collections using Knockback.js",
+
+ "url": "http://kmalakoff.github.com/knockback-inspector/",
+ "homepage": "http://kmalakoff.github.com/knockback-inspector/",
+ "repository": {
+ "type": "git",
+ "url": "http://github.com/kmalakoff/knockback-inspector.git"
+ },
+
+ "dependencies" : {
+ "underscore" : ">=1.3.1",
+ "backbone" : ">=0.9.1",
+ "knockout" : ">=1.2.1",
+ "knockback" : ">=0.15.1"
+ },
+ "devDependencies": {
+ "coffee-script": ">=1.3.0"
+ },
+
+ "lib" : ".",
+ "main" : "knockback-inspector.js",
+ "version": "0.1.0"
+}
@@ -0,0 +1,10 @@
+###
+knockback-inspector.js 0.1.0
+(c) 2012 Kevin Malakoff.
+Knockback-Inspector.js is freely distributable under the MIT license.
+See the following for full license details:
+ https://github.com/kmalakoff/knockback-inspector/blob/master/LICENSE
+Dependencies: Knockout.js, Underscore.js, Backbone.js, and Knockback.js.
+###
+@kbi or={}
+@kbi.VERSION = '0.1.0'
@@ -0,0 +1,15 @@
+# template source
+class kbi.StringTemplateSource
+ constructor: (@template_string) ->
+ text: (value) -> return @template_string
+
+# template engine
+class kbi.StringTemplateEngine extends ko.nativeTemplateEngine
+ constructor: ->
+ @allowTemplateRewriting = false
+
+ makeTemplateSource: (template) ->
+ switch (template)
+ when 'kbi_model_node' then return new kbi.StringTemplateSource(kbi.ModelNodeView)
+ when 'kbi_collection_node' then return new kbi.StringTemplateSource(kbi.CollectionNodeView)
+ else return ko.nativeTemplateEngine.prototype.makeTemplateSource.apply(this, arguments)
@@ -0,0 +1,19 @@
+# General-purpose model for fetched JSON when you do not have a specialized implementation
+class kbi.FetchedModel extends Backbone.Model
+ parse: (response) ->
+ attributes = {}
+ for key, value of response
+ if _.isObject(value)
+ model = new kbi.FetchedModel()
+ attributes[key] = model.set(model.parse(value))
+ else if _.isArray(value)
+ collection = new kbi.FetchedCollection()
+ attributes[key] = collection.reset(collection.parse(value))
+ else
+ attributes[key] = value
+ return attributes
+
+# General-purpose collection for fetched JSON when you do not have a specialized implementation
+class kbi.FetchedCollection extends Backbone.Collection
+ model: kbi.FetchedModel
+ parse: (response) -> return response.results
Oops, something went wrong.

0 comments on commit 4efd481

Please sign in to comment.