Writing study notes for simple View view in the framework

Traditionally, using jQuery to operate DOM is similar to the goto statement in C language. As the complexity of the project increases, it will become more and more difficult to maintain.
Regarding MVC (and subsequent MVP and MVVM), there are a lot of online resources, so I won’t expand it. We use code to practice directly.


<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Backbone</title>
</head>

<body>
  <div class="wrapper"></div>
  <script src="js/lib/"></script>
  <script src="js/lib/"></script>
  <script src="js/lib/"></script>
  <script src="build/"></script>
</body>
</html>

Among them, it is the js generated using duo. Several js referenced in the file can be downloaded from Baidu static resource library

var ListView = ({
 //el: $('.wrapper'),

 // When initializing the function, backbone will be automatically called when new initialize: function() {
  ();
 },

 // Really synchronize the modification operations to the browser render: function() {
  this.$("&lt;ul&gt;&lt;li&gt;Hello techfellow!&lt;/li&gt;&lt;/ul&gt;");
 }
});

var listView = new ListView({el: $('.wrapper')});

implement:

$duo

Knowledge points description

el: indicates that the DOM element represented by the View will be synchronized into the DOM operation in the render function.
initialze: The function call that will be triggered when new is called, similar to the constructor.
render: triggers DOM operation, the browser will render
The last sentence shows that when new, parameters can be passed

Confuse
It is also OK to write it as new ListView({el: '.wrapper'}).
But considering the meaning of el itself, adding $ is clearer.

$el and $()
$() is equivalent to this.$el
$().find('.wrapper') is equivalent to this.$('.wrapper')

setElement
If you want to modify the el content, including the value and binding event, you can use setElement. In the following example, setElement not only changes the el reference 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 else
var button1 = $('<button></button>');
var button2 = $('<button></button>');

// Define a new view
var View = ({
   events: {
    click: function(e) {
     ( === );
    }
   }
  });

// Create a new instance of the view, applying it
// to button1
var view = new View({el: button1});

// Apply the view to button2 using setElement
(button2);

('click');
('click'); // returns true

Event processing and template parsing are all necessary tasks for front-end rendering. Backbone generally puts these contents into the View for unified processing.

var ListView = ({
 el: $('.wrapper'),

 events: {
  'click button#add': 'addItem'
 },

 // When initializing the function, backbone will be automatically called when new initialize: function() {
  // for counting   = 0;
  ();
 },

 // Really synchronize the modification operations to the browser render: function() {
  this.$("&lt;button id='add'&gt;Click Add&lt;/button&gt;&lt;ul&gt;&lt;/ul&gt;");
 },

 // event handler
 addItem: function() {
  ++;
  this.$('ul').append("&lt;li&gt;Hello techfellow, " +  + " time(s)");
 }
});

var listView = new ListView();

implement:

$duo

Knowledge points

: The internal data can be initialized in initialize
events: declare format, 'event selector': 'func', which is much clearer than the previous method of $('.wrapper button#add').on('click', function(){...});

template

Add in:

&lt;script type="text/template" &gt;
  &lt;li&gt;Hello techfellow, &lt;%= counter %&gt; time(s)&lt;/li&gt;
&lt;/script&gt;
&lt;!--Put it in front，Otherwise, when executing，Maybe it can't be foundtplItemThe situation--&gt;
&lt;script src="build/"&gt;&lt;/script&gt;

Modify in the View declaration:

events: {
 'click button#add': 'addItem'
},

template: _.template($('#tplItem').html()),

Modify addItem:

addItem: function() {
 ++;
 this.$('ul').append(({counter: }));
}

Similarly, the template here can be replaced with any third-party template engine.
For example: artTemplate

var template = require('./lib/');
...
this.$('ul').append(template('tplItem', {counter: }));
...