Пользовательский атрибут не работает с динамическим контентом

Question

Я использую сетку 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;
            } 
        },

Покер-карта, как вы можете видеть, является пользовательским атрибутом. и это не будет оказано в сетке. Любым другим путем?

Answer 1

Вы можете использовать TemplatingEngine.enhance() на вашем динамическом HTML.

См. Эту статью для полного примера: http://ilikekillnerds.com/2016/01/enhancing-at-will-using-aurelias-templating-engine-enhance-api/

---

Важное примечание: в зависимости от того, как реализован ваш пользовательский атрибут, вам может потребоваться вызвать хуки жизненного цикла View, такие как .attached()

Это случилось со мной, когда использовались материалы библиотеки aurelia, с их атрибутом mdl,

Смотрите этот источник, где MDLCustomAttribute реализован, и теперь посмотрите следующий фрагмент, который показывает, что мне нужно было сделать для того, чтобы 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
    }
}