동적으로 템플릿을 업데이트하는

Question

나는 예제를 기반으로 템플릿을 동적으로 설정하기 위해 ractivejs를 사용하려고 시도하고 있습니다 (http://docs.ractivejs.org/latest/advanced-configuration). 내가 겪고있는 문제는 템플릿을 한 번 (this.reset을 사용하여) 변경하면 처음에는 잘 작동하지만 두 번째에는 제대로 작동하지 않는다는 것입니다. 즉, 관찰자가 호출되지 않고 구성 요소가 주 랩톱 객체에서 '분리'된 것처럼 보입니다. 예를 들어 부모 Ractive 객체에 정의 된 요소에 대한 데이터 참조는 값을 표시하지 않고 빈 문자열 만 표시합니다. (인 'INIT A'를

작은 테스트 케이스 http://jsfiddle.net/bbaetz/41n2yvft/4/에서 사용할 수 있지만, 메인 스크립트이다

가

<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> 

번째 위젯 출력 시작은 다음 템플릿

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', 
     }, 
    }, 
}); 

옳은). 버튼 중 하나를 클릭하면 '재설정 : 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}); 

아마도 더 많은 예제로 문서를 업데이트 할 시간입니다. :)