Динамическое обновление шаблонов в ractive

Question

Я пытаюсь использовать ractivejs для динамического набора шаблона на основе примера на http://docs.ractivejs.org/latest/advanced-configuration. Проблема, с которой я сталкиваюсь, заключается в том, что изменение шаблона один раз (с использованием this.reset) отлично работает в первый раз, но не во втором - наблюдатель никогда не вызывается, а компонент, кажется, «отключен» от основного ресурсного объекта - например, ссылки на ссылки на элементы, определенные в родительском активном объекте, перестают отображать значение и просто показывают пустую строку.

Небольшой тест доступен на 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. После этого наблюдатель никогда не запускается (возможно, потому, что он наблюдает за атрибутом его потерянного доступа?)

Является ли ошибка ошибкой или я что-то не так?

(Пример использования - это один компонент, который позволяет пользователю выбирать из списка учетных записей и второй компонент, который будет выполнять вызов 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}); 

Возможно время обновить документы еще с некоторыми примерами. :)