0

我是 SPA 的新手，我正在尝试通过使用主干和 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] has no method extend”。

我想我试图做到这一点的方式与正确的方式相去甚远。

谁能建议如何做到这一点？

谢谢

4

2 回答 2

1

@Matti John 的解决方案将起作用，但它更像是一种解决方法，而不是最佳实践恕我直言。

实际上，您只需通过要求它来初始化您的视图，其中：

  1. 限制你从不接受争论
  2. 命中表现
  3. 如果您在构建实例后继续分配属性，那么单元测试将变得非常困难。

一个模块应该返回一个“类”视图，而不是该视图上的实例。

在MenuView.js中，我会在router.js中需要时替换并初始化return new MenuView它。return MenuView;

于 2012-10-08T00:37:10.573 回答
0

你的 MenuView.js 返回一个初始化的 MenuView，所以你可以这样做：

MenuView.collection = Menucollection

请注意，我没有选择模型 - 我认为最好不要使用模型作为视图集合的替代品，因为阅读代码并且没有 Backbone 集合作为视图集合会令人困惑。您还将丢失集合中包含的方法（例如获取/更新）。

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

this.collection.each(function (item) {
            this.$el.append(new MenuListView({ model: item }).render().el);
        }, this);
于 2012-10-07T12:57:47.387 回答