在ractive

Question

動態更新模板，我試圖用ractivejs動態設置的模板，基於在http://docs.ractivejs.org/latest/advanced-configuration的例子。我遇到的問題是改變模板一次（使用this.reset）第一次正常工作，但不是第二次 - 觀察者從未被調用，並且組件似乎與主要的ractive對象「分離」例如，對父Ractive對象中定義的元素的數據引用將停止顯示該值，並只顯示空白字符串。

小測試用例可在http://jsfiddle.net/bbaetz/41n2yvft/4/但主要腳本是：

var Widget1 = Ractive.extend({ 
    template : '#widget1-template' 
}); 

var Widget2 = Ractive.extend({ 
    template: function(data) { 
     return data.template 
    }, 
    init : function() { 
     this.observe('widgetParams.val', function (newVal, oldVal) { 
      if (newVal === oldVal) { return; } 
      var newData = { 
       template : 'Reset: {{val}} and {{widgetParams.val}}', 
       val : newVal + ' data', 
      }; 
      this.reset(newData); 
     }.bind(this), {init: false}); 
    }, 
    data : { 
     template : 'A: {{val}}', 
     val : 'INIT', 
    } 
}); 

var ractive = new Ractive({ 
    el : 'foo', 
    template : '#template', 
    components : { 
     widget1 : Widget1, 
     widget2 : Widget2 
    }, 
    data : { 
     widgetParams : { 
      val : '12345678', 
     }, 
    }, 
}); 

與模板：

<foo></foo> 

<script id='widget1-template' type='text/ractive'> 
    <button on-click='set("widgetParams.val","12345")'>set val to 12345</button> 
    <button on-click='set("widgetParams.val","54321")'>set val to 54321</button> 

    Val is: {{widgetParams.val}} 
    <br /> 
</script> 

<script id='template' type='text/ractive'> 
    <widget1></widget1> 

    <widget2></widget2> 
</script> 

第二插件開始了輸出 'A：INIT'（其是正確）。如果我點擊該按鈕，然後將其變爲一個「重置：12345個數據和12345」（也是正確的），但如果我點擊另一個按鈕我得到「復位：54321個數據」 - 這表明其失去知名度的其他'widgetParams.val'屬性。在那之後，（因爲它的觀察屬性失去的訪問可能？）當觀察者從來沒有發射

這是ractive一個bug，還是我做錯了什麼？

（這個用例是一個允許用戶從賬戶列表中選擇的組件，第二個組件將根據賬戶的「類型」進行ajax調用以獲取數據和模板。第二個「部件」將在其他情況下被重用，這就是爲什麼/這件事不只是一個模板本身使用的諧音）。

Answer 1

如果要保留數據，重用現有的數據對象你的觀察（見http://jsfiddle.net/41n2yvft/6/）：

this.observe('widgetParams.val', function (newVal, oldVal) { 
    if (newVal === oldVal) { return; } 
    this.data.template = 'Reset: {{val}} and {{widgetParams.val}}'; 
    this.data.val = newVal + ' data'; 
    this.reset(this.data); 
}.bind(this), {init: false}); 

但在這種情況下，你可能只是想而不重置數據更新模板（http://jsfiddle.net/41n2yvft/7/）：

this.observe('widgetParams.val', function (newVal, oldVal) { 
    if (newVal === oldVal) { return; } 
    this.set('val', newVal + ' data'); 
    this.resetTemplate('Reset: {{val}} and {{widgetParams.val}}'); 
}.bind(this), {init: false}); 

大概時間與更多的例子更新文檔。 :)