我想根據item_id與Backbone.xmpp區分節點項目。例如,在todo.app中,對於每個「待辦事項」項目,我希望能夠分配不同的筆記(或多個用戶在每個「待辦事項」上發佈筆記)。我想將這些筆記分配給基於待辦事項ID的待辦事項。Backbone.xmpp:根據項目ID區分項目類型
我可以使用Backbone關係與Backbone.xmpp嗎?
任何幫助或指導表示讚賞。
Edit2:我有什麼選擇將嵌套模型存儲在xmpp服務器的葉節點上?
待辦事項和筆記是發佈在葉節點上的單獨項目。將評論分配給待辦事項會有效嗎?差異將基於項目id(todoid:todo_1,noteid:todo_1_note_1)。
todos是項目和備註是todo項目(JSON對象)內的對象數組?但有了這個解決方案,我將不會在筆記發佈時收到通知,因爲它將是待辦事項的更新。此外,所有音符都將存儲在一個單獨的項目中 - 這可能會很長。
本來我的想法是將葉節點上的待辦事項(作爲葉節點名稱或「標題」屬性)和項目上的註釋映射到一起,但BB.xmpp目前不支持?
因此,我傾向於第一個解決方案,其中todos和notes由item id區分。
Backbone.xmpp如何實現這一目標?
編輯1:代碼是用於本地存儲的原始todo.app。
$(function(){
// ------------------- Todo Model ------------------
var Todo = Backbone.RelationalModel.extend({
relations: [{
type: Backbone.HasMany,
key: "children",
relatedModel: "Todo",
collectionType: "TodoList",
reverseRelation: {
key: "parent",
includeInJSON: "id"
}
}],
initialize: function() {
console.log("MODEL: initialize()");
if (!this.get("order") && this.get ("parent")) {
this.set({order: this.get("parent").nextChildIndex() });
}
},
defaults: function() {
console.log("MODEL: defaults()");
return {
done: false,
content: "default content" };
},
nextChildIndex: function() {
var children = this.get('children');
return children && children.length || 0;
},
clear: function() {
this.destroy();
}
});
// -------------------藤收藏------------------
var TodoList = Backbone.Collection.extend({
model: Todo,
// Save all of the todo items under the `"todos"` namespace.
localStorage: new Store("todos-backbone"),
done: function() {
return this.filter(function(todo){ return todo.get('done'); });
},
});
var Todos = new TodoList;
// -------------------藤查看------------------
var TodoView = Backbone.View.extend({
tagName: "li",
template: _.template($('#item-template').html()),
events: {
"keypress input.add-child": "addChild",
"click .check" : "toggleDone",
"dblclick label.todo-content" : "edit",
"click span.todo-destroy" : "clear",
"keypress .todo-input" : "updateOnEnter",
"blur .todo-input" : "close"
},
initialize: function() {
console.log("TODOVIEW: initialize()");
this.model.bind('change', this.render);
this.model.bind('destroy', this.remove);
this.model.bind("update:children", this.renderChild);
this.model.bind("add:children", this.renderChild);
this.el = $(this.el);
this.childViews = {};
},
render: function() {
console.log("TODOVIEW: render()");
$(this.el).html(this.template(this.model.toJSON()));
this.setText();
this.input = this.$('.todo-input');
this.el.append("<ul>", {"class": "children"}).append("<input>", { type: "text", "class": "add-child" });
_.each(this.get("children"), function(child) {
this.renderChild(child);
}, this);
return this;
},
addChild: function(text) {
console.log("TODOVIEW: addChild()");
if (e.keyCode == 13){
var text = this.el.find("input.add-child").text();
var child = new Todo({ parent: this.model, text: text});
}
},
renderChild: function(model){
console.log("TODOVIEW: renderChild()");
var childView = new TodoView({ model: model});
this.childViews[model.cid] = childView;
this.el.find("ul.children").append(childView.render());
},
// Remove the item, destroy the model.
clear: function() {
console.log("TODOVIEW: clear()");
this.model.set({parent: null});
this.model.destroy();
//this.model.clear();
}
});
// ------------------ The Application ------------------------
var AppView = Backbone.View.extend({
el: $("#todoapp"),
statsTemplate: _.template($('#stats-template').html()),
events: {
"keypress #new-todo": "createOnEnter",
"keyup #new-todo": "showTooltip",
"click .todo-clear a": "clearCompleted",
"click .mark-all-done": "toggleAllComplete"
},
initialize: function() {
console.log("APPVIEW: initialize()");
_.bindAll(this, 'addOne', 'addAll', 'render', 'toggleAllComplete');
this.input = this.$("#new-todo");
Todos.bind('add', this.addOne);
Todos.bind('reset', this.addAll);
Todos.bind('all', this.render);
Todos.fetch();
},
render: function() {
},
addOne: function(todo) {
var view = new TodoView({model: todo});
this.$("#todo-list").append(view.render().el);
},
addAll: function() {
Todos.each(this.addOne);
},
// Generate the attributes for a new Todo item.
newAttributes: function() {
return {
content: this.input.val(),
order: Todos.nextOrder(),
done: false
};
},
createOnEnter: function(e) {
console.log("APPVIEW: createOnEnter()");
if (e.keyCode != 13) return;
Todos.create(this.newAttributes());
this.input.val('');
},
});
var App = new AppView;
});
謝謝!我真的希望這些筆記能夠發表。這只是要深入backbone.xmpp和主幹。稍後,我需要在我的應用中使用相同的功能。但仍然不確定使用骨幹關係或使用嵌套模型建議在這裏:http://stackoverflow.com/questions/6353607/backbone-js-structuring-nested-views-and-models。 – genericatz
您是否介意查看我在Edit1中編寫的代碼。它基於原始的待辦事項應用程序,但我會在我得到這個工作後添加XMPP版本。我得到「Uncaught TypeError:Object function(obj){return new wrapper(obj);}在Application View的createOnEnter()函數上沒有方法'isObject'」。我只是想在todos上添加註釋。這裏Todo模型「有許多」todo兒童(基於todo模型)。 – genericatz
搞清楚發生了什麼有點難,小提琴會幫助很多! – ggozad