Question

我正在尝试使用ractivejs根据http://docs.ractivejs.org/latest/advanced-configuration的示例动态设置模板。我遇到的问题是更改模板一次（使用this.reset）第一次工作正常，但不是第二次 - 从不调用观察者，并且组件似乎与主要ractive对象“解除关联” - 例如，对父Ractive对象中定义的元素的数据引用将停止显示该值，并且只显示一个空字符串。

http://jsfiddle.net/bbaetz/41n2yvft/4/提供了一个小测试用例，但主要脚本是：

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

使用模板：

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

第二个小部件开始输出'A：INIT'（这是正确的）。如果我单击其中一个按钮然后它会变为'重置：12345数据和12345'（也正确），但如果我点击另一个按钮，我会得到'重置：54321数据和' - 这表明它失去了对其他'widgetParams.val'属性。在那之后，观察者永远不会被解雇（可能是因为它观察了它失去了访问权限的属性？）

这是一个ractive的错误，还是我做错了什么？

（此用例是允许用户从帐户列表中进行选择的一个组件，以及将根据帐户的“类型”进行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} );

可能有时间用更多示例来更新文档。：）

在ractive中动态更新模板

1 个答案: