2012-07-02 29 views
0

我想根據item_id與Backbone.xmpp區分節點項目。例如,在todo.app中,對於每個「待辦事項」項目,我希望能夠分配不同的筆記(或多個用戶在每個「待辦事項」上發佈筆記)。我想將這些筆記分配給基於待辦事項ID的待辦事項。Backbone.xmpp:根據項目ID區分項目類型

我可以使用Backbone關係與Backbone.xmpp嗎?

任何幫助或指導表示讚賞。

Edit2:我有什麼選擇將嵌套模型存儲在xmpp服務器的葉節點上?

  1. 待辦事項和筆記是發佈在葉節點上的單獨項目。將評論分配給待辦事項會有效嗎?差異將基於項目id(todoid:todo_1,noteid:todo_1_note_1)。

  2. todos是項目和備註是todo項目(JSON對象)內的對象數組?但有了這個解決方案,我將不會在筆記發佈時收到通知,因爲它將是待辦事項的更新。此外,所有音符都將存儲在一個單獨的項目中 - 這可能會很長。

  3. 本來我的想法是將葉節點上的待辦事項(作爲葉節點名稱或「標題」屬性)和項目上的註釋映射到一起,但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; 
}); 

回答

1

沒有什麼特別阻止你使用Backbone.relational和Backbone.xmpp,除了讓它工作;

另一方面,Backbone.xmpp提供了不會去的實時通知除非您再次保存待辦事項模型,以便將其重新發布到您的XMPP節點上。另外XMPP(以及骨幹)支持簡單的容器,而當你試圖圍繞它構建關係數據時,你實際上只是在解決它。

僅僅提供關於待辦事項的備註可能會簡單得多,這將節省您與Backbone.relational集成的所有工作量。

+0

謝謝!我真的希望這些筆記能夠發表。這只是要深入backbone.xmpp和主幹。稍後,我需要在我的應用中使用相同的功能。但仍然不確定使用骨幹關係或使用嵌套模型建議在這裏:http://stackoverflow.com/questions/6353607/backbone-js-structuring-nested-views-and-models。 – genericatz

+0

您是否介意查看我在Edit1中編寫的代碼。它基於原始的待辦事項應用程序,但我會在我得到這個工作後添加XMPP版本。我得到「Uncaught TypeError:Object function(obj){return new wrapper(obj);}在Application View的createOnEnter()函數上沒有方法'isObject'」。我只是想在todos上添加註釋。這裏Todo模型「有許多」todo兒童(基於todo模型)。 – genericatz

+0

搞清楚發生了什麼有點難,小提琴會幫助很多! – ggozad