Home > Article > Web Front-end > Simple View writing study notes in the Backbone.js framework_Basic knowledge

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

WBOYOriginal: 2016-05-16 15:15:491021browse

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>

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')});

Execution:

$duo 1.js

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

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();

Execution:

$duo 2.js

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>

Modify in View declaration:

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

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

Modify addItem:

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

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}));
...

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Summary of commonly used array algorithms in JavaScript_javascript skillsNext article：Summary of commonly used array algorithms in JavaScript_javascript skills

See more

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

Related articles