отображать ko.observable с привязкой html

Проверьте эту скрипту: 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, написав необходимый код внутри текстовой области (который отображает html в div под этим). Как если бы я написал:

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

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


javascript html observable knockout.js
person Ashkan Hovold    schedule 24.05.2013    source источник
comment
Я не понимаю, о чем вы спрашиваете jsfiddle.net/XuMzS/2   -  person Ven    schedule 24.05.2013
comment
Я хочу сделать то, что вы только что сделали, написав этот код в текстовом поле :)   -  person Ashkan Hovold    schedule 24.05.2013
comment
Я думаю, вам нужен обратный вызов при обновлении, чтобы повторно применить привязки.   -  person Ven    schedule 24.05.2013
comment
knockoutjs.com/documentation/custom-bindings.html делает в основном то же самое, что и базовый один   -  person Ven    schedule 24.05.2013
comment
не понял, буду читать дальше   -  person Ashkan Hovold    schedule 24.05.2013
comment
вам нужно совместно создать пользовательскую привязку к текстовой области и применить некоторую привязку к html, который вы создаете.   -  person SiMet    schedule 24.05.2013

Ответы (2)


arrow_upward
2
arrow_downward

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

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

См. скрипт

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

person Damien    schedule 24.05.2013
comment
Круто, это именно то, что я хотел. Спасибо :) - person Ashkan Hovold; 25.05.2013

arrow_upward
0
arrow_downward

Зачем вам нужен наблюдаемый testHtml?

Это легко сделать с помощью приведенного ниже кода.

Модель просмотра:

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>

См. эту скрипку.

person Jacques Snyman    schedule 27.05.2013
comment
Прочитай мой вопрос и поймешь. - person Ashkan Hovold; 27.05.2013
comment
Я прочитал ваш вопрос. Вот почему я опубликовал ответ. Вы спрашиваете немного расплывчато, и поэтому я не мог понять, зачем вам это нужно. - person Jacques Snyman; 07.06.2013