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

Question

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

如果我從一個完全空的數據對象開始 - 並動態添加一個部分/組件。 可以單步執行動態添加的partial的html並發現使用了哪些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 }
});

另一種選擇是將每個'部分'設置為一個組件 - 但我會重復自己的負載（我想要所有的DRY等）

干杯，羅布

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正則表達式 - 從無限數量的花括號中獲取字符串以獲得正確的正則表達式。

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: []
  }
});