Knockout render html string

Question

Is there any way to render from a html string in knockout?

i.e

var html = ko.renderFromString('<p data-bind="text:name"></p>', {name:"Fred"});

It would be very convenient for what I'm doing.

$(".container").append(html);
$(".container").on("click", "p", function(e){
console.log(ko.dataFor(this));});

Have you seen this article? knockmeout.net/2011/10/… It describes not exactly what you want but you could get some ideas from it. — nemesv
– nemesv, Commented Jan 16, 2014 at 6:02
Yes basically what you want is templating. You can also use the html binding, but in that case the viewmodel would already be bound. — Sanne Roerdinkholder
– Sanne Roerdinkholder, Commented Jan 16, 2014 at 8:44

haim770 · Accepted Answer · 2014-01-16 10:07:04Z

7

If you're reluctant on messing with the Template Engines, try this:

ko.renderFromString = function (html, data)
    {
    var node = new DOMParser().parseFromString(html, "text/html");
    this.applyBindings(data, node.body);
    var res = node.body.innerHTML.toString();
    this.cleanNode(node);
    delete node;
    return res;
    };

It basically creates a temporary (in-memeory) DOM element from your Html string, binding your data, returning the innerHTML of the bound element then discarding it.

answered Jan 16, 2014 at 10:07

haim770

49.2k7 gold badges113 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Chin Over a year ago

exactly what I wanted to accomplish.

Chin Over a year ago

Not bad 10000 in 7270ms I was getting 3869ms for a simple string.replace function I was using - but this opens up a lot more to me - thanks.

haim770 Over a year ago

When are you calling dataFor()?

Chin Over a year ago

After I append the generated string to the dom and handle a delegated click event. I've added the code to the question

haim770 Over a year ago

That's because i'm calling this.cleanNode(node); and delete node; in the renderFromString function (as i didn't know you're going to use that binding later, i thought it's only the render results you're interested in), try to remove this lines.

Collectives™ on Stack Overflow

Knockout render html string

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related