如何動態地解析Ractive.js模板中使用的關鍵路徑列表

Question

是否可以解析出動態部分/組件使用的關鍵路徑列表？

如果我從一個完全空的數據對象開始 - 並動態添加一個局部/組件。可以遍歷動態添加的部分的html並發現使用哪個keypath。

我的意圖是隨後將這個keypath列表應用到我的數據對象上。我正在構建一個拖放wysiwyg ui - 並希望設計人員能夠添加模板而不觸摸ractive ...

這裏是一些僞代碼，我希望說明我正在努力實現的目標。

<script id="foo" type="text/ractive"> 
    <p>{{blah}}</p> 
    <p>{{blahblah}}</p> 
</script> 

-

var ractive = new Ractive({ 
    el: '#container', 
    template: '{{#items}}{{partial}}{{/items}}', 
    data: { 
     items : [] // empty to start with 
    } 
}); 


ractive.on('addpartial', function (event) { 
    // partial gets added 
    // process the partial to find out what keypaths it contains.. put those keypaths into array 

var partialDataArray = [{'blah':''},{'blahblah':''}] 

    this.push('items' , { 'partial' : 'foo', partialDataArray } 
}); 

另一種選擇是設置每個「部分」作爲一個組成部分 - 但我會重複自己的負載（我想成爲全乾等）

乾杯， 羅布

Answer 1

此代碼對Martydpx https://github.com/martypdx定的動態分量的例子，大量借鑑 - 雖然我無法找到後我發現它的地方。

我創建了一個基本上爲我解析所有東西的設置函數。這意味着我可以提供一個帶有很長模板列表的文件（要被組件使用）

<div data-component="first_component"> 
     <h1>{{h1}}</h1> 
     <p>{{p1}}</p> 
</div> 

<div data-component="second_component"> 
     <p>{{p1}}</p> 
</div> 

- 這裏是JS。編輯 - 請參閱JavaScript regex - get string from within infinite number of curly braces瞭解正確的正則表達式。

var htmlSnippets = []; 
var setup = function() { 
    // load in our ractive templates - each one is wrapped in a div with 
    // a data attribute of component. 
    $.get("assets/snippets/snippets2.htm", function(data) { 
    var snippets = $.parseHTML(data); 
    // Each over each 'snippet/component template' parsing it out. 
    $.each(snippets, function(i, el) { 
     if ($(el).attr('data-component')) { 
     var componentName = $(el).attr('data-component') 

     // reg ex to look for curly braces {{ }} - used to get the names of each keypath 
     var re = /[^{]+(?=}})/g; 

     // returns an array containing each keypath within the snippet nb: ['foo' , 'bar'] 
     var componentData = $(el).html().match(re); 

     // this is probably a bit messy... adding a value to each keypath... 
     // this returns an array of objects. 
     componentData = $.map(componentData, function(value) { 
      return { [value] : 'Lorem ipsum dolor sit amet' }; 
     }); 
     // combine that array of objects - so its a single data object 
     componentData = componentData.reduce(function(result, currentObject) { 
      for(var key in currentObject) { 
       if (currentObject.hasOwnProperty(key)) { 
        result[key] = currentObject[key]; 
       } 
      } 
      return result; 
     }, {}); 
     // and add the component name to this data object 
     componentData['componentName'] = componentName; 
     // We need to use the data elsewhere - so hold it here... 
     htmlSnippets.push(componentData); 

     // and lastly set our component up using the html snippet as the template 
     Ractive.components[componentName] = Ractive.extend({ 
      template: $(el).html() 
     }); 
     } 
    }); 

    Ractive.components.dynamic = Ractive.extend({ 
     template: '<impl/>', 
     components: { 
      impl: function(){ 
       return this.components[this.get('type')] 
      } 
     } 
    }); 

    }); 
}(); 


var ractive = new Ractive({ 
    el: '#container', 
    template: '#template', 
    data: { 
    widgets: htmlSnippets, 
    pageContent: [] 
    } 
});