Maison > Article > interface Web > Simple View rédaction de notes d'étude dans le framework Backbone.js_Connaissances de base

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

WBOYoriginal: 2016-05-16 15:15:491055parcourir

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>

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

Exécution :

$duo 1.js

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

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

Exécution :

$duo 2.js

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>

Déclaration Modifier dans la vue :

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

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

Modifier addItem :

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

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Résumé des algorithmes de tableau couramment utilisés dans les compétences JavaScript_javascriptArticle suivant：Résumé des algorithmes de tableau couramment utilisés dans les compétences JavaScript_javascript

Articles Liés

Voir plus