Heim >Web-Frontend >js-Tutorial >Einfache Ansicht zum Schreiben von Studiennotizen im Backbone.js-Framework_Grundkenntnisse

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

WBOYOriginal: 2016-05-16 15:15:491072Durchsuche

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>

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

Ausführung:

$duo 1.js

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

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

Ausführung:

$duo 2.js

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>

In View-Deklaration ändern:

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

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

AddItem ändern:

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

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Zusammenfassung häufig verwendeter Array-Algorithmen in JavaScript_Javascript-KenntnissenNächster Artikel：Zusammenfassung häufig verwendeter Array-Algorithmen in JavaScript_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen