Question

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

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

我的意图是随时将这个密钥路径列表应用到我的数据对象中。我正在建立一个拖放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 }
});

另一种选择是设置每个＆＃39;部分＆＃39;作为一个组成部分 - 但我会重复自己的负荷（而且我试图成为所有干的等等）

干杯，罗布

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

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

1 个答案: