Knockout.js-“ html”綁定中的“ value”綁定

Question

我正在開發一個需要根據某些值動態生成HTML的應用程序。 我將以下代碼放到動態HTML所在的位置：

<div data-bind="html: extraHTML"></div>

我的javascript文件中有一個對象設置，其中包含HTML代碼的各種塊，一旦應用程序啟動，這些塊將被選擇。 例如，對象之一包含以下內容：

{ type: 'Int', html: '<input style=\'margin: 0\'type=\'number\' min=\'0\' data-bind=\'value: selectedExtra, valueUpdate: \'input\'\' />' }

當我運行該應用程序時，沒有任何錯誤，並且HTML正確綁定，但是，當我在輸入字段中插入一個值時，可觀察到的“ selectedExtra”不會更新。 當我將包含“ html”綁定的div標簽替換為以下內容時：

<input style="margin: 0" type="number" min="0" data-bind="value: selectedExtra, valueUpdate: 'input'">

可觀察的更新恰好可以做到這一點。 我想知道的是，是否存在在“ html”綁定中動態分配“值”綁定並實際更新值的問題。 也許我還錯過了另一種解決方案？

任何幫助將不勝感激，謝謝！

更新

我創建了一個jsfiddle來在這里演示問題。

Answer 1

當您調用applyBindings時，ko將遍歷dom節點以“綁定”到元素。 您的html已生成，因此永遠不會為這些元素調用ko.applyBindings。

您有2個選項：-使用Wayne注釋的模板，（推薦）-如果您確實想從可觀察對象生成html並綁定ViewModel，則可以使用自定義綁定。 您實際上是在這里創建一些自定義模板系統。

HTML：

<div data-bind="htmlTemplate:html"></div>

bindinghandler：

ko.bindingHandlers.htmlTemplate = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
       // NOTE: you could return false and ommit the update code, it probably works, but this way you have more control what happens when the html is updated
       return { controlsDescendantBindings:true };
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // remove old bindings
        ko.cleanNode(element);

        // update the inner html, unrwap to support observables and/or normal properties            
        element.innerHTML=ko.unwrap(valueAccessor());

        // apply the view model to the content of the element
        ko.applyBindingsToDescendants(viewModel,element);
    }
};

JSFIDDLE： http : //jsfiddle.net/martijn/6b87vw3L/