最初に、カテゴリ、サブカテゴリ、およびチェックボックス付きの項目の 3 つのリストを作成しました。これらのリストを Breeze、Knockout、および EF5 とバインドすることに成功しました。
ユーザーがアイテムをチェックした後、選択したアイテムで別のリストを作成しました。このデータを保存してバインドする方法が見つかりません。どんな助けでも大歓迎です。ありがとう。
ビューモデル
(function (root) {
var app = root.app;
var dataservice = app.dataservice;
function viewModel() {
var self = this;
this.category = ko.observableArray();
this.errorMessage = ko.observable("");
this.subCategories = ko.observableArray();
this.Items = ko.observableArray();
this.UserItems = ko.observableArray();
this.Id = ko.observable();
this.loadSubCategories = function (data, event) {
dataservice.getSubCategories(self.subCategories, this.Id);
$('#ulCat').find('li').each(function (i, obj) {
var cur = $(this);
cur.attr('class', '');
});
$(event.target).parent().attr('class', 'active');
};
this.loadItems = function (data, event) {
dataservice.getItems(self.Items, this.Id);
$('#ulSubcat').find('li').each(function (i, obj) {
var cur = $(this);
cur.attr('class', '');
});
$(event.target).parent().attr('class', 'active');
};
return this;
};
var vm = new viewModel();
dataservice.getAllCategories(vm.category);
app.categoryViewModel = vm;
データサービス
var EntityQuery = breeze.EntityQuery;
var FilterQueryOp = breeze.FilterQueryOp;
var Predicate = breeze.Predicate;
// service name is route to our Web API controller
var serviceName = 'breeze/Category';
// manager is the service gateway and cache holder
var manager = new breeze.EntityManager(serviceName);
// add members to the dataservice
var dataservice = {
getAllCategories: getAllCategories,
getSubCategories: getSubCategories,
getItems: getItems
};
// extend the app with this dataservice
app.dataservice = dataservice;
/* Private functions */
function getAllCategories(categoryArray) {
var query = new EntityQuery
.from("FoodCategories")
.orderBy("Name");
logger.info("querying for all categories");
return manager
.executeQuery(query)
.then(function (data) {
//return data.results;
processResults(data, categoryArray);
})
.fail(queryFailed);
};
function getSubCategories(subCategoryArray, categoryId) {
var query = new EntityQuery
.from("FoodSubCategories").where("CategoryId", "==", categoryId)
.orderBy("Name");
logger.info("querying for all subCategories");
return manager
.executeQuery(query)
.then(function (data) {
processResultsSub(data, subCategoryArray);
})
.fail(queryFailed);
};
function getItems(itemArray, subCategoryId) {
var query = new EntityQuery
.from("Menus").where("SubCategoryId", "==", subCategoryId).expand("UnitMaster")
.orderBy("Name");
logger.info("querying for all items");
return manager
.executeQuery(query)
.then(function (data) {
processResultsItem(data, itemArray);
})
.fail(queryFailed);
};
function processResults(data, categoryArray) {
var categories = data.results;
logger.success("queried all categories");
categoryArray.removeAll();
categories.forEach(function (category) {
categoryArray.push(category);
});
};
function processResultsSub(data, subCategoryArray) {
var subCategories = data.results;
logger.success("queried all subCategories");
subCategoryArray.removeAll();
subCategories.forEach(function (subCategory) {
subCategoryArray.push(subCategory);
});
};
function processResultsItem(data, itemArray) {
var items = data.results;
logger.success("queried all itmes");
itemArray.removeAll();
items.forEach(function (item) {
itemArray.push(item);
});
};
HTML
<div class="conttab1">
<h2>Category</h2>
<div class="catogeryLink">
<ul id="ulCat" data-bind="foreach: category">
<li id="liCategory" data-bind="click: $root.loadSubCategories">
<input id="hfCategoryId" type="hidden" data-bind="value: Id" />
<a data-bind="text: Name"></a>
</li>
</ul>
</div>
</div>
<!-------------------- Sub Category-------------------->
<div class="conttab2">
<h2>Sub Category</h2>
<div class="catogeryLink">
<ul id="ulSubcat" data-bind="foreach: subCategories">
<li id="liSubCategory" data-bind="click: $root.loadItems">
<input id="hfSubCategoryId" type="hidden" data-bind="value: Id" />
<a data-bind="text: Name"></a>
</li>
</ul>
</div>
</div>
<!-------------------- Items -------------------->
<div class="conttab3">
<div class="resulttab">
<h2>Menu Items</h2>
<table style="width: 100%;">
<tbody data-bind="foreach: Items">
<tr style="border-bottom: 1px solid #808080; padding: 2px 0 2px 0;">
<td style="vertical-align: middle; width: 80%;">
<div class="leftsidediv">
<input type="checkbox" data-bind="title: Name, attr: { id: $index() }" /><label for="" data-bind=" html: Name, attr: { for: $index() }"></label>
<input id="hfItemId" type="hidden" data-bind="value: ItemId" />
</div>
</td>
<td style="width: 15%;">
<div>
<select id="ddlQuantity" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</td>
<td style="vertical-align: middle;">
<div style="float: left;">
<span data-bind="html: UnitMaster.Name"></span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-------------------- User Items -------------------->
<div class="resulttab">
<h2>Selected Items</h2>
<table style="width: 100%;" id="userTable">
<tbody data-bind="foreach: UserItems">
<tr style="border-bottom: 1px solid #808080; padding: 2px 0 2px 0;">
<td style="vertical-align: middle; width: 70%;">
<div class="leftsidediv">
<span data-bind="html: ItemName" />
<input id="Hidden1" type="hidden" data-bind="value: ItemId" />
</div>
</td>
<td style="width: 15%;">
<div>
<select id="ddlUserQuantity" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</td>
<td style="vertical-align: middle;">
<div> <span data-bind="html: UnitMaster.Name"></span></div>
</td>
<td style="vertical-align: middle;">
<div> <a><img src="images/btn_iconDelete.gif" /></a></div>
</td>
</tr>
</tbody>
<tr>
<td colspan="4">
<input id="Text1" type="text" placeholder="Extra note to cook..." width="90%" /></td>
</tr>
</table>
ダイアグラム
最初の 3 つのリストはそよ風を介して正常にバインドされていますが、選択した項目リストでスタックしています。
