如何更新部分

Question

您好RactiveJS用戶，我在這裏是新的，我很興奮使用RactiveJS，但是，我想知道是否可以更新Ractive實例內的模板/數據。

我有以下模式窗口：

<div id="modal" intro-outro="fade:100"> 
    <div id="content">{{>content}}</div> 
</div> 

而且>內容是排名模板。點擊播放器的圖像需要使用playerProfile模板覆蓋排名並且它是所請求的數據。有沒有另外一種方式可以將這個方法放在一邊拆除，然後用playerProfile模板重新初始化模態窗口？

UPDATE

我忘了提，窗口將在此刻環繞20個模板（這將在未來成長爲遊戲變得更加複雜）。我所說的窗口是顯示用戶觸發的每個模板的主要模式窗口，如排名，郵件，報告，部落，地圖等。

問候。

替代方法 馬蒂的回答是正確的，但我寧願不要自己Ractive的新實例＃內容 DIV中不是創造，這將在初始化顯示整體模態窗口的不同情況複雜，只是創建和隱藏在拆解。

Answer 1

如果你只是有兩種狀態（相對於開放式的活力），可以有條件地阻止他們：

<div id="modal" intro-outro="fade:100"> 
    <div id="content"> 
     {{^selected}}{{>partial1}}{{/}} 
     {{#selected}}{{>partial2}}{{/}} 
    </div> 
</div> 

您可以加強數據模型後初步呈現。假設你有一個玩家點擊處理程序：

ractive.on('playerSelected', function(e){ 
    //however your data works... 
    $.get('/player?id=' + e.context.id, function(data){ 
     ractive.set(e.keypath + '.player', data.player) 
     ractive.set(e.keypath + '.selected', true) 
    }) 
}) 

如果你需要一個更動態的方法，你可以使用一個組件動態設置部分。這裏有一個例子（http://jsfiddle.net/9Vja5/2/）說明你如何在4.0中做到這一點（4.1會在這方面提供一些改進）。在主模板中使用的成分：

<div> 
    {{#reset}} 
    <dynamicPartial partial='{{partial}}'/> 
    {{/}} 
</div> 

然後，模板設置爲所提供的部分在組件beforeInit：

Ractive.components.dynamicPartial = Ractive.extend({ 
    beforeInit: function(o){ 
     o.template = '{{>' + o.data.partial + '}}' 
    } 
}) 

的泛音需要或者在全球範圍內所定義，或所述動態成分上。

我使用的是部分因爲這就是你的問題。如果您有要分配的模板列表，則可以直接設置模板。或者，您也可以通過'<' + component + '/>'將模板設置爲組件。

重置是一個黑客位的強制Ractive重新呈現組件：

r.observe('partial', function(){ 
    r.set('reset', false) 
    r.set('reset', true) 
}) 

否則就只是改變同一組件實例中的數據，這將無法得到它的重建和分配一個新的模板。