如何在 html 绑定中显示 observable 与空容器 knockoutjs答案

【问题标题】：How to display observable in html binding with empty container knockoutjs如何在 html 绑定中显示 observable 与空容器 knockoutjs
【发布时间】：2014-08-18 21:12:27
【问题描述】：

我有一个这样的数组，我正在尝试用一个选择来绑定它。

var arr =       [{
    "Id": 1,
    "Rate": 5,
    "Price": 200,
    "Name": "History",
    "template": "<option id='1'>History</option>"
}, {
    "Id": 2,
    "Rate": 5,
    "Price": 150,
    "Name": "Geographic",
    "template": "<option id='2'>Geographic</option>"
}, {
    "Id": 3,
    "Rate": 1,
    "Price": 75,
    "Name": "Maths",
    "template": "<option id='3'>Maths</option>"
}, {
    "Id": 4,
    "Rate": 2,
    "Price": 50,
    "Name": "Statistics",
    "template": "<option id='4'>Statistics</option>"
}, {
    "Id": 5,
    "Rate": 3,
    "Price": 120,
    "Name": "Drawing",
    "template": "<option id='5'>Drawing</option>"
}]

如您所见，有一个包含选项字符串的模板。这是我用一些功能创建的。现在我想绑定这个数组来选择。

self.Result = ko.observableArray(arr)

查看

<select data-bind="foreach:Result">
    <!--  ko html:$data.template -->
    <!--  /ko -->
</select>

现在它产生了一个错误。 html 绑定不能与虚拟元素一起使用。

如果我试试这个

ko.virtualElements.allowedBindings.html = true;

它不能解决问题，因为我认为它仅适用于自定义绑定。

有什么解决办法吗？如果我需要这样做，我应该怎么做

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

解决方案是直接在select 元素上使用html 绑定并手动将您的模板连接到一个字符串：

<select data-bind="html: Result.map(function(i) { return i.template }).join('\n')">

</select>

演示JSFiddle.

但是，如果可以的话，您应该更改您的设计，而不是发回模板 html，而是在客户端上构建它：

<select data-bind="foreach:Result">
    <option data-bind="attr: {id: Id}, text: Name"></option>
</select>

演示JSFiddle.

【讨论】：

感谢您。对于第二个，由于我的要求，我不想使用它，因为模板对我来说很重要。对于第一个，我想要一些简单的东西
这给出了一个好主意，虽然我希望 html 绑定支持作为虚拟元素
您可能会根据 html 绑定的源创建一个自定义绑定，该绑定将在没有容器元素的情况下工作....在我的第一个示例中，我只是内联了绑定中的所有代码，所以当然，您可以创建一个辅助函数并将逻辑移到那里。

【解决方案2】：

感谢@nemesv 为我提供的解决方案

self.LoadTemplate = function(){
    return self.Result().map(function(i) { return i.template }).join('\n')
}

还有

<select data-bind="html:LoadTemplate()"></select>

我仍然希望 html 绑定支持虚拟元素。

【讨论】：