Cascading select2 Combobox with Knockout JS

Question

Here's the code: http://jsfiddle.net/W4qPT/

the combobox script is included at the bottom , if you remove it, everything works fine.

I cannot seem to get it to refresh the combobox with the new content given to me by the Knockout Ajax.

HTML

    <div>
        <div class="cbp-content" id="didScreen">
            <div>
                <table width='100%'>
                    <thead>
                        <tr>
                            <th width='25%'>State</th>
                            <th width='25%'>City</th>
                            <th class='quantity' width='10%'>Quantity</th>
                            <th width='10%'></th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: items">
                        <tr>
                            <td>
                                <select class="combobox" data-bind="options: $parent.states, optionsText: 'name', value: state, optionsCaption: 'Select State'"></select>
                            </td>
                            <td>
                                <select class="combobox" data-bind="options: cities, optionsText: 'rc_abbr', optionsValue: 'id', value: city"></select>
                            </td>
                            <td>
                                <input name="quantity" data-bind="value: quantity" />
                            </td>
                            <td>
                                <button class="btn" data-bind="click: $parent.remove"><i class="icon-remove"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <button class="btn" data-bind="click: newItem">Add Item</button>
        </div>
    </div>
</fieldset>

---

JavaScript (Knockout JS)

var Item = function () {
    var self = this;
    self.state = ko.observable();
    self.city = ko.observable();
    self.quantity = ko.observable();


    self.cities = ko.observableArray([]);
    self.state.subscribe(function (state) {
        self.city("");
        self.cities.removeAll();
        $.ajax({
            url: '/echo/json/',
            type: 'POST',
            data: {
                json: ko.toJSON([{"id":"29","rc_abbr":"ANCHORAGE"}]),
            },
            success: function (response) {
                self.cities(response);
            }
        });
    });
};

var ViewModel = function (states) {
    var self = this;
    self.states = states;
    self.items = ko.observableArray([new Item()]);

    self.newItem = function () {
        self.items.push(new Item());
    };
    self.remove = function (item) {
        self.items.remove(item);
    };
};

var usStates = [{
    name: 'ALASKA',
    abbreviation: 'AK'
}];

window.vm = new ViewModel(usStates);
ko.applyBindings(window.vm, document.getElementById('didScreen'));
$(".combobox").select2();

Answer 1

You have to call .select2() again on all new comboboxes you create. You're now only calling it on comboboxes that exist when your DOM is ready.

You could change this:

self.newItem = function () {
    self.items.push(new Item());
};

To this:

self.newItem = function () {
    self.items.push(new Item());
    $(".combobox").not('.select2-container').select2();
};