Simple View Backbone.jsフレームワークで勉強ノートを書く

Simple View Backbone.jsフレームワークで勉強ノートを書く_基礎知識

WBOY

リリース： 2016-05-16 15:15:49

オリジナル

1079 人が閲覧しました

従来、jQuery を使用して DOM を操作することは、C 言語の goto ステートメントに似ていました。プロジェクトが複雑になるにつれて、保守はますます困難になります。
MVC (およびその後の MVP、MVVM) については、オンラインリソースが多数あるため、詳細は説明しません。コードを直接使って練習してみましょう。

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>

ログイン後にコピー

このうち、x.jsはduoで生成されたjsです。ファイル内で引用されているいくつかの js は、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')});

ログイン後にコピー

実行:

$duo 1.js

ログイン後にコピー

知識ポイントの説明

el: ビューによって表される DOM 要素がレンダリング関数の DOM 操作と同期されることを示します。
initialze: new が呼び出されると、コンストラクターと同様に関数呼び出しがトリガーされます。
render: DOM 操作をトリガーし、ブラウザーが
最後の文は、パラメータを new に渡すことができることを示しています

疑問
new ListView({el: '.wrapper'}) と書けば可能です。
しかし、el 自体の意味を考えると、$ を追加する方が明確です。

$el と $()
$(this.el) は this.$el
$(this.el).find('.wrapper') は this.$('.wrapper') と同等です

setElement
値やバインディングイベントを含む el の内容を変更したい場合は、setElement を使用できます。次の例では、setElement は el の参照を button1 から button2 に変更するだけでなく、クリックイベントも同期的に変更します。

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

ログイン後にコピー

イベント処理とテンプレート解析は、フロントエンドレンダリングに必要なタスクであり、通常、Backbone はこれらのコンテンツを View に入れて統合処理します。
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();

ログイン後にコピー

実行:

$duo 2.js

ログイン後にコピー

知識ポイント

this.counter: 内部で使用されるデータ。initialize
events: 宣言形式、'event selector': 'func'。以前の $('.wrapper button#add').on('click', function(){...}); よりも優れています。より明確になりました。

テンプレート

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>

ログイン後にコピー

ビュー内の変更宣言:

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

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

ログイン後にコピー

addItem を変更します:

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

ログイン後にコピー

同様に、ここでのテンプレートはサードパーティのテンプレートエンジンで置き換えることができます。
例: artTemplate

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

ログイン後にコピー