Of Stack

Simple View view in Backbone. js framework to write study notes

  • 2020-12-19 20:54:07
  • OfStack

Traditionally, jQuery is used to operate DOM, similar to the goto statements in the C language, and as the project complexity increases, it becomes increasingly difficult to maintain.
For MVC (and its successors, MVP and MVVM), there are plenty of resources on the web to go around. Let's drill straight into the 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>

x. js is the js generated with duo. Several js references in the file can be downloaded from baidu static resource library

1.js 


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

 //  Initialize the function, new When, backbone Will automatically call 
 initialize: function() {
  this.render();
 },

 //  Actually synchronize the changes to the browser 
 render: function() {
  this.$el.append("<ul><li>Hello techfellow!</li></ul>");
 }
});

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

Perform: 


$duo 1.js

Knowledge points

el: Represents the DOM element represented by the View. In the render function, it is synchronized to the DOM operation. initialze: The function call that is triggered when new is called, similar to the constructor. render: Triggers the DOM action and the browser renders The last sentence states that at new, parameters can be passed

confusion
It is also possible to write new ListView({el: '.wrapper '}).
But considering the meaning of el itself, it's a little clearer to add $.

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

setElement
If you want to modify el content, including values and bound events, you can use setElement. In the following example, setElement not only changes the reference to 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 handling and template parsing are both required for front-end rendering, and backbone1 generally handles them in View.
2.js 


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

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

 //  Initialize the function, new When, backbone Will automatically call 
 initialize: function() {
  //  Used for counting 
  this.counter = 0;
  this.render();
 },

 //  Actually synchronize the changes to the browser 
 render: function() {
  this.$el.append("<button id='add'> Click on add </button><ul></ul>");
 },

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

var listView = new ListView();

Perform: 


$duo 2.js

knowledge

this. counter: Data for internal use that can be initialized in initialize events: Declaration format, 'event selector': 'func', this is more than before $('.wrapper button#add').on('click', function(){... }); "Is much clearer.

The template

Add in index.html: 


<script type="text/template" id="tplItem">
  <li>Hello techfellow, <%= counter %> time(s)</li>
</script>
<!-- Should be placed 2.js Otherwise, it may not be encountered during execution tplItem In the case -->
<script src="build/2.js"></script>

In the statement of View modify: 


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

Related articles: