Backbone.js模型未传递到视图

Question

我从backbone.js开始，用backbone-boilerplate构建我的第一个项目。

我有一个名为Navitem的模块和一个名为Sidebar的视图

Navitem.Views.Sidebar = Navitem.Views.Layout.extend({
    template: "navitem/sidebar",
    tagName: 'ul',
    beforeRender: function()
    {
      var me = this;
      this.options.navitems.each(function(navitem)
      {
        //insertView from Layout datatype
        me.$el.append(new Navitem.Views.Item({
          model: navitem //select the 'ul' in sidebar view and append an Item with model navitem
        }).render().el);
      });
      return this;
    }
  });

当侧边栏被构造时，一个包含许多Navitem.Model的集合被传入其中。经过调试，model:navitem似乎工作正常，并将正确的navitem模型传递给new Navitem.Views.Item({...})。该类如下所示：

Navitem.Views.Item = Navitem.Views.Layout.extend({ 
    tagName: 'li',
    template: 'navitem/default'
    events: {
      click: "navRoute"
    },
    navRoute : function()
    {
      app.router.go(this.model.get('target'));
      return this;
    }
  });

该模板看起来像<a href="#"><%= model.get('label') %></a>。

由于某种原因，当我在第一个代码块中调用Item.render()时，它抱怨model在视图中未定义。我似乎不明白为什么会发生这样的事情。有什么想法吗？

Answer 1

可能与这里回答的问题有关：Backbone.js: Template variable in element attribute doesn't work

您需要将模型作为纯JSON传递给您的模板(除非您正在使用其他版本？)

希望这能有所帮助！

Answer 2

我正在使用Backbone样板和Backbone LayoutManager编写的程序中做类似的事情。

尝试向Navitem.Views.Item视图添加序列化函数：

// provide data to the template
serialize: function() {
    return this.model.toJSON();
}

然后在Navitem.Views.Sidebar的beforeRender函数中：

beforeRender: function(){
  _.each(this.options.navitems.models, function(model){
    var view = new Navitem.Views.Item({model: model});
    this.insertView(view);
  }, this);
}

navitem/default模板可能如下所示：

<%= label %>

这是未经测试的代码(使用您的视图和集合)，但这样做对我很有效。