Javascript 使用html绑定显示ko.observable

看看这把小提琴：

html:

我试图做的是通过在文本区域内编写所需的代码来显示可观察的总数（在其下方的div中显示html）。 就像我写的：

<span data-bind="text: Total"></span>

但是，如果我将代码写入，则不会显示任何内容。否则，正常的html正在工作。

---

你有什么办法可以做到这一点吗？

我做了一个样品，我想这就是你要找的

function viewModel() {
    var self = this;
    self.Total = ko.observable("1337");
    self.testHtml = ko.observable("<b>test</b><span data-bind=\"text: Total\"></span>");
    self.testHtmlWrapper = ko.computed(function () {
        return '<div id="dynamicContent">' + self.testHtml() + '</div>';
    });

    self.rebind = function () {
        try {
            ko.applyBindings(self, document.getElementById("dynamicContent"));
        } catch (e) {

        }
    };
    self.testHtml.subscribe(self.rebind);

}

var vm = new viewModel();
ko.applyBindings(vm);
vm.rebind();

函数viewModel（）{
var self=这个；
总自我价值=可观察到的价值（“1337”）；
self.testHtml=ko.observable（“测试”）；
self.testHtmlWrapper=ko.computed（函数（）{
返回“”+self.testHtml（）+“”；
});
self.rebind=函数（）{
试一试{
应用绑定（self、document.getElementById（“dynamicContent”）；
}捕获（e）{
}
};
self.testHtml.subscribe（self.rebind）；
}
var vm=new viewModel（）；
ko.应用绑定（vm）；
vm.rebind（）；

---

我希望它能有所帮助。

为什么需要testHtml可观察

这可以使用下面的代码轻松完成

视图模型：

function viewModel() {
    var self = this;
    self.Total = ko.observable("1337");
}

ko.applyBindings(new viewModel());

Html:

测试
Html:

测试

---

请参见

我不明白你在问什么我想做你刚才在文本区域中编写的代码：）我想你在更新时需要回调以重新应用绑定。做的基本上和基本的一样，但我不会得到它，但我会读更多的真棒，这正是我想要的。谢谢：）读我的问题，你就会明白。我确实读了你的问题。这就是我发布答案的原因。你的问题有点模糊，这就是为什么我不能理解你为什么需要它。

function viewModel() {
    var self = this;
    self.Total = ko.observable("1337");
    self.testHtml = ko.observable("<b>test</b><span data-bind=\"text: Total\"></span>");
    self.testHtmlWrapper = ko.computed(function () {
        return '<div id="dynamicContent">' + self.testHtml() + '</div>';
    });

    self.rebind = function () {
        try {
            ko.applyBindings(self, document.getElementById("dynamicContent"));
        } catch (e) {

        }
    };
    self.testHtml.subscribe(self.rebind);

}

var vm = new viewModel();
ko.applyBindings(vm);
vm.rebind();

function viewModel() {
    var self = this;
    self.Total = ko.observable("1337");
}

ko.applyBindings(new viewModel());

<input data-bind="value: Total" type="text" />
<textarea cols="50" rows="10" data-bind="valueUpdate: 'afterkeydown'">
<b>test</b><span data-bind="text: Total"></span>
</textarea>
<p>Html:</p>
<div class="wrapper">
    <div><b>test</b><span data-bind="text: Total"></span></div>
    <br />
</div>