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

Question

I have an array like this which i am trying to bind with a 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>"
}]

As you can see there is template which contains a string for option. This i have created with some function. Now i want to bind this array to select.

self.Result = ko.observableArray(arr)

View

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

And now it produces an error. html binding can not be used with virtual elements.

Moreover if i try this

ko.virtualElements.allowedBindings.html = true;

It does not solve the problem as i assume it is only for custom bindings.

Is there any solution for this? What should i do if i need to procees with this

Answer 1

On solution would be to directly use the html binding on the select element and manually concatenate your template to one string:

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

</select>

Demo JSFiddle .

However if you could then you should change your design and not send back the template html but build it on the client:

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

Demo JSFiddle .

Answer 2

Thanks for the solution @nemesv provided i came to this point

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

And

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

Still i would like html binding to support virtual elements.