如何扩展骨干视图

我是SPA的新骨干，我试图通过使用backbone和requireJs来开发一个小应用程序。如何扩展骨干视图

我面临的问题是我无法通过传递集合来扩展视图。

好了，这是名称的观点MenuView.js

define([ 
'Backbone' 
], function (Backbone) { 
var MenuView = Backbone.View.extend({ 
    tagName: 'ul', 
    render: function() { 
     _(this.collection).each(function (item) { 
      this.$el.append(new MenuListView({ model: item }).render().el); 
     }, this); 
     return this; 
    } 
}); 
return new MenuView; 
});

，这是router.js其中错误出现

define([ 
    'Underscore', 
    'Backbone', 
    'views/menu/menuView', 
    'views/createNew/createNew', 
    'collections/menu/menuCollection', 
], function (_, Backbone, MenuView, CreateNewView,Menucollection) { 

var AppRouter = Backbone.Router.extend({ 
    routes: { 
     'index': 'index', 
     'action/:Create': 'Create' 
    }, 
    index: function() { 
     CreateNewView.clear(); 
     //----------- HERE IS THE PROBLEM ------------ 
     $('#menu').html(MenuView({ collection: Menucollection.models }).render().el); 
    }, 
    Create: function() { 
     CreateNewView.render(); 
    } 
}); 

var initialize = function() { 
    var appRouter = new AppRouter(); 
    Backbone.history.start(); 
    appRouter.navigate('index', { trigger: true }); 
}; 

return { 
    initialize: initialize 
}; 
});

该错误消息“对象不是一个功能”。我同意这一点，因为MenuView不是一个函数。我试图扩展MenuView（MenuView.extend（{collection：Menucollection.models}）），错误消息是“objet [object，object]没有方法扩展”。

我想，我试图做到这一点的方式，是远离正确的。

任何人都可以建议如何做到这一点？

感谢

来源

2012-10-07 StrouMfios

你MenuView.js返回一个初始化MenuView，所以你可以只是做：

MenuView.collection = Menucollection

注意我没有选择的车型 - 我认为这是更好，如果你不使用这些模型可以替代您的视图集合，因为读取代码会导致混淆，并且没有Backbone集合作为视图的集合。您也将失去集合中包含的方法（例如获取/更新）。

如果你这样做，那么你就需要更新您的循环（每个可作为集合的方法）：

this.collection.each(function (item) { 
      this.$el.append(new MenuListView({ model: item }).render().el); 
     }, this);

来源

2012-10-07 12:57:47

感谢您的回答约翰。这工作！ – StrouMfios

@Matti约翰的解决方案将工作，但它更是一个解决办法比的恕我直言最佳做法。

限制你从来没有接受参数
撞击性能
使得它真的很难单元测试，如果你继电器：

正因为如此，你只是需要它，其中，对你的看法在构建实例时分配属性。

模块应该返回'class'视图，而不是该视图上的实例。

在MenuView.js我会return MenuView;取代return new MenuView和要求router.js时intitalzie它。

来源

2012-10-08 00:37:10

谢谢 - 你是对的，我的回答刚刚解决了症状，而不是问题的原因。 –

如何扩展骨干视图

回答

相关问题