0

Library他のモデルのコレクションを含むバックボーンモデル（それを呼び出すことができます）を作成しようとしています（それらを呼び出すことができますBooks）。これLibraryViewは、 によって生成された HTML によって表される本のセットを含むブック ケースの HTML を作成しますBookView。また、テンプレート システムとして Handlebars.js を使用しています。

私が経験している問題は、関数BookViewを介して渡す前に、 this.el 要素に奇妙な html を返すことrender()です。

LibraryModel モデル

  var LibraryModel = Backbone.Model.extend({

    initialize: function() {

      var books = new BookCollection();

      _.each(book_data.books, function(value, index) {
        books.add(new Book());
      });

      this.books = books;

    }
  });

LibraryView ビュー:

 var LibraryView = Backbone.View.extend({

    el: "#library",

    render: function() {

      var t = this;

      this.model.books.each(function(book, index) {
        //create new view for each Book model in the books collection
        var view = new BookView(book);
        //append HTML produced by the BookView into LibraryView el element
        t.$el.append(view.render().$el);
      });

      return this;  
    },

    initialize: function() {
      //snip
    }
  });

BookView ビュー:

  var BookView = Backbone.View.extend({

    render: function() {
      var viewmodel = this.model;
      var source = $("#book-template").html();
      var template = Handlebars.compile(source);
      var html = template(viewmodel.toJSON());

      console.log(html); //prints <div test="wtf" anotherTest="123"><b>wtf</b> 123</div>
      this.$el.html(html);

      return this;  
    },

    initialize: function(book) {
      console.log(this.el.outerHTML); //prints <div test="wtf" anotherTest="123"></div>
      this.model = book;
      this.listenTo(this.model, "change", this.render);
    }
  });

私が提供しているテンプレートは次のとおりです。<b>{{test}}</b> {{anotherTest}}

BookModel モデル

  var BookModel = Backbone.Model.extend({
    defaults: {
      test: "wtf",
      anotherTest: 123
    },

    initialize: function() {
        //snip
    }
  });

基本的に、私が経験している問題は、次のようにBookView、各モデル属性が Backbone-generateddivに添付されている奇妙な HTML を生成することです。

<div test="wtf" anotherTest="123">
<b>wtf</b> 123
</div>

コードの他の場所に属性を設定していません-両方の値はデフォルトからのみ取得されます。

divまた、Model-attributes は HTML-attributesとしてモデルから生成された Backbone に挿入されるため、これは Handlebars が行っていることではないことを確認しましたBookView(注、tagName または el を手動で提供していません。Backbone に div を作成してもらいたいです)。 ）。

だからここが私が立ち往生しているところです。BookViewリスト内のモデルごとに生成された HTML の完全に機能するリストがありますが、何らかの理由で、バックボーンによって生成された div ラッパーには、次のように HTML 属性に各モデル属性が含まれています。

<div id="#library">
<div test="wtf" anotherTest="123"><b>wtf</b> 123</div>
<div test="wtf" anotherTest="123"><b>wtf</b> 123</div>
<div test="wtf" anotherTest="123"><b>wtf</b> 123</div>
</div>

私は本当にこれについて髪を引っ張っています.View-in-a-Viewを使用しようとしているという事実と関係があるのではないかと疑っています。

以前に同様の問題に遭遇したことがありますか? MasterView が ChildViews のコレクションをレンダリングするバックボーン アプリケーションの良い例はありますか?

4

1 に答える 1

2

new を作成するときに奇妙なことをしていBookViewsます。BookModelそのビューは、初期化時に が来ることを期待しています。ただし、このメソッドは常に、慣例によってinitialize()呼び出されるオブジェクトを想定しています。これと一致するようにattributes変更する必要があります。BookView

var BookView = Backbone.View.extend({

    render: function() {
       // keep the same code
    },

    initialize: function(attributes) {
        this.listenTo(this.model, "change", this.render);
    }
});

そしてあなたはLibraryViewあなたが使うべきです：

var view = new BookView({ model : book });

前の代わりに：

var view = new BookView(film); // which is a typo, and should pass book and not film

これで、期待どおりの結果が得られます。

<div id="library">
    <div><b>wtf</b> 123</div>
    <div><b>wtf</b> 123</div>
    <div><b>wtf</b> 123</div>
</div>

initialize(attributes)は自動的にそのマッピングでセットを呼び出すので、自分自身を呼び出す必要はありませんset(attr, value)。それを念頭に置いて、実際には2つのモデルの属性である2つの属性がビューにある理由を理解できます(それらはset()初期化されています)。

于 2012-12-23T12:58:00.797 に答える