使用KnockoutJS的项目选择MVC视图
Item selection MVC view with KnockoutJS
我正在尝试实现一个通用的ASP.net MVC视图。UI应该显示从服务器加载数据的可用和选定项目的列表(基本上是字符串列表)。用户可以对列表进行更改,即可以从可用项目列表中选择新项目,也可以从所选列表中删除项目。
我想使用KnockoutJS来利用绑定。
我设法完成了它,直到所有东西都在工作,除了在可用列表中初始化视图时显示选中的项目。如图所示
我尝试了各种选项(使用模板(最接近我想要实现的)、选中的属性、可能的选项),问题是如果我设法显示选中的项目,则会中断其他一些功能。尝试定义一个模板,但在我的情况下无法使其工作。
HTML:
<div class='moverBoxOuter'>
<div id='contactsList'>
<span data-bind="visible: availableItems().length > 0">Available countries: </span>
<ul data-bind="foreach: availableItems, visible: availableItems().length > 0">
<li>
<input type="checkbox" data-bind="checkedValue: $data, checked: $root.selectedItems" />
<span data-bind="text: title"></span>
</li>
</ul>
<span data-bind="visible: selectedItems().length > 0">Selected countries: </span>
<ul data-bind="foreach: selectedItems, visible: selectedItems().length > 0">
<li>
<span data-bind="text: title"></span>
<a href="#" data-bind="click: $parent.removeItem">Delete</a>
</li>
</ul>
</div>
JS:
var initialData = [
{
availableItems: [
{ title: "US", isSelected: true },
{ title: "Canada", isSelected: false },
{ title: "India", isSelected: false }]
},
{
selectedItems: [
{ "title": "US" },
{ "title": "Canada" }
]
}
];
function Item(titleText, isSelected) {
this.title = ko.observable(titleText);
this.isSelected = ko.observable(isSelected);
}
var SelectableItemViewModel = function (items) {
// Data
var self = this;
self.availableItems = ko.observableArray(ko.utils.arrayMap(items[0].availableItems, function (item) {
return new Item(item.title, item.isSelected);
}));
self.selectedItems = ko.observableArray(ko.utils.arrayMap(items[1].selectedItems, function (item) {
return new Item(item.title, item.isSelected);
}));
// Operations
self.selectItem = function (item) {
self.selectedItems.push(item);
item.isSelected(!item.isSelected());
};
self.removeItem = function (removedItem) {
self.selectedItems.remove(removedItem);
$.each(self.availableItems, function (item) {
if (item.title === removedItem.title) {
item.isSelected = false;
}
});
};
}
var vm = new SelectableItemViewModel(initialData);
$(document).ready(function () {
ko.applyBindings(vm);
});
你能帮忙吗,见下面的jsfiddle:
http://jsfiddle.net/sbirthare/KR4a6/6/
**更新:下面的后续问题**
其后续问题:
我需要在同一个UI上添加一个组合框,例如美国州。可用的项目是县,根据用户在州组合框中的选择,我需要过滤掉县。我使用AJAX从服务器获取数据,一切都很成功,但显示的列表并没有刷新。我希望绑定设置正确,如果我们更改视图模型中的可观察数组,UI应该会更改。我试图强制更改可用项目,但它只显示所有项目。请看看你是否能在下面的代码中发现问题,我正在更新ViewModel可观察数组。
function multiselect_change() {
console.log("event: openmultiselect_change");
var selectedState = $("#stateDropdownSelect").val();
var propertyName = $("#PropertyName").val();
var searchId = @Model.SearchId;
var items;
var model = { propertyName: propertyName, searchId: searchId, stateName: selectedState };
$.ajax({
url: '@Url.Action("GetFilterValues", "Search")',
contentType: 'application/json; charset=utf-8',
type: 'POST',
dataType: 'html',
data: JSON.stringify(model)
})
.success(function(result) {
debugger;
items = JSON.parse(result);
vm.availableItems(items.AvailableItems);
//vm.availableItems.valueHasMutated();
//var item = document.getElementById('availableItemId');
//ko.cleanNode(item);
//ko.applyBindings(vm, item);
vm.filter(selectedState);
})
.error(function(xhr, status) {
alert(status);
});
}
如user3426870所述,您需要将传递给已检查绑定的值更改为布尔值。
<input type="checkbox" data-bind="checkedValue: $data, checked: isSelected" />
此外,我认为您不需要在初始数据中有selectedItems。
相反,在viewModel中,您可以执行以下操作:
self.selectedItems = ko.computed(function() {
return ko.utils.arrayFilter(self.availableItems(), function (item) {
return item.isSelected();
});
});
这是因为您为绑定checked
提供了一个数组,而它应该是一个与true
或false
相当的值(如undefind
或空字符串)。我会使用一个函数来检查$data
是否在您的数组中,并向绑定返回一个布尔值。
诸如此类的事情!
- 无法在mvc视图中使用ajax调用获取操作返回的模型对象列表
- 我应该将MVC视图特定的javascript文件放在哪个文件夹中
- 使用javascript在MVC视图中解析.net JSON字符串
- 当我点击MVC视图中的图像时,如何打开另一个页面
- 阻止MVC视图中的C#代码在加载时执行
- 在MVC视图中的变量中使用javascript 从@模型中提取
- MVC视图文件_Layout.cshtml中头部和主体的Render Bundles之间的差异
- 如果在ASP.Net MVC视图中验证失败,请设置httppostedfilebase
- 在不涉及控制器的情况下对MVC视图列表中的项进行排序
- 在MVC视图和DateTimePicker中设置会话变量
- MVC 5视图-设置Javascript变量
- MVC视图Javascript变量
- 在视图模型中使用 MVC 视图返回 JsonResult 数据
- 在 MVC 视图中调用 JS 函数
- 如何在 ajax 调用中将错误消息传递给 mvc 视图
- 有哪些可能的方法可以将 knockoutjs 视图模型代码与 asp.net mvc 视图分离,并对其进行 mvc 服务
- MVC 视图中的自动刷新标签
- 如何使用 javascript 同时刷新 mvc 视图和部分视图
- MVC 视图中的网格行选择
- 如何从 Web 窗体中的超链接显示 asp.net mvc 视图 asp.net