Question

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

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

我可以使用一个集合填充一个菜单，但我不知道如何在表单View中获取多个集合。

以下是我用来填充一个菜单的文件。如何将其展开以填充两个菜单？

我想我可以为我想要填充的每个菜单创建一个新的视图 - 但这看起来有些过分。

我可以将两个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（＆＃39; / modules＆＃39;，module.findAllModules）;

/public/js/main.js包含：

路线：{

＆＃34;模块＆＃34; ：＆＃34; list＆＃34; }

...

list：function（page）{

    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添加到集合中，即可阅读初始模块。

从多个集合中填充菜单

1 个答案: