2016-11-02 5 views
-1

Я использую 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

Что мне нравится Аурелия заключается в том, что когда вы отправляете вопрос, тысячи ответов сразу появляются сразу, потому что сообщество является огромным ... –

+1

Вы не получаете ответы, потому что ваш вопрос нелегко понять. Сначала попробуйте предоставить больше кода и объясните, что не работает. Во-вторых, вы не можете использовать атрибут aurelia таким образом. Когда вы используете фреймворк frontend, попробуйте использовать его функции для генерации строк. Это намного проще, чем использовать любой плагин jQuery –

ответ

0

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

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


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

Это случилось со мной при использовании библиотеки aurelia-material со своим атрибутом mdl.

Смотрите это source где 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 
    } 
} 
Смежные вопросы