Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

parsing the binding attribute and (hopefully) multiple-node fragments…

…. TODO: tests
  • Loading branch information...
commit d544103185c747cb8aae48610f222ec846a34a25 1 parent 06e722f
@hunterloftis authored
Showing with 23 additions and 13 deletions.
  1. +10 −8 backbone.viewmodel.js
  2. +13 −5 lib/bindings.js
View
18 backbone.viewmodel.js
@@ -57,13 +57,13 @@
var bindingString = $(node).attr(attribute);
var bindingList = bindingString.split(';');
- var descriptions = _.map(bindingList, self.parseBinding(node));
+ var descriptions = _.map(bindingList, self.parseBinding(node, attribute));
_.each(descriptions, self.createBinding, self);
};
},
- parseBinding: function(node) {
+ parseBinding: function(node, attribute) {
var self = this;
return function(bindingPair) {
var typeSplit = bindingPair.split('(');
@@ -71,13 +71,15 @@
var argString = typeSplit[1].trim().slice(0, -1);
var args = argString.split(',');
args = _.map(args, self.parseArgument);
- // TODO: identify special data types here --
- // undefined, null, Numbers, Strings, true/false
+ // example:
+ // <div id='foo' data-bind='visible(bar)'></div>
+ // vm.bindView('#foobar');
return {
- node: node,
- viewModel: self,
- type: type,
- args: args
+ node: node, // <div id='foo' ... >
+ viewModel: self, // vm
+ type: type, // "visible"
+ bindingAttr: attribute, // "data-bind"
+ args: args // ["bar"]
};
};
},
View
18 lib/bindings.js
@@ -87,9 +87,10 @@
var EachBinding = Backbone.Binding['each'] = Backbone.Binding.extend({
initialize: function(attr) {
this.attr = attr;
- // Store the inner fragment & remove it from the DOM
+ // Store the inner html fragment
var node = $(this.node);
this.itemTemplate = node.html();
+ // Clear the inner DOM
node.html('');
},
start: function() {
@@ -99,16 +100,23 @@
onCollectionChange: function() {
var self = this;
var node = $(this.node);
- var innerNode;
+ var newFragment;
+ // Clear the inner DOM
node.html('');
+ // Remove old event listeners
if (this.collection) {
this.collection.off('add remove reset change create sort', this.onCollectionChange);
}
+ // Get the currently referenced collection
this.collection = this.viewModel.get(this.attr);
this.collection.each(function(viewModel) {
- innerNode = $(self.itemTemplate);
- node.append(innerNode);
- var boundNodes = viewModel.bindView('data-each-simple', innerNode);
+ // Build a new DOM fragment from the inner HTML
+ newFragment = $(self.itemTemplate);
+ // DOM fragments may have multiple nodes, so append and bind each node separately
+ _.each(newFragment, function(innerNode) {
+ node.append(innerNode);
+ viewModel.bindView(self.bindingAttr, innerNode);
+ });
});
this.collection.on('add remove reset change create sort', this.onCollectionChange);
},
Please sign in to comment.
Something went wrong with that request. Please try again.