我正在使用w2ui网格,模板列生成如下:
{ 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;
}
},
你可以看到的扑克牌是一个自定义属性。并且它不会在网格中呈现。
任何其他方式?
答案 0 :(得分:0)
您可以在动态HTML上使用TemplatingEngine.enhance()
。
有关完整示例,请参阅此文章:http://ilikekillnerds.com/2016/01/enhancing-at-will-using-aurelias-templating-engine-enhance-api/
重要说明:根据您的自定义属性的实现方式,您可能需要调用View的生命周期挂钩,例如.attached()
< / p>
当使用库aurelia-material时,我发生了这种情况,其属性为mdl
。
查看实施MDLCustomAttribute
的{{3}},现在看到以下代码段,其中显示了我需要执行的操作才能使mdl
属性与动态HTML一起正常运行:
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
}
}