-1

I'm using w2ui grid, and the template column generated like so:

{ 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;
            } 
        },

poker-card as u can see is a custom attribute. and it's not get rendered in the grid. any other way?

Eliav Maman
  • 69
  • 4
  • What i like about Aurelia is that when u post a question, Thousand of answers just pop right away, because the community is Huge... – Eliav Maman Nov 03 '16 at 06:58
  • 1
    You are not getting answers because your question is not easy to understand. First, try to provide more code and explain what is not working. Second, you cannot use aurelia custom attribute in this way. When you are using a frontend framework, try to use the its features to generate rows. It is a lot easier than using any jQuery plugin – Fabio Nov 03 '16 at 11:50

1 Answers1

0

You can use the TemplatingEngine.enhance() on your dynamic HTML.

See this article for a complete example: http://ilikekillnerds.com/2016/01/enhancing-at-will-using-aurelias-templating-engine-enhance-api/

Important note: based on how your custom attribute is implemented, you may need to call the View's lifecycle hooks such as .attached()

This happened to me, when using library aurelia-material, with their attribute mdl.

See this source where the MDLCustomAttribute is implemented, and now see the following snippet, which shows what I needed to do in order for the mdl attribute to work properly with dynamic 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
    }
}
Tin
  • 424
  • 5
  • 13