RactiveJS：具有（動態）本地數據的部分

我試圖分離每個部分的數據，以便數據不會混合/覆蓋全局。RactiveJS：具有（動態）本地數據的部分

問題是當部分數據發生變化時，主模板不會重新渲染。

到目前爲止我已經完成的最好的工作是獲得部分重新呈現在主容器中，但不是在主模板本身。

我錯過了什麼嗎？

下面的代碼（也JS Bin）：

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>JS Bin</title> 
     <script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
     <script src="http://cdn.ractivejs.org/latest/ractive.js"></script> 
    </head> 
    <body> 
     <div id="main"></div> 
    </body> 
</html>

JS：

var partial = new Ractive({ 
     template: '{{name.first}} {{name.last}}', 
     oninit: function() { 
      this.observe(function (newValue, oldValue, keyPath) { 
       console.info('newValue = %o, oldValue = %o, keyPath = %s', newValue, oldValue, keyPath); 
      }); 
     }, 
     data: { 
      name: { 
       first: 'John', 
       last : 'Doe' 
      } 
     } 
    }), 

    main = new Ractive({ 
     el: '#main', 
     // template: 'Hello {{name}}!', 
     template: 'Hello {{>partial}}!', 
     partials: { 
      partial: function (p) { 
       // 1) Not working... 
       // return '{{name.first}} {{name.last}}'; 

       // 2) ...also not working... 
       // return partial.template; 

       // 3) ...still not working... 
       // return (p.isParsed(partial.template)) ? partial.template : p.parse(partial.template); 

       // 4) Kind of working... (static - does not re-render) 
       // return partial.toHTML(); 

       // 5) Kind of working... (returning Promise!) 
       return partial.render(this.el); 
      } 
     }, 
     data: { 
      name: 'John Doe' 
     } 
    }); 

// partial.set('name.first', 'Jane');

來源

2015-10-27 Miro

你有兩種方法可以做到這一點。首先，你仍然可以使用偏色，但是you force the context of the partial。但請注意，數據仍將駐留在同一個實例中。在下面的例子中，部分選取「John Doe」作爲數據。但在第二部分用法中，我們強制使用jane對象，使其從jane使用first和last。

var main = new Ractive({ 
    el: '#main', 
    template: 'Hello {{>personPartial john}} and {{>personPartial jane}}!', 
    partials: { 
    personPartial: '{{first}} {{last}}' 
    }, 
    data: { 
    first: 'John', 
    last : 'Doe', 
    jane: { 
     first: 'Jane', 
     last : 'Dee' 
    } 
    } 
}); 

main.set('jane.name.first', 'Jen');

如果你真的總分離的數據，consider using components instead。在這種情況下，John和Jane是它們自己的組件。但請注意，如果組件缺少數據（如說John沒有first），它將查看該數據的父級（main）。如果碰巧在那裏，它將使用它（在這種情況下爲foo）。您可以使用isolated:true來防止此行爲，例如Jane。您還可以通過屬性顯式將數據從父項傳遞給子項。

var John = Ractive.extend({ 
    template: 'Hello {{first}} {{last}}!', 
    data: { 
    last: 'Doe' 
    } 
}); 

var Jane = Ractive.extend({ 
    isolated: true, 
    template: 'Hello {{first}} {{last}}!', 
    data: { 
    first: 'Jane', 
    } 
}); 

var Jay = Ractive.extend({ 
    isolated: true, 
    template: 'Hello {{first}} {{last}}!' 
}); 

var main = new Ractive({ 
    el: '#main', 
    template: 'Hello {{>person}}! <john /> <jane /> <jay first="{{first}}" last="{{last}}" />', 
    partials: { 
    person: '{{first}} {{last}}' 
    }, 
    components: { 
    john: John, 
    jane: Jane, 
    jay: Jay 
    }, 
    data: { 
    first: 'foo', 
    last: 'bar' 
    } 
});

來源

2015-10-27 00:53:28 Joseph

謝謝！我花了一些時間擺弄不同的方法，但選擇了你的第一個建議 - [強制部分的上下文]（http://jsbin.com/firizefaja/edit?js輸出）。雖然我也是通過將部分數據放入「data」屬性的不同子對象中來「分離」數據。 – Miro

RactiveJS：具有（動態）本地數據的部分

回答

相關問題