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

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

      }); 
     } 
    }) 

产量/内容其实只是特殊的谐音，所以通过对每个的keyPath是局部的和设立观察员的项目这将循环。

此演示仅适用于简单表达式，如{{foo}}。如果你在局部内部有更复杂的事情，你必须检查渲染的局部，找出你想观察父对象的关键路径。