2017-07-11 6 views
0

私は、データバインディングのいくつかの注釈を持つテンプレートを効果的な子として受け取るカスタム要素を持っています(たとえば、my-viewとしましょう)。ポリマー1では、分散されたテンプレートを別の要素でラップする方法はありますか?

分散テンプレートを別のカスタム要素でラップするにはどうすればいいですか?paper-itemとしましょう。

これは私の作業コードです。 my-viewインサイド

<my-view> 
    <template>[[ item.name ]]</template> 
</my-view> 

私は別のカスタム要素(のはpaper-itemを言わせて)でtemplate効果的な子どもをラップしている私は何を達成したい

<template id="Repeater" is="dom-repeat"> 
</template> 

_templatize() { 
    const repeater = this.$.Repeater 
    const template = this.queryEffectiveChildren('template') 

    repeater.templatize(template) 
} 

を持っています。もちろん動作しません

_templatize() { 
    const repeater = this.$.Repeater 
    const template = this.queryEffectiveChildren('template') 

    const item = this.create('paper-item') 
    item.appendChild(template.content) 

    repeater.templatize(item) 
} 

よう

何か。

答えて

0

おそらく私はあなたが間違っていると理解しましたが、あなたが与えた例のようにページ構造を作成していないかもしれません。最初にHTML要素を使用し、必要に応じてjavascriptを使ってスパイスします。

<dom-module id="my-view"> 

    <template> 

    <template is="dom-repeat" items="[[anArrayWithStrings]]" as="someValue"> 
     <paper-item>[[someValue]]</paper-item> 
    </template> 

    <template is="dom-repeat" items="[[anArrayWithObjects]]" as="employee"> 
     <paper-item two-line> 
     <div>[[employee.name]]</div> 
     <div>[[employee.title]]</div> 
     </paper-item> 
    </template> 

    </template> 

    <script> 

    Polymer({ 
     is: 'my-view', 

     properties: { 
     anArrayWithStrings: { 
      type: Array, 
      value: function() { return ['firstOne', 'secondOne', 'thirdOne']; } 
     }, 

     anArrayWithObjects: { 
      type: Array, 
      value: function() { return [ 
      {'name': 'Sarah', 'title': 'accountant'}, 
      {'name': 'Ingrid', 'title': 'engineer'} ]; } 
      }, 
    }, 

    ready: function() { 
     //enter code here 
    }, 

    </script> 
</dom-module> 

私はちょうどテストを行わず、フリーハンドでこれを書いたので、そこにいくつかの障害のあるコードがあるかもしれませんが、これはそれのように見えることができる方法の一例です。

関連する問題