Simple View writing study notes in the Backbone.js framework

Simple View writing study notes in the Backbone.js framework_Basic knowledge

WBOY

Release： 2016-05-16 15:15:49

Original

1053 people have browsed it

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 increasingly difficult to maintain.
Regarding MVC (and subsequent MVP, MVVM), there are many online resources, so I won’t go into details. Let's practice directly with code.

index.html
<!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/jquery.min.js"></script>
  <script src="js/lib/underscore-min.js"></script>
  <script src="js/lib/backbone-min.js"></script>
  <script src="build/x.js"></script>
</body>
</html>

Copy after login

Among them, x.js is the js generated by duo. Several js cited in the file can be downloaded from Baidu static resource library

1.js

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

 // 初始化函数，new时，backbone会自动调用
 initialize: function() {
  this.render();
 },

 // 真正把修改操作同步到浏览器中
 render: function() {
  this.$el.append("<ul><li>Hello techfellow!</li></ul>");
 }
});

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

Copy after login

Execution:

$duo 1.js

Copy after login

Explanation of knowledge points

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

Doubts
It is also possible if it is written as new ListView({el: '.wrapper'}).
But considering the meaning of el itself, it is 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 the content of el, 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 else
var button1 = $('<button></button>');
var button2 = $('<button></button>');

// Define a new view
var View = Backbone.View.extend({
   events: {
    click: function(e) {
     console.log(view.el === e.target);
    }
   }
  });

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

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

button1.trigger('click');
button2.trigger('click'); // returns true

Copy after login

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

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

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

 // 初始化函数，new时，backbone会自动调用
 initialize: function() {
  // 用于计数
  this.counter = 0;
  this.render();
 },

 // 真正把修改操作同步到浏览器中
 render: function() {
  this.$el.append("<button id='add'>点击添加</button><ul></ul>");
 },

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

var listView = new ListView();

Copy after login

Execution:

$duo 2.js

Copy after login

Knowledge Points

this.counter: internally used data, which can be initialized in initialize
events: declaration format, 'event selector': 'func', which is better than the previous $('.wrapper button#add').on('click', function(){...}); Much clearer.

Template

Add in index.html:

<script type="text/template" id="tplItem">
  <li>Hello techfellow, <%= counter %> time(s)</li>
</script>
<!--要放在2.js前面，否则在执行时，可能遇到找不到tplItem的情况-->
<script src="build/2.js"></script>

Copy after login

Modify in View declaration:

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

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

Copy after login

Modify addItem:

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

Copy after login

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

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

Copy after login