1

私は backbone.js と express を初めて使用し、Christophe Coenraets Wine Cellar REST API サンプル アプリケーションを自分のプロジェクトに適応させてきました。

mongodb の複数の無関係なコレクションから入力する必要があるいくつかのメニューを持つフォームを作成しています。

1 つのメニューに 1 つのコレクションを設定することはできますが、フォーム ビューに複数のコレクションを取得する方法がわかりません。

1 つのメニューに入力するために使用しているファイルを次に示します。これを拡張して 2 つのメニューを作成するにはどうすればよいですか?

設定したいすべてのメニューに対して新しいビューを作成できると思いますが、それはやり過ぎのようです。

2 つの mongodb find() コレクションを 1 つのオブジェクトに結合して、ページに別々にリストすることはできますか? もしそうなら、どのように？

前もって感謝します！

/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 には以下が含まれます。

4

1 に答える 1

0

コードがどのように機能するかは完全にはわかりませんが、バックボーンのヒントをいくつか紹介します。

コレクションからメニューを作成したい場合は、コレクションをモデルとして渡さないでください。

それ以外の：

    $("#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;
}

モデルを更新または削除する必要がない場合は/modules、最初のモジュールを読み取るために、コレクションにのみ url パスを追加するだけで十分です。

于 2012-12-19T21:31:34.340 に答える