Question

I’m trying to utilise the demo here:

http://knockoutjs.com/examples/cartEditor.html

However, in the dataset used, which is: sampleProductCategories – it is static in the example.

I want to populate that dataset after calling an API via jQuery getJson.

So the markup will exist on the page – however it won’t yet have the data to populate the view.

How to I retrigger the markup to redraw itself, when the sampleProductCategories list changes?

eg – can this part be redrawn/rebound to the data?

 <tbody data-bind='foreach: lines'>
    <tr>
        <td>
            <select data-bind='options: sampleProductCategories, optionsText: "TypeName", optionsCaption: "Select...", value: TypeID'></select>
        </td>
        <td data-bind="with: category">
            <select data-bind='options: products, optionsText: "name", optionsCaption: "Select...", value: $parent.product'></select>
        </td>

Thank you,

Mark

Answer 1

You can use an observableArray for your options and then populate them by an AJAX request. The UI will update accordingly.

Here is an updated sample of the cart editor that uses an empty observableArray and updates it in a setTimeout after 1 second with the static data (like you would with an AJAX call). http://jsfiddle.net/rniemeyer/TmUDc/