javascript - 如何动态解析Ractive.js模板中使用的键路径列表

是否可以解析出动态部分/组件使用的键路径的列表？

如果我从一个完全空的数据对象开始-动态添加部分/组件。可以逐步浏览动态添加的部分的html并发现使用了哪些键路径。

然后，我的目的是将该键路径列表立即应用于我的数据对象。我正在构建所见即所得的ui ui拖放-希望设计人员能够添加模板而不会触碰到 Activity 的...

这是一些伪代码，我希望它们说明了我正在尝试实现的目标。

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

另一个选择是将每个“部分”设置为一个组件-但我要重复自己的加载(并且我试图全部变干等)

干杯，
抢

最佳答案

这段代码大量借鉴了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: []
  }
});