дисплей ko.observable с HTML связывания

Question

Проверьте эту скрипку: 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()); 

То, что я пытаюсь сделать это, чтобы отобразить наблюдаемые Итого путем написания кода, который необходим внутри текстового поля (который отображает html в div ниже него). Как если бы я писал:

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

Но ничего не отображается, если я пишу этот код в противном случае нормальный HTML работает.. Есть ли способ сделать это?

Answer 1

Я сделал образец, я думаю, что это то, что вы ищете.

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(); 

See Fiddle

Я надеюсь, что это помогает.

Answer 2

Зачем вам нужен 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> 

См this fiddle