Einfache Ansicht zum Schreiben von Studiennotizen im Backbone.js-Framework

Einfache Ansicht zum Schreiben von Studiennotizen im Backbone.js-Framework_Grundkenntnisse

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

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

Original

1134 Leute haben es durchsucht

Traditionell ähnelt die Verwendung von jQuery zum Betreiben von DOM der goto-Anweisung in der C-Sprache. Mit zunehmender Komplexität des Projekts wird es immer schwieriger, es zu verwalten.
Bezüglich MVC (und nachfolgendem MVP, MVVM) gibt es viele Online-Ressourcen, daher werde ich nicht auf Details eingehen. Lassen Sie uns direkt mit Code üben.

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>

Nach dem Login kopieren

Unter diesen ist x.js das von duo generierte js. Mehrere in der Datei zitierte js können aus der statischen Ressourcenbibliothek von Baidu heruntergeladen werden

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

Nach dem Login kopieren

Ausführung:

$duo 1.js

Nach dem Login kopieren

Erklärung der Wissenspunkte

el: Gibt an, dass das durch die Ansicht dargestellte DOM-Element mit der DOM-Operation in der Renderfunktion synchronisiert wird.
initialze: Beim Aufruf von new wird ein Funktionsaufruf ausgelöst, ähnlich einem Konstruktor.
Rendern: DOM-Vorgang auslösen, der Browser rendert
Der letzte Satz zeigt, dass Parameter in new übergeben werden können

Zweifel
Es ist auch möglich, wenn es als neues ListView({el: '.wrapper'}) geschrieben wird.
Aber angesichts der Bedeutung von el selbst ist es klarer, $ hinzuzufügen.

$el und $()
$(this.el) entspricht this.$el
$(this.el).find('.wrapper') entspricht this.$('.wrapper')

setElement
Wenn Sie den Inhalt von el ändern möchten, einschließlich Werten und Bindungsereignissen, können Sie setElement verwenden. Im folgenden Beispiel ändert setElement nicht nur die Referenz von el von button1 auf button2, sondern ändert auch synchron das Click-Ereignis.

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

Nach dem Login kopieren

Ereignisverarbeitung und Vorlagenanalyse sind notwendige Aufgaben für das Front-End-Rendering. Backbone stellt diese Inhalte im Allgemeinen zur einheitlichen Verarbeitung in View bereit.
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();

Nach dem Login kopieren

Ausführung:

$duo 2.js

Nach dem Login kopieren

Wissenspunkte

this.counter: intern verwendete Daten, die in initialize
Ereignisse: Deklarationsformat, 'Ereignisselektor': 'func', was besser ist als das vorherige $('.wrapper button#add').on('click', function(){...}); Viel klarer.

Vorlage

In index.html hinzufügen:

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

Nach dem Login kopieren

In View-Deklaration ändern:

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

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

Nach dem Login kopieren

AddItem ändern:

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

Nach dem Login kopieren

In ähnlicher Weise können die Vorlagen hier durch jede Vorlagen-Engine eines Drittanbieters ersetzt werden.
Zum Beispiel: artTemplate

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

Nach dem Login kopieren