innerHTML / Binding not working

[hmarcelodn]

Hi guys,

I have an element like the one below

innerHTML.bind="filler(col, item)"

I need to be able to bind the raw HTML returned attributes. In my example I need to bind value attr. Example

    this.renders["check"] = function(col, item){
        return '<input type="input" value.bind="${hola}"/>';
    };

How can I accomplish that?

Thanks.

[Mordred]

Try innerhtml.bind instead of innerHTML.bind

[jdanyow]

The innerhtml binding doesn't compile templates- docs here: http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.1.1/doc/article/cheat-sheet

More info on using the view-compiler here:
aurelia/templating#35

In general you want to avoid using aurelia this way- there are often better approaches using html templating than construction your markup from strings.

[AStoker]

This might be a separate issue. If so, let me know.
I'm using the innerHTML.bind on an svg for a custom element. This works in all browsers by IE.

<template>
    <svg innerHTML.bind="svgParts"></svg>
</template>

svgParts is a string that represents the insides of an svg. Works on everything by IE.
For comparison, if i used textcontent.bind, that works fine for putting text inside the svg. But I actually need the inner html to be set.

[jdanyow]

@AStoker please do open a separate issue- additional details about the version(s) of IE and a running example would be appreciated!

[hmarcelodn]

@AStoker I tried to use Aurelia sintax inside an Aurelia loop context and it was not working. Is that your case? I had to change my approach to get what I wanted. Guys here says it doesnt compile Aurelia sintax inside strings. I will looking forward to your running example. Thanks!

[AStoker]

@hmarcelodn, no, that's not my case. I'll open a new story with an example. Edge and IE both have horrible support for SVG stuff, and my guess is the way they're loading up the html content just isn't supported by the browser.