Home > Developer > JavaScript
In the Backbone. js framework, you can write learning notes in a simple View.
Traditionally, using jQuery to operate the DOM is similar to the goto statement in C language. As the complexity of the project increases, it becomes increasingly difficult to maintain the DOM.
About MVC (and subsequent MVVM), there are a lot of online resources, so we will not start it. We use code to practice it directly.
index.html<!doctype html>X. js is the js generated by duo. Several js files can be downloaded from the Baidu static resource library.
1. js
Var ListView = Backbone. view. extend ({// el: $ ('. wrapper '), // initialize the function. When new, backbone automatically calls initialize: function () {this. render () ;}, // synchronize the modification operation to the browser. render: function () {this. $ el. append ("<ul> <li> Hello techfellow! </Li> </ul> ") ;}}); var listView = new ListView ({el: $ ('. wrapper ')});Run:
$duo 1.jsKnowledge POint Description
Doubt
You can also write the new ListView ({el: '. wrapper.
However, considering the meaning of el, it is still clearer to add $.
SetElement
If you want to modify el content, including values and binding events, you can use setElement. In the following example, setElement not only changes the reference of el from button1 to button2, but also changes the click Event synchronously.
// We create two DOM elements representing buttons// which could easily be containers or something elsevar button1 = $('<button></button>');var button2 = $('<button></button>');// Define a new viewvar View = Backbone.View.extend({ events: { click: function(e) { console.log(view.el === e.target); } } });// Create a new instance of the view, applying it// to button1var view = new View({el: button1});// Apply the view to button2 using setElementview.setElement(button2);button1.trigger('click');button2.trigger('click'); // returns true
Both event processing and template parsing are necessary for front-end rendering. backbone generally places the content in the View for unified processing.
2. js
Var ListView = Backbone. view. extend ({el: $ ('. wrapper '), events: {'click button # add': 'additem'}, // initialize the function. When new, backbone automatically calls initialize: function () {// used to count this. counter = 0; this. render () ;}, // synchronize the modification operation to the browser. render: function () {this. $ el. append ("<button id = 'add'> click add </button> <ul> </ul>") ;}, // event handler addItem: function () {this. counter ++; this. $ ('ul '). append ("<li> Hello techfellow," + this. counter + "time (s)") ;}}); var listView = new ListView ();
Run:
$duo 2.js
Knowledge Point
Template
Add the following content to index.html:
<Script type = "text/template" id = "tplItem"> <li> Hello techfellow, <% = counter %> time (s) </li> </script> <! -- Put it in front of 2.js; otherwise, tplItem may not be found during execution --> <script src = "build/2.js"> </script>
Modify the following in the View statement:
events: { 'click button#add': 'addItem'},template: _.template($('#tplItem').html()),
Modify addItem:
addItem: function() { this.counter++; this.$('ul').append(this.template({counter: this.counter}));}
Likewise, the template here can be replaced with any third-party template engine.
For example: artTemplate
var template = require('./lib/template.js');...this.$('ul').append(template('tplItem', {counter: this.counter}));...
Articles you may be interested in:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
