knockout.js - 挖空渲染 html 字符串

Question

有什么方法可以在 knockout 中从 html 字符串进行渲染吗？

即

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

这对我正在做的事情来说会很方便。

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

Answer 1

如果您不愿意弄乱模板引擎，试试这个:

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

它基本上从您的 Html 字符串创建一个临时的(内存中的)DOM 元素，绑定(bind)您的数据，返回绑定(bind)元素的 innerHTML 然后丢弃它。