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.js
Knowledge POint Description
- El: indicates the DOM element represented by the View. In the render function, it is synchronized to the DOM operation.
- Initialze: The function call triggered when new is called, similar to the constructor.
- Render: triggers the DOM operation, and the browser will render
- The last sentence indicates that parameters can be passed in new.
Doubt
You can also write the new ListView ({el: '. wrapper.
However, considering the meaning of el, it is still clearer to add $.
- $ El and $ ()
- $ (This. el) is equivalent to this. $ el
- $ (This. el). find ('. wrapper') is equivalent to this. $ ('. wrapper ')
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
- This. counter: Internally used data, which can be initialized in initialize.
- Events: Declaration format, 'event selector ': 'func', which is later than $ ('. wrapper button # add '). on ('click', function (){...}); the method is much clearer.
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:
- A Brief Introduction to the Model and View source code of Backbone. js
- Describes the MVC Structure Design Concept of the Backbone. js framework of JavaScript.
- In-depth parsing of the event mechanism in JavaScript framework Backbone. js
- Lightweight javascript framework Backbone User Guide
- Some tips for using Backbone. js
- Backbone. js 0.9.2 source code annotation Chinese translation version
- Hello World program instance of Backbone. js
- Details about the set in Backbone. js
- Details about Javascript MVC Framework Backbone. js
- Some suggestions for using JavaScript's Backbone. js framework