0

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

我有以下模式窗口：

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

而>content是一个排名模板。想象点击一个玩家需要用 playerProfile 模板和它请求的数据覆盖排名。除了拆解，还有另一种方法可以完成，然后使用 playerProfile 模板重新初始化模态窗口？

更新

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

问候。

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

4

1 回答 1

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

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

于 2014-05-18T22:42:32.253 回答