カスタムは私がw2uiグリッドを使用していて、テンプレート列がそうのように生成される動的コンテンツ

Question

に取り組んでいない属性：uが見ることができるよう

{ field: 'TableCards', caption: 'Table cards', size: '10%', sortable: true , 
      render:function(record, index, column_index) { 
       let html = ''; 
       if (record.TableCards) { 
         record.TableCards.forEach(function(card) { 
         html += `<div class="card-holder" style="width: 12%; display: inline-block; padding: 0.5%;"> 
            <div class="poker-card blah" poker-card data-value="${card.value}" 
             data-color="${card.color}" 
             data-suit="&${card.suit};" 
             style="width: 30px;height: 30px"> 
            </div> 
           </div>`; 
        }); 
       } 
       return html; 
      } 
     }, 

ポーカーカードは、カスタム属性です。グリッドに描画されません。 他の方法ですか？

Answer 1

ダイナミックHTMLでTemplatingEngine.enhance()を使用できます。

完全な例については、この記事を参照してください：http://ilikekillnerds.com/2016/01/enhancing-at-will-using-aurelias-templating-engine-enhance-api/

---

重要な注意：、次のような.attached()

ビューのライフサイクルフックを呼び出すために カスタム属性が実装されている方法に基づいが必要な場合があります

ライブラリーaurelia-materialを使用して、その属性がmdlのとき、これが私に起こりました。

MDLCustomAttributeが実装されている。このsourceを参照してください、そして今、私は、ダイナミックHTMLで正しく動作するmdl属性のために行うために必要なものを示して次のスニペットは、以下を参照してください私はおよそ好き何

private _enhanceElements = (elems) => { 

    for (let elem of elems) { 

     let elemView = this._templEngine.enhance({ element: elem, bindingContext: this}); 

     //we will now call the View's lifecycle hooks to ensure proper behaviors... 
     elemView.bind(this); 
     elemView.attached(); 

     //if we wouldn't do this, for example MDL attribute wouldn't work, because it listens to .attached() 
     //see https://github.com/redpelicans/aurelia-material/blob/5d3129344e50c0fb6c71ea671973dcceea14c685/src/mdl.js#L107 
    } 
}