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