Simple View menulis nota kajian dalam rangka kerja Backbone.js

Simple View menulis nota kajian dalam rangka kerja Backbone.js_Pengetahuan asas

WBOY

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

asal

1074 orang telah melayarinya

Secara tradisinya, menggunakan jQuery untuk mengendalikan DOM adalah serupa dengan pernyataan goto dalam bahasa C Apabila kerumitan projek meningkat, ia akan menjadi semakin sukar untuk dikekalkan.
Berkenaan MVC (dan MVP berikutnya, MVVM), terdapat banyak sumber dalam talian, jadi saya tidak akan menerangkan secara terperinci. Mari berlatih secara langsung dengan kod.

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>

Salin selepas log masuk

Antaranya, x.js ialah js yang dijana oleh duo. Beberapa js yang dipetik dalam fail boleh dimuat turun daripada perpustakaan sumber statik 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')});

Salin selepas log masuk

Pelaksanaan:

$duo 1.js

Salin selepas log masuk

Penjelasan mata pengetahuan

el: Menunjukkan bahawa elemen DOM yang diwakili oleh View akan disegerakkan dengan operasi DOM dalam fungsi pemaparan.
initialze: Apabila baharu dipanggil, panggilan fungsi akan dicetuskan, serupa dengan pembina.
memaparkan: Cetuskan operasi DOM, penyemak imbas akan memaparkan
Ayat terakhir menunjukkan bahawa parameter boleh dihantar dalam baharu

Ragu-ragu
Ia juga boleh dilakukan jika ia ditulis sebagai ListView baharu({el: '.wrapper'}).
Tetapi mengingati maksud el itu sendiri, adalah lebih jelas untuk menambah $.

$el dan $()
$(this.el) bersamaan dengan ini.$el
$(this.el).find('.wrapper') bersamaan dengan ini.$('.wrapper')

setElement
Jika anda ingin mengubah suai kandungan el, termasuk nilai dan peristiwa mengikat, anda boleh menggunakan setElement. Dalam contoh berikut, setElement bukan sahaja menukar rujukan el daripada butang1 kepada butang2, tetapi juga menukar acara klik secara serentak.

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

Salin selepas log masuk

Pemprosesan acara dan penghuraian templat ialah tugas yang diperlukan untuk pemaparan bahagian hadapan secara amnya meletakkan kandungan ini ke dalam View untuk pemprosesan bersatu.
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();

Salin selepas log masuk

Pelaksanaan:

$duo 2.js

Salin selepas log masuk

Mata Pengetahuan

this.counter: data yang digunakan secara dalaman, yang boleh dimulakan dalam permulaan
Acara: Format pengisytiharan, 'pemilih acara': 'func', yang lebih baik daripada $('.wrapper button#add') sebelumnya.on('click', function(){...}); Lebih jelas.

Templat

Tambah dalam 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>

Salin selepas log masuk

Ubah suai dalam perisytiharan Lihat:

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

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

Salin selepas log masuk

Ubah suai addItem:

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

Salin selepas log masuk

Begitu juga, templat di sini boleh digantikan oleh mana-mana enjin templat pihak ketiga.
Contohnya: artTemplate

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

Salin selepas log masuk