これは私の完全なコードで、検索を組み込むために使用しています。(SOエディターを使用してソースコードをインデントするために最善を尽くしました)
<script type="text/javascript">
var mapping = {
'UnitList': {
create: function (options) {
return new UnitMapping(options.data);
}
},
'AreaList': {
create: function (options) {
return new AreaMapping(options.data);
}
}
}
$(function () {
//JSON data from server
var jsonModel = '{"AreaList":
[{"AreaName":"area1","AreaDescription":"test","AreaId":5,"PlantId":4,"IsActive":true},{"AreaName":"area2","AreaDescription":"abc","AreaId":6,"PlantId":5,"IsActive":true},{"AreaName":"area3","AreaDescription":"xyz","AreaId":7,"PlantId":6,"IsActive":true},{"AreaName":"area4","AreaDescription":"","AreaId":8,"PlantId":7,"IsActive":true},{"AreaName":"area5","AreaDescription":"","AreaId":9,"PlantId":8,"IsActive":true},{"AreaName":"test","AreaDescription":"test","AreaId":10,"PlantId":4,"IsActive":false}],"UnitList":[{"AreaId":5,"UnitId":1,"UnitName":"test","Description":"test","IsActive":true},{"AreaId":5,"UnitId":2,"UnitName":"test2","Description":"test","IsActive":true}]}';
var viewModel = ko.mapping.fromJSON(jsonModel, mapping);
UnitDataService.init(mapping, viewModel);
});
var AreaMapping = function (data) {
ko.mapping.fromJS(data, {}, this);
};
var UnitMapping = function (data) {
ko.mapping.fromJS(data, {}, this);
this.IsEdit = ko.observable(false);
this.searchText = ko.observable(""); // added this overservable to capture search text
};
var UnitDataService = (function () {
var mapping,
viewModel;
function init(map, model) {
mapping = map;
viewModel = model;
ko.applyBindings(viewModel);
}
function editItem(data) {
data.IsEdit(true);
}
function saveItem(data) {
data.IsEdit(false);
}
function templateToUse(context, target)
{
return context.IsEdit() ? 'itemEdit' : 'itemDisplay';
}
function filteredItems(context)
{
return context.viewModel.UnitList.UnitName()
}
return {
init: init,
templateToUse: templateToUse,
editItem: editItem,
saveItem: saveItem,
filteredItems: filteredItems
}
}());
</script>