Question

嗨，有RactiveJS用户，我是新来的，我非常兴奋使用RactiveJS，但我想知道是否可以更新Ractive实例中的模板/数据。

我有以下模态窗口：

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

＆gt;内容是排名模板。点击播放器的成像将需要使用playerProfile模板及其请求的数据覆盖排名。有没有其他方法可以通过拆卸然后使用playerProfile模板重新初始化模态窗口来完成？

更新

我忘了提到窗口将包含目前的20个模板（随着游戏变得越来越复杂，将来会增长）。我正在谈论的窗口是主模式窗口，显示用户触发的每个模板，如排名，邮件，报告，部落，地图等。

问候。

解决方法 Marty的答案是正确的，但我宁愿不让自己复杂化，只是在 #content div中创建新的Ractive实例，而不是创建整个模态窗口的不同实例，这些实例将会显示在初始化和隐藏在拆解。

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

否则它只会更改同一组件实例中的数据，这将无法重新创建并分配新模板。

如何更新partials

1 个答案: