Question

有没有办法检测组件内容何时发生变化？

例如：

HTML：

<component>
    <div>{{name}}</div>
</component>

JS：

component = Ractive.extend({
    on...: function () {
        // invoked when the inner HTML changes
    }
});

我使用{{yield}}，因此内容将在父级的上下文中呈现。

现在我必须将name传递给组件只是为了观察更改（即使我不需要组件上下文中的值）。（或者我将添加一个我可以调用的函数。）

<component changes="{{name}}">
    <div>{{name}}</div>
</component>

有什么想法吗？

Answer 1

这是可能的，但有点hacky。

http://plnkr.co/edit/YoTZpyTTyCyXijEteGkg?p=preview

    <comp>
        {{name}} hi {{thing}}
    </comp>

    comp = Ractive.extend({
        template: '<div>{{yield}}</div>',
        oncomplete: function() {

            var self = this;

            self.partials.content.forEach(function(partial) {

                if (partial.r) {
                    self.parent.observe(partial.r, function(newValue) {
                        console.log(partial.r + ' changed to ', newValue)
                    }, {init: false});
                }

            });
        }
    })

Yield / Content实际上只是特殊的部分，所以这将循环遍历该部分中的项目并为每个keypath设置一个观察者。

此演示仅适用于{{foo}}等简单表达式。如果你在局部内部有更复杂的东西，你将不得不检查渲染的局部，以找出你想要观察父级的关键路径。

检测Ractive.js中的组件内容更改

1 个答案: