KnockoutJS サイト ( http://knockoutjs.com/examples/cartEditor.html ) の例に基づいて、似たようなことをしたいと思います。
カテゴリを選択すると、サーバーから取得していない場合は、クライアントに値があるかどうかを確認します。上記の例ではクライアント側に製品がありますが、私の場合はクライアントにチェックインしたいので、存在しない場合はサーバーに行きます。
誰でも私に例を示すことができますか、それを行うためのヒントはありますか?
前もって感謝します
編集:
私が試したコード(javascript):
function getJsonObject(value) {
return $.parseJSON(value.replace(/"/ig, '"'));
}
var sg = getJsonObject('@ViewBag.SchoolGroups');
var temp = {
schoolGroups: sg,
schoolsBySchoolGroup: undefined,
getSchools: function (schoolGroupId) {
alert(schoolGroupId);
if (this.schoolsBySchoolGroup === undefined) {
//get
}
else {
//verify if exist
//if not go to server
}
return "something...";
}
};
$(document).ready(function () {
var CartLine = function () {
var self = this;
self.schoolGroup = ko.observable(sg[0].Id);
self.school = ko.observable();
// Whenever the category changes, reset the product selection
self.schoolGroup.subscribe(function () {
self.school(undefined);
});
};
var Cart = function () {
// Stores an array of lines, and from these, can work out the grandTotal
var self = this;
self.lines = ko.observableArray([new CartLine()]); // Put one line in by default
// Operations
self.addLine = function () { self.lines.push(new CartLine()); };
self.removeLine = function (line) { self.lines.remove(line) };
};
ko.applyBindings(new Cart());
});
HTML コード:
<table>
<thead>
<tr>
<th>Data de início</th>
<th>Agrupamento</th>
<th>Escola</th>
<th></th>
</tr>
</thead>
<tbody data-bind='foreach: lines'>
<tr>
<td>
<input class='required datepicker' />
</td>
<td>
<select data-bind='options: temp.schoolGroups, optionsText: "Name", optionsValue: "Id", value: schoolGroup'></select>
</td>
<td data-bind="with: schoolGroup">
<select data-bind='options: temp.getSchools($parent.schoolGroup.Id), optionsText: "Name", optionsValue: "Id", optionsCaption: "Select...", value: $parent.school'></select>
</td>
<td>
<a href='#' class="none" data-bind='click: $parent.removeLine'><i class="icon-remove"></i></a>
</td>
</tr>
</tbody>
</table>
<a href='#' class="none" data-bind='click: $root.addLine'><i class="icon-plus"></i></a>
$parent, $data を使用しようとしましたが、成功しませんでした...