Backbone.js模型未传递到视图

Question

我首先从骨架.js开始使用骨干模板创建我的第一个项目。

我有一个名为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包含许多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：element属性中的模板变量不起作用

您需要将模型作为纯JSON传递到模板（除非您正在使用其他版本？）

希望这可以帮助！

Answer 2

我正在使用Backbone Boilerplate和Backbone LayoutManager编写的程序中执行类似的操作。

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

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

然后在Navitem.Views.Sid​​ebar的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 %>

这是未经测试的代码（使用您的视图和集合），但是这样做对我来说一直有效。