檢測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}}。如果你在局部內部有更復雜的事情，你必須檢查渲染的局部，找出你想觀察父對象的關鍵路徑。