0

我正在尝试创建一个Library包含其他模型集合的主干模型（让我们称之为）（让我们称之为Books）。我提供了一个视图 - LibraryView，它创建一个书柜的 HTML，其中包含一组由 生成的 HTML 表示的书籍BookView。另外，我使用 Handlebars.js 作为我的模板系统。

我遇到的问题是，在我什至通过函数BookView传递它之前，我在 this.el 元素上返回了奇怪的 html 。render()

图书馆模型模型

  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;

    }
  });

图书馆视图视图：

 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产生了奇怪的 HTML，其中我的每个模型属性都附加到 Backbone-generated div，如下所示：

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

我没有在代码的其他任何地方设置任何属性——这两个值都只来自默认值。

另外，我确认这不是 Handlebars 正在做的事情，因为模型属性作为 HTML 属性插入到模型生成div的Backbone 中BookView（注意，我没有手动提供 tagName 或 el，我希望 Backbone 为我创建一个 div ）。

所以这就是我卡住的地方。我有一个完美工作的 HTML 列表，由列表中的BookView每个模型生成，但由于某种原因，Backbone 生成的 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 呈现 ChildView 集合的 Backbone 应用程序的好例子吗？

4

1 回答 1

2

创建新的BookViews. 该视图期望 aBookModel进入其初始化。但是，该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，因此您不必set(attr, value)自己调用。考虑到这一点，我们可以理解为什么该视图具有两个属性，这实际上是您的两个模型的属性（它们正在set()初始化）。

于 2012-12-23T12:58:00.797 回答