（重新）呈現更改事件處理程序中的主幹視圖不起作用

Question

我有兩個表單元素，都是通過backbone.stickit的雙向數據綁定。 第二個表單元素（＃輸入）只是化妝品 - 在那裏顯示它的實際工作。

這個想法是，我的視圖得到（重新）呈現，每當下拉菜單中的選項（＃select）菜單被更改。

我試圖通過捕捉＃選擇的「改變」事件以實現和調用this.render（）（重新）渲染視圖。

顯然這不起作用。選定的選項不會保存回模型中，我不明白爲什麼。

我不是在尋找一個解決方案，而不是解釋，爲什麼下面的代碼無法正常工作。解決方案（如：適用於我）是小提琴的一部分 - 已發表評論。

HTML：

<script type="text/template" id="tpl"> 
    <h1>Hello <%= select %></h1> 
    <select id="select"> 
    </select> 
    <p>Select: 
    <%= select %> 
    </p> 
    <hr> 
    <input type="text" id="input"> 
    <p>Input: 
    <%= input %> 
    </p> 
</script> 

<div id="ctr"></div> 

的JavaScript：

Foo = Backbone.Model.extend({ 
    defaults: { 
    select: "", 
    input: "", 
    } 
}); 
FooView = Backbone.View.extend({ 
    el: '#ctr', 
    template: _.template($('#tpl').html()), 
    initialize() { 
    this.model.bind('change', function() { 
     console.log("model change:"); 
     console.log(this.model.get('select')); 
     console.log(this.model.get('input')); 
    }, this); 
    //this.model.bind('change:select', function() { this.render(); }, this); // <--------------------- WORKS 
    }, 
    render: function() { 
    this.$el.html(this.template(this.model.toJSON())); 
    this.stickit(); 
    return this; 
    }, 
    events: { 
    'change #select': function(ev) { 
     console.log('change event triggered:'); 
     console.log(this.model.get('select')); 
     console.log(this.model.get('input')); 
     this.render(); // <--------------------- DOES NOT WORK - WHY? 
    }, 
    /* 'click #render': function(ev) { 
     console.log('render event triggered:'); 
     console.log(this.model.get('select')); 
     console.log(this.model.get('input')); 
     this.render(); 
    } */ 
    }, 
    bindings: { 
    '#input': 'input', 
    '#select': { 
     observe: 'select', 
     selectOptions: { 
     collection: function() { 
      return [{ 
      value: '1', 
      label: 'Foo' 
      }, { 
      value: '2', 
      label: 'Bar' 
      }, { 
      value: '3', 
      label: 'Blub' 
      }] 
     } 
     } 
    }, 
    }, 
}); 
new FooView({ 
    model: new Foo() 
}).render(); 

https://jsfiddle.net/r7vL9u07/9/

Answer 1

它不起作用調用從this.render()您change #select事件處理程序中的原因是因爲你破壞了兩Backbone.stickit爲您提供的雙向數據綁定。流程如下所示：

• 用戶更改'#select'的值。
• 您的change #select處理程序觸發並調用this.render()。
• render重新填充#ctr與沒有選擇option一個新的選擇菜單。
• Backbone.stickit對更改爲#select作出響應。
• Backbone.stickit嘗試獲取#select的值，但由於它不包含選定的option，因此該值爲undefined。
• Backbone.sticket設置model的select屬性undefined。

如果移動this.render()調用model的change:select處理程序中它工作的原因是因爲Backbone.stickit能夠不改變DOM它得到的機會之前正確更新模型。