0

私は Backbone.js が初めてで、モデルとビューがどのように接続されているかを理解できていません。

モデル、ビュー、コントローラーがどのように接続されているか、かなり明確なAngularで遊んだ。

Angular と Backbone は異なり、後者は MV* であることは知っています。

バックボーンでは、モデルとビューがどのように作成され、機能するかを理解できますが、それらはどのように接続されていますか? 私には、それらは分離されているように見えます。

説明するか、チュートリアルを教えてください。

前もって感謝します

編集

OK、これが例です。たまたまトロールが提案した本を読んだ。これは本のgithubからのコードです

読み始めます。Todoモデルはわかりました。TodoListコレクション了解です。それから私はに行きますTodoView

  • 新しいものを作成しますli
  • Underscore テンプレートを使用して html をコンパイルします
  • 同じビューで後で実装するいくつかの関数を定義します
  • 初期化関数を定義します

その関数の中で

これは何ですか？アクションをモデルthis.model.bind('change', this.render, this); に魔法のようにバインドするにはどうすればよいでしょうか? changeコードはモデルについてどのように認識していますか? 彼がモデルを定義した時期と方法は? あるという理由だけで、コードはそれを知っていますmodel=Todoモデル?

彼はどのようにそのバインドを行いますか? 何が欠けていますか。これは私を混乱させるので、読書AppViewビューはあまり役に立ちません

再度、感謝します

4

3 に答える 3

1

では、モデルをブラウザに表示するためにビューが使用されます。たとえば、JSON 表現が次のようなモデル オブジェクトを持つことができます。{'firstName': 'foo', 'lastName': 'bar' } ビュー オブジェクトを使用して、このモデルをブラウザー DOM にマップします。原則として、特定のテンプレート エンジンと共にビュー オブジェクトを使用します。テンプレートを使用すると、モデルのデータで満たされた html チャンクを作成できます。テンプレート関数を使用している場合、テンプレートは次のようになります。

<div>
    <div>First Name: <%= firstName %></div>
    <div>Last Name: <%= lastName%></div>
</div>

テンプレートをモデルのデータとマージすると、次のようになります。

<div>
   <div>First Name: foo</div>
   <div>Last Name: bar</div>
</div>

このビュー オブジェクトとそのテンプレートを再利用して、たとえば{'firstName':'another foo', 'lastName':'another bar'}、別のモデル オブジェクトを表示すると、結果の html は次のようになります。

<div>
   <div>First Name: another foo</div>
   <div>Last Name: another bar</div>
</div>

これは、モデルとビューの間の接続に関する 1 つのことです。また、ビューオブジェクトはモデルオブジェクトの変更をリッスンして、最新の更新をすぐにレンダリングできます。例（ビューオブジェクト内）： initialize: function() {this.listenTo(this.model, 'change', this.render);}

于 2015-09-01T20:18:26.847 に答える
0

つまり、ビューはモデルのデータをユーザーに表示するためのロジックです。したがって、最も単純な形式では、モデルの変更イベントを介してモデルをビューにバインドし、データが変更されるたびにプレゼンテーションを即座に更新できるようにします。したがって、単純なビューはモデルを取り込み、そのモデル データに基づいて HTML 要素を作成し、その html を DOM に挿入し、データが変更されるたびにその HTML を更新します。

役立つ例が満載の素晴らしい本をここで見つけることができます (無料): http://addyosmani.github.io/backbone-fundamentals/

編集：

ビューがモデルをどのように認識しているかについての最新の質問に関してはthis.model、実際のモデル オブジェクトへの参照です。ビューを作成するときに、モデルへの参照を設定できます。つまり、ビュー コンストラクターを呼び出してビューをインスタンス化するときに、モデルを渡すことができます。addOne メソッドで、これがどこで発生するかを確認するには、コード例の AppView オブジェクトにずっと入る必要があります。

addOne: function(todo) {
  var view = new TodoView({model: todo});
  this.$("#todo-list").append(view.render().el);
}

関数はモデルをパラメーターとして取得し、ビューがインスタンス化されると、そのモデルが参照されます。これで、モデルをview.render認識するビューが作成され、メソッドが呼び出されると、ビューはモデル データを使用してそのテンプレートをレンダリングできます。たとえば set メソッドを使用してモデルのデータを変更すると、そのモデルのイベントmyModel.set({title: "March 20", content: "In his eyes she eclipses..."});がトリガーされます。changeバックボーンのすべての組み込みイベントは、http: //backbonejs.org/#Events-catalogで確認できます。ビューは、クリック イベントやその他のイベントをリッスンするのと同じように、そのイベントをリッスンします。あなたの例のコードでは、ビューはモデルからの変更イベントをリッスンします。それを聞くと、背後にある物体であることがわかります。this.model変更されたので、新しいデータで DOM を更新するか、何か他のことを行うことができます。この例の場合、 が呼び出さthis.renderれ、新しいモデル データで DOM が更新されます。

于 2015-09-01T20:13:14.377 に答える
0

Backbone.Events ( http://backbonejs.org/#Events )について知りたいと思います。モデルとビューの両方がこのモジュールを利用しており、ビューがモデルの変更を学習する方法です。これは実装されているため、注釈付きのソース ( http://backbonejs.org/docs/backbone.html#section-19 ) をいつでも読むことができますが、さらに重要なことは、オブザーバー パターンについて学びたいと思うことです: http://addyosmani. com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript .

于 2015-09-03T01:00:48.540 に答える