Simple View rédaction de notes d'étude dans le framework Backbone.js

Simple View rédaction de notes d'étude dans le framework Backbone.js_Connaissances de base

WBOY

Libérer： 2016-05-16 15:15:49

original

1078 Les gens l'ont consulté

Traditionnellement, l'utilisation de jQuery pour faire fonctionner DOM est similaire à l'instruction goto en langage C. À mesure que la complexité du projet augmente, il deviendra de plus en plus difficile à maintenir.
Concernant MVC (et ensuite MVP, MVVM), il existe de nombreuses ressources en ligne, je n'entrerai donc pas dans les détails. Pratiquons directement avec le 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>

Copier après la connexion

Parmi eux, x.js est le js généré par duo. Plusieurs js cités dans le fichier peuvent être téléchargés depuis la bibliothèque de ressources statiques Baidu

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

Copier après la connexion

Exécution :

$duo 1.js

Copier après la connexion

Explication des points de connaissances

el : indique que l'élément DOM représenté par la vue sera synchronisé avec l'opération DOM dans la fonction de rendu.
initialze : Lorsque new est appelé, un appel de fonction sera déclenché, similaire à un constructeur.
render : Déclenchez l'opération DOM, le navigateur rendra
La dernière phrase montre que les paramètres peuvent être transmis dans new

Des doutes
C'est également possible s'il est écrit sous la forme new ListView({el: '.wrapper'}).
Mais compte tenu de la signification de el lui-même, il est plus clair d’ajouter $.

$el et $()
$(this.el) est équivalent à this.$el
$(this.el).find('.wrapper') est équivalent à this.$('.wrapper')

setElement
Si vous souhaitez modifier le contenu de el, y compris les valeurs et les événements de liaison, vous pouvez utiliser setElement. Dans l'exemple suivant, setElement modifie non seulement la référence de el de bouton1 à bouton2, mais modifie également l'événement click de manière synchrone.

// 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

Copier après la connexion

Le traitement des événements et l'analyse des modèles sont des tâches nécessaires pour le rendu frontal. Backbone place généralement ces contenus dans View pour un traitement unifié.
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();

Copier après la connexion

Exécution :

$duo 2.js

Copier après la connexion

Points de connaissances

this.counter : données utilisées en interne, qui peuvent être initialisées dans initialize
events : format de déclaration, 'event selector' : 'func', ce qui est meilleur que le précédent $('.wrapper button#add').on('click', function(){...}); Beaucoup plus clair.

Modèle

Ajouter 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>

Copier après la connexion

Déclaration Modifier dans la vue :

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

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

Copier après la connexion

Modifier addItem :

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

Copier après la connexion

De même, les modèles ici peuvent être remplacés par n'importe quel moteur de modèles tiers.
Par exemple : artTemplate

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

Copier après la connexion