Ractive에서 여러 템플릿을 처리하는 방법

Question

두 개의 템플릿이 있다고 가정 해 봅니다. 내 콘텐츠가 포함 된 index 템플릿과 변경 내역이 포함 된 changelog 템플릿입니다. 다른 템플릿으로 간주됩니다.

<script id='index' type='text/ractive'> 
// ... 
</script> 

<script id='changelog' type='text/ractive'> 
// ... 
</script> 

ractive = new Ractive({...}); 

이러한 템플릿을 프로그래밍 방식으로 변경하는 가장 좋은 방법은 무엇입니까? Ractive 인스턴스의 template 변수 (예 : ractive.template = '#changelog';)를 변경할 수는 있지만 변경하면 output 콘텐츠가 업데이트되지 않습니다. 이상적으로는 사용자가 메뉴의 버튼을 클릭하여 index과 changelog 사이를 전환 할 수 있도록하고 싶습니다.

Answer 1

템플릿을 동적으로 변경하는 것은 향후 릴리스에서 볼 수있는 내용입니다. 일부 배경에 대해서는 this GitHub thread을 참조하십시오. 현재

, 문제는이 같은 것입니다 달성하기 위해 가장 좋은 방법 : 인덱스 템플릿을 숨기고 변경 로그를 표시,

<script id='main' type='text/ractive'> 
    {{# page === 'index' }} 
    {{>index}} 
    {{/}} 

    {{# page === 'changelog' }} 
    {{>changelog}} 
    {{/}} 
</script> 

<script id='index' type='text/ractive>...</script> 
<script id='changelog' type='text/ractive>...</script> 

그런 다음 앱 내부 ractive.set('page', 'changelog')합니다. 당신이 <script> 태그의 부하를하지 않고이 작업을 수행하고자한다면

,이 같은 옵션을 설정할 것 :

ractive = new Ractive({ 
    /* other options... */ 
    template: mainTemplate, 
    partials: { 
    index: indexTemplate, 
    changelog: changelogTemplate 
    } 
}); 

Answer 2

내가 체크 대답에 동의하는 경우 확실하지 않다. 템플릿을 변경하는 방법은 훨씬 간단합니다. 템플릿의 id를 알면됩니다. ractive에는 'resetTemplate'이라는 깔끔한 함수가 있습니다.이 함수를 사용하면 주어진 객체의 템플릿을 변경할 수 있습니다. 예를 들면 :

var rxObject = new Ractive({ 
 
    el: '#element', 
 
    template: '#template_1' 
 
}); 
 

 
//what you can do at any point in your code is call ractive.resetTemplate, as such: 
 

 
rxObject.resetTemplate('#template_2');

<script id="template_1" type="text/html"> 
 
    
 
    //content of this script 
 
    
 
</script> 
 

 
<script id="template_2" type="text/html"> 
 
    
 
    //content of this script 
 
    
 
</script>

나는 그에게 '확인'대답은 설명하는 방법을하는 작업을 더 복잡하고 더 생각합니다.