Backbone.js model.save（）在下劃線中激發「太多的遞歸」錯誤

Question

我試圖使用主幹從表單保存我的模型時出現問題。在這裏，我想我的我的觀點實際上是一個編輯表單：

(function() { 

    'use strict'; 

    var YachtEditor = {}; 
    window.YachtEditor = YachtEditor; 

    var template = function(name) { 
     return Mustache.compile($('#' + name + 'Template').html()); 
    }; 

    YachtEditor.Tank = Backbone.Model.extend({ 
     defaults : { 
      dCapacity : "", 
      sType : "" 
     } 
    }); 

    YachtEditor.Tanks = Backbone.Collection.extend({ 
    //  url: "/rest/tanks", 
     localStorage: new Store("tanks"), 
     model : YachtEditor.Tank 
    }); 

    YachtEditor.TankView = Backbone.View.extend({ 
     template: template("tank"), 
     events: { 
      'click .save' : 'save', 
      'click .remove' : 'remove' 
     }, 
     initialize: function() { 
      console.log("initialize tank View :"); 
      console.log(this.model.get("id")); 
     }, 
     render: function() { 
      this.$el.html(this.template(this)); 
      return this; 
     }, 
     save: function() { 
      console.log('change'); 

      var self = this; 
      var values = { 
        sType:  self.$("#sType").val(), 
        dCapacity: self.$("#dCapacity").val() 
       }; 

      console.log("dCapacity : " + values.dCapacity); 
      console.log("sType : " + values.sType); 

      this.model.save(values); 
     }, 
     remove: function() { 
      this.model.destroy(); 
     }, 
     dCapacity : function() { 
      return this.model.get("dCapacity"); 
     }, 
     sType : function() { 
      return this.model.get("sType"); 
     } 
    }); 

    YachtEditor.TanksView = Backbone.View.extend({ 
     el: $("div.tankZone"), 
     template: template("tanks"), 
     events: { 
      "click .add" : "addTank", 
      "click .clear" : "clear" 
     }, 
     initialize: function() { 
      this.tanks = new YachtEditor.Tanks(); 
//   this.tanks.on('all', this.render, this); 
      this.tanks.fetch(); 
      this.render(); 
     }, 
     render: function() { 
      this.$el.html(this.template(this)); 
      this.tanks.each(this.renderTank, this); 
      return this; 
     }, 
     renderTank: function(tank) { 
      var view = new YachtEditor.TankView({model: tank}); 
      $(".tanks").append(view.render().el); 
      return this; 
     }, 
     addTank: function() { 
      this.tanks.create({}); 
      this.render(); 
     }, 
     clear: function() { 
      this.tanks.each(function(tank) { 
       tank.destroy(); 
      }); 
      this.render(); 
     } 
    }); 
    ... 
    })(); 

這裏是我使用的每個罐的鬍子模板

<script id="tankTemplate" type="text/x-mustache-template">  
    <div class="tankView"> 
     <h1>Tank</h1> 
     <select id="sType" value="{{ sType }}"> 
      @for(option <- Tank.Type.values().toList) { 
       <option>@option.toString</option> 
      } 
     </select> 
     <input id="dCapacity" type="text" value="{{ dCapacity }}"> 
     <button class="destroy">x</button> 
    </div> 
</script> 

我在這裏的問題是，this.model.save（）觸發器下劃線中的'遞歸太多'。 JS。 （鉻也顯示錯誤

這裏是錯誤的調用堆棧：

_.extend 
_.clone 
_.extend.toJSON 
_.extend.save 
_.extend.update 
Backbone.sync 
_.extend.sync 
_.extend.save 
YachtEditor.TankView.Backbone.View.extend.save 
st.event.dispatch 
y.handle 

我懷疑保存召回blur事件，但我不能找到一種方法來明確它...也許我？「M沒有使用支柱，我應該

Answer 1

一些事情你定義你的坦克模型

app.Tank = ... 

，但您的收藏你引用它：

model : YachtEditor.Tank 

，並在您看來，您要分配的元素，他們在頁面上呈現前：

this.input = {} 
this.input.sType  = this.$("#sType"); 
this.input.dCapacity = this.$("#dCapacity"); 

我不知道您的看法如何渲染頁面，有些人，像我喜歡用渲染（）來直接呈現模板頁面：

render: function() { 
    this.$el.html(this.template(this)); 
    //done, you should be able to see the form on the page now. 
}, 

一些人，會用別的東西來插入EL，如：

//in another view 
tankView.render().$el.appendTo('body'); 

但無論哪種方式，如果要緩存元素，則需要在呈現到頁面後執行，而不是初始化。

//this method is only called after render() is called! 
cacheElements: function() { 
    this.input = {} 
    this.input.sType  = this.$("#sType"); 
    this.input.dCapacity = this.$("#dCapacity"); 
} 

我建議，首先，嘗試解決這個事情，然後，嘗試添加一些控制檯日誌或調試器在您的readForm方法，看看是否值正確抓起：

readForm: function() { 
    var input = this.input; 
    console.log(input.sType.val()); 
    console.log(input.dCapacity.val()); 
    this.model.save({ 
     sType:  input.sType.val(), 
     dCapacity: input.dCapacity.val() 
    }); 
}, 

Answer 2

我的問題，除了Yurui Ray Zhang指出的一些問題（謝謝）之外，我使用的是我在這裏找到的示例中的backbone-localstorage.js：git：//github.com/ngauthier/intro-to- backbone-js.git

「太多的遞歸錯誤」停止出現，儘快將其替換爲存儲I在這裏找到：https://github.com/jeromegn/Backbone.localStorage