1

我从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视图中未定义的内容。我似乎无法弄清楚为什么会这样。有什么想法吗？

4

2 回答 2

0

可能与此处回答的内容有关：Backbone.js：元素属性中的模板变量不起作用

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

希望这可以帮助！

于 2013-01-13T05:25:14.990 回答
0

我正在使用 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 %>

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

于 2013-01-23T18:57:37.463 回答