Backbone.js provide the MVC pattern for web development
1. HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello-backbonejs</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<script src="1.js"></script>
</body>
</html>
2. JS code
// This example illustrates the declaration and instantiation of a minimalist View.
(function($){
var ListView = Backbone.View.extend({
// el: $('body'), // attaches `this.el` to an existing element.
el: 'body', // attaches `this.el` to an existing element.
initialize: function(){
_.bindAll(this, 'render'); // fixes loss of context for 'this' within methods
this.render(); // not all views are self-rendering. This one is.
},
render: function(){
$(this.el).append("<ul> <li> cool hello world</li> </ul>");
}
});
var listView = new ListView();
})(jQuery);
Reference
1. hello-backbonejs_example
2. tutorials_eample
3. backbonejs_doc
沒有留言:
張貼留言