Backbone.xmpp: Разграничете типовете елементи въз основа на идентификатора на елемент

Искам да разгранича възлови елементи въз основа на item_id с Backbone.xmpp. Например в todo.app за всеки елемент "todo", който искам за да можете да задавате различни бележки (или няколко потребители да публикуват бележки за всяка "задача"). Мислех да присвоя тези бележки на задача въз основа на идентификатора на задача.

Мога ли да използвам Backbone relational с Backbone.xmpp?

Всяка помощ или насоки се оценяват.

Edit2: Какви опции имам за съхраняване на вложени модели в листови възли на xmpp сървъра?

1. задачите и бележките са отделни елементи, публикувани на листовия възел. Ще бъде ли ефективно да присвоявате коментари на todos? Разграничаването ще се основава на идентификатори на елементи (todoid: todo_1, noteid: todo

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

   note_1).

2. todos са елементи, а бележките са масив от обекти вътре в todo елемент (JSON обекти)? Но с това решение няма да получавам известия, когато се публикуват бележки, тъй като това ще бъде актуализация на елемента със задачи. Освен това всички бележки ще се съхраняват в един елемент - и това може да стане много дълго.

3. Първоначално имах идеята да картографирам задачи върху листови възли (като име на листов възел или атрибут „title“) и бележки за елементи, но BB.xmpp не поддържа това досега, нали?

Затова клоня към първото решение, при което задачите и бележките са разграничени по идентификатор на елемент.

Как е възможно в Backbone.xmpp да се постигне това?

Edit1: Кодът е за оригиналния todo.app с localstorage.

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

// ------------------- Колекция Todo ------------------

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;

// ------------------- Todo View ------------------

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();
}
});

// ------------------ Приложението ------------------------

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;
});