Question

我有一个这样的数组，我试图用select绑定。

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;

它没有解决问题，因为我认为它只适用于自定义绑定。

这有什么解决方案吗？如果我需要处理这个

，我该怎么办？

Answer 1

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

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

Answer 2

感谢解决方案@nemesv，我提到了这一点

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

并且

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

我仍然想要html绑定来支持虚拟元素。

如何在空容器knockoutjs的html绑定中显示observable

2 个答案: