显示ko.可观察对象的HTML绑定

display ko.observable with html binding

本文关键字：HTML 绑定 对象 观察 ko 显示      更新时间：2023-09-26

看看这个小提琴:http://jsfiddle.net/XuMzS/4/

html: 

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

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

我想做的是通过编写所需的代码来显示可观察的Total在textarea(它在它下面的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();

看到小提琴

为什么需要testHtml可观察对象?

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

Viewmodel: 

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

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

看这个

相关文章：