3

状況は次のとおりです。ページを初めて開いたとき、サーバー（php）によってすでにDOMが準備されています。

ユーザーがJavaScriptをオンにしている場合は、自分のページをWebアプリ（またはあなたが呼んでいるもの）に変換したいと思います。Javascriptが初期化されるとすぐに、Backboneはサーバーからコレクションをフェッチします。問題は、これらのフェッチされたアイテムの一部がすでにページ上にあることです。

では、すでにDOMにあるアイテムにマークを付けるにはどうすればよいですか？そして、どうすればそれらをバックボーンビューと結び付けることができますか？

4

2 に答える 2

7

Backbone.Viewを既存のDOM要素に接続するのは簡単です。

//get a referent to the view element
var $el = $("#foo");

//initialize new view
var view = new FooView({el:$el});

ビューは、#foo要素のイベントと他のすべてのビューの良さを処理するようになりました。とは呼ばないでくださいview.render。そうした場合、ビューは要素に再レンダリングされます。これは、メソッドで必要なコードを定義できないことを意味しますrender。

どの要素がすでにDOMにあるかを見つける方法、および各ビューに対応する要素を見つける方法については、データとhtmlがどのように見えるかを正確に知らなくても、答えるのが少し複雑です。一般的なアドバイスとして、data-*属性を使用して要素を一致させることを検討してください。

DOMツリーがあるとしましょう：

<ul id="list">
  <li data-id="1">...</li>
  <li data-id="2">...</li>
  <li data-id="5">...</li>
</ul>

次のように、モデルをコンテナにバインド/レンダリングできます。

var view;

//container element
var $list = $("ul#list");

//find item node by "data-id" attribute
var $item = $list.find("li[data-id='" + model.id+ "']");

if($item.length) {
  //element was in the DOM, so bind to it
  view = new View( {el:$item, model:model} );
} else {
  //not in DOM, so create it
  view = new View( {model:model} ).render();
  $list.append(view.el);
}
于 2013-01-23T14:54:46.990 に答える
1

わかりました、私はそのようにそれを行うことができました：

var Collection = Backbone.Collection.extend({...});
var ItemView = Backbone.View.extend({...});

var ItemsView = Backbone.View.extend({
  initialize: function () {
    var that = this,
        coll = new Collection;

    coll.fetch({ success: function () {
      that.collection = coll;
      that.render();
    }});
  },
  render: function () {
    this.collection.each(this.addOne, this);
  },
  addOne: function (model) {

    var selector = '#i'+model.get("id");

    if( $(selector).length ) {
      //If we are here, then element is already in the DOM
      var itemView = new ItemView({ 'model': model, 'el': selector, 'existsInDom': true });
    } else {
      var itemView = new ItemView({ 'model':model });
    }
  }
});
于 2013-01-23T17:40:38.423 に答える