私の設定は次のとおりです...
特定の順序でストアド プロシージャから UI にデータを戻すサービスがあります。UI は、このようなノックアウトを使用してデータを MVC パーシャルにバインドします...
@{ ViewBag.Title = "People List"; }
<h2>People List</h2>
<table id="people">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Job Title</th>
<th>Job Description</th>
</tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td style="width: 125px;"><span data-bind="text: Name"></span></td>
<td style="width: 75px;"><span data-bind="text: Gender"></span></td>
<td style="width: 105px;"><span data-bind="text: JobTitle"></span></td>
<td style="width: 300px;"><span data-bind="text: JobDescription"></span></td>
</tr>
</tbody>
</table>
<button style="margin-top: 15px;" data-bind="click: sortByName">Sort by Name</button>
VM の JS は次のようになります...
<script type="text/javascript">
function Person(data) {
this.Name = ko.observable(data.Name);
this.Gender = ko.observable(data.Gender);
this.JobTitle = ko.observable(data.JobTitle);
this.JobDescription = ko.observable(data.JobDescription);
}
function PersonListVM() {
var self = this;
self.people = ko.observableArray([]);
$.getJSON('@Url.Action("DisplayPeople", "People")',
function (results) {
for (var i = 0; i < results.length; i++) {
self.people.push(new Person(results[i]));
}
});
self.sortByName = function () {
self.people.sort(function (x, y) {
return x["Name"] == y["Name"] ? 0 : (x["Name"] < y["Name"] ? -1 : 1);
});
};
};
ko.applyBindings(new PersonListVM());
</script>
問題なくデータの取得と表示ができ、VM 機能で別のダミー人物を追加しても問題なく動作します。しかし、名前で並べ替えても何も起こらないようです。エラーはありませんが、明らかに何か間違っています。これは非常に単純な検索であるはずですが、何が欠けていますか?
PS : プロパティ名を文字列として指定する理由は、テーブル ヘッダーで並べ替えて、このテーブルから並べ替え可能なページ分割されたグリッドを作成したいからです。私の目標は、テーブルを動的に並べ替えることができる有効なプロパティを渡すことができるようにすることですが、これはそれまでの実験です。