Backbone JS將擴展模型添加到其繼承的模型類型集合

Question

我剛開始挖掘backboneJS，並已開始構建一個小型文本應用程序（http://codepen.io/azaslavsky/pen/fJghE）。一切都進展順利，除了我有一個問題：一旦用戶點擊提交按鈕，我想表單容器視圖：

1. 解析所有的表單字段。這些是各種模型類型（標題字段，所見即所得文本編輯器等）以及一個集合（tagInput.collection - 用戶放入的所有標籤）
2. 創建一個標準化的JSON對象所有這些數據的用戶給出了應用傳遞到服務器

目前，我嘗試做Backbone.Model延伸到了新的一類，「FormModel，」剛剛包含默認屬性「值」。然後，我在包含容器內所有不同模型的主容器上創建一個新的集合。所以，container.collection的模型是FormModel，但是我想要的.add（）的所有實際模型都是擴展類 FormModel。這可能嗎？每當我嘗試訪問集合時，它總是空的！我覺得我缺少了解底層邏輯指導骨幹的一些關鍵部分，但我不能確切地說出什麼！

下面附上（我認爲是）相關的代碼。

//LINE 9 in Full Code 
// Generic, very simply model type for any type of form entry that we can extend 
    var FormModel = Backbone.Model.extend({ 
    defaults: { 
     value: '', 
    } 
    }); 

    //Input class definition 
    var input = {}; 
    input.model = FormModel.extend({ 
    defaults: { 
     placeHolder: 'Enter Title Here...', 
     class: '', 
     warn: 'a title', 
     size: '20px' 
    } 
    }); 
    input.view = Backbone.View.extend({ 
    events: { 
     'keypress input': 'checkKey', 
     'change input': 'updateValue' 
    }, 
    initialize: function() { 
     _.bindAll(this, 'render', 'checkKey', 'doSubmit','updateValue'); 
     this.render(); 
    }, 
    render: function() { 
     if (this.model.get('class')) { 
     $(this.el).addClass(this.model.get('class')); 
     } 
     $(this.el).append('<div class="clearButton inputClear"></div>'); 
     $(this.el).append('<input type="text" placeHolder="'+this.model.get('placeHolder')+'" style="font-size: '+this.model.get('size')+'">'); 
     this.clickable = true; 
     return this; 
    }, 
    checkKey: function(e) { 
     if (e.keyCode === 13) { 
     this.doSubmit(); 
     } 
    }, 
    doSubmit: function() { 
     var thisVal = this.updateValue(); 
     if (thisVal.length > 0) { 
     } else { 
     alert('Hey, you need to '+this.model.get('warn')+' before you can submit this post!'); 
     } 
    }, 
    updateValue: function() { 
     var thisVal = $('input', this.el).val(); 
     this.model.set('value', thisVal); 
     return thisVal; 
    }, 
    }); 



/* 
*[...] 
*/ 



//LINE 132 in Full Code 
//Tag class definition 
    var tag = {}; 
    tag.model = FormModel.extend({ 
    defaults: { 
     title: '', 
     exists: false, 
     parent: $('#container'), 
    } 
    }); 
    tag.view = Backbone.View.extend({ 
    events: { 
     'click .clearButton': 'kill', 
    }, 
    initialize: function() { 
     _.bindAll(this, 'render', 'kill'); 
     this.render(); 
    }, 
    render: function() { 
     $(this.el).addClass('tagRow'); 
     $(this.el).html(this.model.get('title')); 
     $(this.el).append('<div class="clearButton tagClose"></div>'); 
     this.clickable = true; 
     return this; 
    }, 
    kill: function() { 
     if (this.clickable) { 
     this.clickable = false; 
     var that = this; 
     $(this.el).animate({opacity: 0}, 500, function(){ 
      $(that.el).remove(); 
      this.model.destroy(); 
     }); 
     } 
    } 
    }); 
    tag.collection = Backbone.Collection.extend({ 
    model: tag.model, 
    }); 



/* 
*[...] 
*/ 



//LINE 214 in Full Code 
    //Container class definition 
    var container = {}; 
    container.collection = Backbone.Collection.extend({ 
    model: FormModel 
    }); 
    container.model = Backbone.Model.extend({ 
    }); 
    container.view = Backbone.View.extend({ 
    el: $('body'), 
    initialize: function() { 
     _.bindAll(this, 'render', 'appendItem', 'newTag', 'makeTagDialog', 'validate'); 
     this.collection = new container.collection(); 
     this.fields = []; 
     this.render(); 
    }, 
    render: function() { 
     $('body').append('<div id="container"></div>'); 
     this.container = $('body #container'); 

     var title = new input.model({ 
     placeHolder: 'Enter Title Here...', 
     class: 'subArea titleArea', 
     warn: 'a title', 
     }); 
     this.appendItem(new input.view({model: title}).el); 

     this.appendItem(new editor.view({model: new editor.model()}).el); 
     this.makeTagDialog(); 

     var submitButton = new submit.view({model: new submit.model()}); 
     this.listenTo(submitButton.model, 'change:counter', this.validate); 
     $(this.container).append(submitButton.el); 

     return this; 
    }, 
    appendItem: function(view) { 
     this.collection.add(view.model); 
     $(this.container).append(view); 
    }, 
    makeTagDialog: function() { 
     this.container.append('<div class="subArea tagDialog"></div>'); 
     var tags = $('.tagDialog', this.container); 
     tags.append('<div class="tagArea"></div>'); 
     var tagInput = new input.view({ 
     model: new input.model({ 
      placeHolder: 'Tag Your Post...', 
      class: 'tagInput', 
      warn: 'at least one tag', 
      size: '16px', 
      value: '' 
     }) 
     }); 
     tagInput.addTag = function() { 
     if (this.model.get('value').length) { 
      this.collection.add(new tag.model({ 
      title: this.model.get('value') 
      })); 
     } 
     this.clearInput(); 
     }; 
     tagInput.model.on('change:value', tagInput.addTag, tagInput); 
     this.appendItem(tagInput.el); 
     $('.tagInput .clearButton').css('marginTop', '-2px'); 

     tagInput.collection = new tag.collection(); 
     tagInput.collection.on('add', this.newTag); 
    }, 
    newTag: function(model) { 
     thisView = new tag.view({model: model}); 
     thisView.parent = this; 
     $('.tagArea', this.container).append(thisView.el); 
    }, 
    validate: function(){ 
     alert('Form validation launched!'); 
     var form = []; 
     this.collection.each(function(value) { 
     form.push(value); 
     }); 
    } 
    }); 

new container.view({model: container.model}); 
})(jQuery); 

謝謝大家的幫助：我的最新的我「的小應用程序」的版本，完整的代碼也是上面鏈接！

Answer 1

問題在於appendItem方法。 要調用它以這樣的方式

this.appendItem(new input.view({model: title}).el); 

但這種方式要傳遞作爲參數的查看El，而不是視圖本身，所以view.model是不確定的！

你應該用這種方式重構appendItem：

appendItem: function(view) { 
    this.collection.add(view.model); 
    $(this.container).append(view.el); 
}, 

，並稱之爲：

this.appendItem(new editor.view({model: new editor.model()}));