// Only function to access $root directly other than $()
render:function(){
// Without format there is no view
if(this.view.format.length===0){
throw"agility.js: empty format in view.render()";
}
if(this.view.$root.size()===0){
this.view.$root=$(this.view.format);
}
else{
this.view.$root.html($(this.view.format).html());// can't overwrite $root as this would reset its presence in the DOM and all events already bound, and
}
// Ensure we have a valid (non-empty) $root
if(this.view.$root.size()===0){
throw'agility.js: could not generate html from format';
}
returnthis;
},// render
// Parse data-bind string of the type '[attribute][=] variable[, [attribute][=] variable ]...'
// If the variable is not an attribute, it must occur by itself
// all pairs in the list are assumed to be attributes
$node.prop("checked",self.model.get(bindData.key));// this won't fire a DOM 'change' event, saving us from an infinite event loop (Model <--> DOM)
});
// DOM --> Model
$node.change(function(){
varobj={};
obj[bindData.key]=$(this).prop("checked");
self.model.set(obj);// not silent as user might be listening to change events
});
// 1-way attribute binding
bindAttributesOneWay();
}
// <select>: 2-way binding
elseif($node.is('select')){
// Model --> DOM
self.bind('_change:'+bindData.key,function(){
varnodeName=$node.attr('name');
varmodelValue=self.model.get(bindData.key);
$node.val(modelValue);
});
// DOM --> Model
$node.change(function(){
varobj={};
obj[bindData.key]=$node.val();
self.model.set(obj);// not silent as user might be listening to change events
});
// 1-way attribute binding
bindAttributesOneWay();
}
// <input type="radio">: 2-way binding
elseif($node.is('input:radio')){
// Model --> DOM
self.bind('_change:'+bindData.key,function(){
varnodeName=$node.attr('name');
varmodelValue=self.model.get(bindData.key);
$node.siblings('input[name="'+nodeName+'"]').filter('[value="'+modelValue+'"]').prop("checked",true);// this won't fire a DOM 'change' event, saving us from an infinite event loop (Model <--> DOM)
});
// DOM --> Model
$node.change(function(){
if(!$node.prop("checked"))return;// only handles check=true events
varobj={};
obj[bindData.key]=$node.val();
self.model.set(obj);// not silent as user might be listening to change events
});
// 1-way attribute binding
bindAttributesOneWay();
}
// <input type="search"> (model is updated after every keypress event)
elseif($node.is('input[type="search"]')){
// Model --> DOM
self.bind('_change:'+bindData.key,function(){
$node.val(self.model.get(bindData.key));// this won't fire a DOM 'change' event, saving us from an infinite event loop (Model <--> DOM)
});
// Model <-- DOM
$node.keypress(function(){
// Without timeout $node.val() misses the last entered character
setTimeout(function(){
varobj={};
obj[bindData.key]=$node.val();
self.model.set(obj);// not silent as user might be listening to change events
},50);
});
// 1-way attribute binding
bindAttributesOneWay();
}
// <input type="text">, <input>, and <textarea>: 2-way binding
elseif($node.is('input:text, textarea')){
// Model --> DOM
self.bind('_change:'+bindData.key,function(){
$node.val(self.model.get(bindData.key));// this won't fire a DOM 'change' event, saving us from an infinite event loop (Model <--> DOM)
});
// Model <-- DOM
$node.change(function(){
varobj={};
obj[bindData.key]=$(this).val();
self.model.set(obj);// not silent as user might be listening to change events
> [Agility.js](http://agilityjs.com) is an MVC library for Javascript that lets you write maintainable and reusable browser code without the verbose or infrastructural overhead found in other MVC libraries. The goal is to enable developers to write web apps at least as quickly as with jQuery, while simplifying long-term maintainability through MVC objects.
*[Try it out on JSBin](http://jsbin.com/agility/224/edit)
*[Applications built with Agility.js](http://agilityjs.com/docs/gallery.html)
Articles and guides from the community:
*[Step by step from jQuery to Agility.js](https://gist.github.com/pindia/3166678)
Get help from other Agility.js users:
*[Google Groups mailing list](http://groups.google.com/group/agilityjs)
*[agility.js on Stack Overflow](http://stackoverflow.com/questions/tagged/agility.js)
*[Agility.js on Twitter](https://twitter.com/agilityjs)
*[Agility.js on Google +](https://plus.google.com/116251025970928820842/posts)
_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._
## Credit
This TodoMVC application was created by [tshm](https://github.com/tshm).
<ahref="examples/yui/"data-source="http://yuilibrary.com"data-content="YUI's lightweight core and modular architecture make it scalable, fast, and robust. Built by frontend engineers at Yahoo!, YUI powers the most popular websites in the world.">YUI</a>
<ahref="examples/yui/"data-source="http://yuilibrary.com"data-content="YUI's lightweight core and modular architecture make it scalable, fast, and robust. Built by frontend engineers at Yahoo!, YUI powers the most popular websites in the world.">YUI</a>
</li>
</li>
<liclass="routing">
<ahref="examples/agilityjs/"data-source="http://agilityjs.com"data-content="Agility.js is an MVC library for Javascript that lets you write maintainable and reusable browser code without the infrastructural overhead found in other MVC libraries. The goal is to enable developers to write web apps at least as quickly as with jQuery, while simplifying long-term maintainability through MVC objects.">Agility.js</a>
</li>
<liclass="routing">
<liclass="routing">
<ahref="examples/knockback/"data-source="http://kmalakoff.github.com/knockback/"data-content="Knockback.js provides Knockout.js magic for Backbone.js Models and Collections.">Knockback.js</a>
<ahref="examples/knockback/"data-source="http://kmalakoff.github.com/knockback/"data-content="Knockback.js provides Knockout.js magic for Backbone.js Models and Collections.">Knockback.js</a>
"description":"Agility.js is an MVC library for Javascript that lets you write maintainable and reusable browser code without the verbose or infrastructural overhead found in other MVC libraries. The goal is to enable developers to write web apps at least as quickly as with jQuery, while simplifying long-term maintainability through MVC objects.",
"description":"HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.",
"description":"HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.",
