MVVM Obervable not updating correctly

[Felipe Casanova]

Hi,

I have a page (relevant code below) which carries out the following :

1. User enters a value into an auto-complete text box
2, Upon selecting an auto complete option, an ajax call is made in order to fill 2 dropdownlists
3. User is required to select a value from each dropdownlist
4. Once a value has been selected on both, they click on the add button and my bound table is updated
5. User can remove rows added to the table

The rows added in step 4 are contained in an array in the observable object.
The first time the page loads points 1 to 5 work as expected.....

However, if the user enters a new search into the auto-complete box and fires the select event, the second time the ajax call is made, the relationship between my viewmodel and UI objects are broken. 

The code which is executing is identical so please could someone shed some light on why the second time around this breaks.

<input type="text" id="txtBox" style="width:300px;" />

<div id="fixturesBindable" style="padding:0 !Important;">
<table>
<thead>
<tr>
                        <th>Col1</th>
                        <th>Col2</th>
</tr>
</thead>
        
<tbody data-template="row-template" data-bind="source: Fixtures"></tbody>
</table>

<select id="a_teamsdropdown" data-role="dropdownlist" data-text-field="TeamFullName" data-value-field="Id" data-bind="source: Teams" style="width:200px;"></select>
<select id="a_oppteamsdropdown" data-role="dropdownlist" data-text-field="TeamFullName" data-value-field="Id" data-bind="source: 
OpponentTeams" style="width:200px;"></select>

<button type="button" data-bind="click: addFixture">Add Fixture</button>

<script id="row-template" type="text/x-kendo-template">
<tr>
<td><input type="hidden" id="team"  data-bind="attr: { name: TeamModelName, value: TeamId }" /></td>
<td><input type="hidden" id="oppteam" data-bind="attr: { name: OppModelName, value: OppTeamId }" /></td>
</tr>
</script>

</div>


<script>
$(document).ready(function () {
        var viewModel = kendo.observable({
            Teams: <%= Model.Teams %>,
            OpponentTeams: [],
            Fixtures: [],
            addFixture: function (e) {
                var Fixtures = this.get("Fixtures");
                var teamId = $("#a_teamsdropdown").val();
                var teamName = $("#a_teamsdropdown>option:selected").text();
                var oppteamId = $("#a_oppteamsdropdown").val();
                var oppteamName = $("#a_oppteamsdropdown>option:selected").text();

                    this.get("Fixtures").push({
                        TeamFullName: teamName,
                        TeamId: teamId,
                        OppTeamFullName: oppteamName,
                        OppTeamId: oppteamId,
                        OrderIndex: this.get("Fixtures").length,
                        TeamModelName: 'Fixtures[' + this.get("Fixtures").length + '].TeamId',
                        OppModelName: 'Fixtures[' + this.get("Fixtures").length + '].OpponentTeamId'
                    });
            },
            resetFixture: function(){
                var Fixtures = this.get("Fixtures");
                $.each(Fixtures, function (key, fixture) {
                    Fixtures.splice(0, 1);
                });
            }
        });

opponents = $("#txtBox").kendoAutoComplete({
            minLength: 3,
            dataTextField: "Name",
            filter: "contains",
            dataSource: new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "/url/Ajax",
                        type: "POST",
                        data: function () { return { searchText: $("#txtBox").val()} 
                        },
                        complete: function (data) {
                            opponents.list.width(400);
                        }
                    }
                },
                pageSize: 10,
                serverPaging: true,
                serverSorting: true,
                schema: {
                    total: "count",
                    data: "data",
                    model: {
                        id: "Id",
                        fields: {
                            Id: { editable: false }
                        }
                    }
                }
            }),
            change: function () {
                this.dataSource.read();
            },
            select: function (e) {
                $.each(opponents.dataSource.data(), function (index, value) {
                    if (e.item.text() == value.Name) {
                        selectedOpponent = value;
                        $('#Fixture_OpponentTeam_Id').val(selectedOpponent.Id);
                        $('#OpponentName').val(selectedOpponent.Name);
                        $.ajax({
                            url: 'GetOpponentTeams',
                            data: { schoolId: selectedOpponent.Id, seasonId: seasonId, sportId: sportsId },
                            type: 'GET',
                            success: function (data) {
                                viewModel.OpponentTeams = data;
                                kendo.bind($("#fixturesBindable"), viewModel);
                            },
                            error: function (xhr, ajaxOptions, thrownError) {
                                //alert('Error during process: \n' + xhr.responseText);
                                alert(thrownError);
                            }
                        });
                        return;
                    }
                });
            }

        }).data("kendoAutoComplete");
</script>

[Felipe Casanova]

Solved.

In the ajax call, on success:
success: function (data) {
viewModel.OpponentTeams = data;
        kendo.bind($("#fixturesBindable"), viewModel);
},

becomes:
success: function (data) {
viewModel.set("OpponentTeams", data);
},

kendo.bind($("#fixturesBindable"), viewModel);
The line directly above gets moved out to the end of the initialisation of the observable object so is only called once.