以下を実行するページ（以下の関連コード）があります：
- ユーザーがオートコンプリート テキスト ボックスに値を入力します。 2. オート コンプリート オプションを選択すると、2 つのドロップダウン リストを埋めるために ajax 呼び出しが行われます。
- ユーザーは各ドロップダウンリストから値を選択する必要があります
- 両方で値が選択されたら、追加ボタンをクリックすると、バインドされたテーブルが更新されます
- ユーザーはテーブルに追加された行を削除できます
手順 4 で追加された行は、監視可能なオブジェクトの配列に含まれています。ページが最初にポイント 1 から 5 をロードすると、期待どおりに機能します.....
ただし、ユーザーが新しい検索をオートコンプリート ボックスに入力して select イベントを発生させると、2 回目の ajax 呼び出しでビューモデルと UI オブジェクトの関係が壊れます。
実行中のコードは同じですので、誰かがこれが2回目に壊れた理由を明らかにしてください。
<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>