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

Question

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

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

我的意图是将这个键路径列表即时应用到我的数据对象。我正在构建ui拖放式所见即所得 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 }
});

另一种选择是将每个 'partial' 设置为一个组件 - 但我会重复自己的负载（并且我正在尝试完全干燥等）

干杯，罗布

Answer 1

此代码大量借鉴了 Martydpx https://github.com/martypdx 给出的动态组件示例 - 尽管我找不到 post 我找到它的地方。

我已经创建了一个设置函数，基本上可以为我解析所有内容。这意味着我可以提供一个包含一长串模板的文件（供组件使用）

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

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

-- 这是 JS。编辑 - 请参阅以获得正确的正则表达式。

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

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

How to dynamically parse a list of keypaths used within a Ractive.js template(s)

javascript

ractivejs