Front-end programming Improvement Journey (VI)----backbone implementation TODOMVC

Yue Timor that year when learning backbone, the first is the realization of the crossing network Todomvc, later learned that Requirejs easy to manage JS code, on the official website code to do Requirejs management. But at this time Yue Timor feel todomvc still not concise, in order to deepen the understanding of the MVC architecture, Yue Timor to the original Appview code is reconstructed, the relevant display module separately extracted from the view, to realize the view atomization. Yue Timor has uploaded this project ().

join the REQUIREJS directory structure:

Here the main use of templates to place the view corresponding template, views corresponding to the backbone view file. If backbone is the front-end MVC, then model is to build models of the data, collection is unified management of the model, the view plays the role of the controller, to fill the data into the template, and render the template to display. Model, collection play the role of M, the view plays the role of C, the template will play the role of V.

then we look at the TODOMVC:

In the end, we can analyze that to decouple the atomic view from the original Appview, we need to determine which atom view is, and the atomic view needs to have two points:

• has a dynamic interaction effect
• Separate from other page sections

Of course, the definition of atomic view here is debatable, Yue Timor according to the above two principles of the view has been re-divided. and look at the Views directory structure:
corresponding template directory structure: It is important to note that there is no corresponding template for Appview, but instead of setting el: "#todoapp" in the index.html file, the atomic view is managed uniformly. The following is an example of the Toggleallview class source code, where we analyze the composition of the Atomic view function:

define ([' jquery ', ' underscore ', ' backbone ', ' text!templates/toggleall.html '], function ($, _, backbone, toggle Template) {var Toggleallview = Backbone.View.extend ({toggletemplate: _.template (toggletemplate), events : {"Click #toggle-all": "Toggleallcomplete"}, Initialize:function () {This.listento (This.collection, "all", this.render); In addition to Todoview and Todomodel one by one//other related operations will listen to collection}, Render:function () {this. $el. HT            ML (this.toggletemplate ());            var done = This.collection.done (). length;            var remaining = this.collection.remaining (). length;            This.allcheckbox = this.$ ("#toggle-all") [0];            this.allCheckbox.checked =!remaining;        return this;            }, Toggleallcomplete:function () {var done = this.allCheckbox.checked; This.collection.each (function (Todo) {todo.save ({Done:doNE}); });    This is done by judging whether the radio box is selected, modifying all Modeldone Properties}}); return toggleallview;});

There are several functions in the above code:

• Set El or tagname to define where the view is placed on the previous layer, or the label of the package
• Set up the corresponding template (templates)
• Define interaction events, and define interaction functions
• initialization function (initialize), general setting for collection or model monitoring, for communication between view
• Render function (render) for rendering data into templates, setting some other global functions

This shows that the atomic view divides the functions clearly, which is why the front-end MVC architecture, rather than the previous pure scripting era, highly coupled between the code, reaching. for learning backbone, atomic view and Appview are not difficult to understand the respective code, difficult to understand or it is subtle, in the event of the monitoring mechanism, it is this mechanism, to deal with the communication between the view, so that the loose view assembled into a good performance of the finishing. Todoview Monitoring:

Initialize:function () {            This.listento (This.model, "Change", This.render);            This.listento (This.model, "destroy", This.remove); When the model is deleted, the view is removed accordingly        }

The model data that each todoview is bound to is monitored, modified, re-rendered, and destroyed, removing the todoview. look at Toggleallview's monitor again:

Initialize:function () {            This.listento (this.collection, "all", this.render);//except Todoview corresponds to Todomodel one by one            // Other related operations will listen collection        }

This monitoring is more "ruthless", as long as the collection changes, it will be re-rendered to achieve real-time interactive effect. So how does Appview manage the individual sub-view? and look at two Appview functions:

 Initialize:function () {//Initialize join various views, create new view and add to Parent view specified location This.footer = this. $el. Find (' footer ');      This.main = $ (' #main ');      This.todocollection = new Todos;      Inputview = new Inputview ({collection:this.todoCollection}); $ ("#todoapp"). Prepend (Inputview.render (). EL);      Add Input box var toggleallview = new Toggleallview ({collection:this.todoCollection}); This.main.prepend (Toggleallview.render (). EL);      After obtaining the data, initialize This.allcheckbox = this.$ ("#toggle-all") [0];      This.listento (this.todocollection, "add", This.addone);      This.listento (this.todocollection, "reset", This.addall);      This.listento (This.todocollection, "all", this.render);      A view that requires data, defines This.todoCollection.fetch () after acquiring the data;      State View Statusview = new Statusview ({collection:this.todoCollection}); This.footer.append (Statusview.render (). EL); After the data is obtained, initialize}, Render:function () {////Because all collection is set to listen for all the operations, the addition of an item will be rendered once, which guaranteesThe change will be rendered to the page var done = This.todoCollection.done (). length;      var remaining = this.todoCollection.remaining (). length;      This.allcheckbox = this.$ ("#toggle-all") [0];         if (this.todoCollection.length) {//render when performing display or hidden code this.main.show ();        This.footer.show ();        This.footer.html ();        If collection is empty, then empty footer} else {this.main.hide ();      This.footer.hide (); }},//Implement the overall display

The difference from Atomic view is that the Appview initialization function, in addition to listening for collection changes, initializes each atomic view and adds it to the specified interface location, while the rendering function renders the entire page according to the logic required. The above is a holistic architecture analysis of the entire TODOMVC program, with detailed interactive details to view the source code of the music.

Front-end programming Improvement Journey (VI)----backbone implementation TODOMVC