从多个集合中填充菜单

Question

我是新来的backbone.js 和express，我一直在为我自己的项目改编Christophe Coenraets Wine Cellar REST API 示例应用程序。

我正在构建一个表单，该表单需要从 mongodb 中的多个不相关集合中填充多个菜单。

我可以用一个集合填充一个菜单，但我不知道如何将多个集合添加到我的表单视图中。

这是我用来填充一个菜单的文件。如何扩展它以填充两个菜单？

我想我可以为每个要填充的菜单创建一个新视图 - 但这似乎有点过头了。

我可以将两个 mongodb find() 集合合并到一个对象中，并在页面上分别列出它们吗？如果有，怎么做？

提前致谢！

/routes/modules.js 包含：

exports.findAllModules = function(req, res) {

db.collection('modules', function(err, collection) {

    collection.find().toArray(function(err, items) {

        res.send(items);

    });

}); 

};

/server.js 包含：

app.get('/modules', module.findAllModules);

/public/js/main.js 包含：

路线：{

“模块”：“列表”}

...

列表：功能（页面）{

    var p = page ? parseInt(page, 10) : 1;

    var moduleList = new ModuleCollection();

    moduleList.fetch({success: function(){

        console.log('in list function');

        $("#content").html(new ModuleListView({model: moduleList, page: p}).el);

    }});

    this.headerView.selectMenuItem('home-menu');

},

...

utils.loadTemplate([

'ModuleListItemView' ], function() {

app = new AppRouter();

Backbone.history.start(); });

/public/models/models.js 包含：

window.Module = Backbone.Model.extend({

urlRoot: "/modules",

idAttribute: "_id",

initialize: function () {
    this.validators = {};

    this.validators.name = function (value) {
        return value.length > 0 ? {isValid: true} : {isValid: false, message: "You must enter a name"};
    };

validateItem: function (key) {
    return (this.validators[key]) ? this.validators[key](this.get(key)) : {isValid: true};
},
validateAll: function () {
    var messages = {};

    for (var key in this.validators) {
        if(this.validators.hasOwnProperty(key)) {
            var check = this.validators[key](this.get(key));
            if (check.isValid === false) {
                messages[key] = check.message;
            }
        }
    }
    return _.size(messages) > 0 ? {isValid: false, messages: messages} : {isValid: true};
},

defaults: {
    _id: null,
    name: ""
} });

window.ModuleCollection = Backbone.Collection.extend({

model: Module,

url: "/modules"

});

/public/js/views/modulelist.js 包含：

window.ModuleListView = Backbone.View.extend({

initialize: function () {
    this.render();
},

render: function () {
    var modules = this.model.models;

    $(this.el).html('<ul class="thumbnails"></ul>');

    for (var i = 0; i < modules.length; i++) {
        $('.thumbnails', this.el).append(new ModuleListItemView({model: modules[i]}).render().el);
    }
    return this;
} });

window.ModuleListItemView = Backbone.View.extend({

tagName: "li",

initialize: function () {

    this.model.bind("change", this.render, this);

    this.model.bind("destroy", this.close, this);

},

render: function () {

    $(this.el).html(this.template(this.model.toJSON()));

    return this;

} });

/public/tpl/ModuleListView.html 包含：

Answer 1

不完全确定您的代码是如何工作的，但这里有一些主干提示。

如果您想从集合构建菜单，请不要将集合作为模型传递。

代替：

    $("#content").html(new ModuleListView({model: moduleList, page: p}).el);

用途：

    $("#content").empty().append(new ModuleListView({collection: moduleList, page: p}).el);

代替：

render: function () {
    var modules = this.model.models;

    $(this.el).html('<ul class="thumbnails"></ul>');

    for (var i = 0; i < modules.length; i++) {
        $('.thumbnails', this.el).append(new ModuleListItemView({model: modules[i]}).render().el);
    }
    return this;
}

用途：

render: function () {
    this.$el.html('<ul class="thumbnails">');

    this.collection.each(function(model) {
        this.$('.thumbnails').append(new ModuleListItemView({model: model}).render().el);
    }, this);

    return this;
}

如果您不需要更新或删除模型，只需将 url 路径 /modules 添加到集合中，以读取初始模块。