在knockoutJS中绑定到可观察数组的问题
problems binding to observable array in knockoutJS
我目前有问题绑定数据到一个可观察数组在knockoutJS。我要做的是根据用户从选择框中的选择显示新值。
小提琴可在http://jsfiddle.net/jwayne2978/k0coh1fz/3/
我的HTML如下所示:
<select data-bind="options: categories,
optionsText: 'name',
optionsValue: 'id',
value: selectedCategory,
optionsCaption: 'Choose...',
event: { change: categoryChanged }
">
<div data-bind="foreach: values">
<div data-bind="text: name"></div>
</div>
<div data-bind="foreach: categories">
<div data-bind="text: name"></div>
</div>
我的JavaScript代码如下所示:
var categories = [
{ "name" : "color", "id": "1" },
{ "name" : "names", "id": "2" }
];
var values0 = [ { "name" : "empty1" }, { "name" : "empty2" } ];
var values1 = [ { "name" : "white" }, { "name" : "black" } ];
var values2 = [ { "name" : "john" }, { "name" : "name" } ];
var Category = function(data) {
this.name = ko.observable(data.name);
this.id = ko.observable(data.id);
};
var Value = function(data) {
this.name = ko.observable(data.name);
}
var ViewModel = function(categories, values) {
var self = this;
self.categories = ko.observableArray(ko.utils.arrayMap(categories, function(category) {
return new Category(category);
}));
self.selectedCategory = ko.observable();
self.values = ko.observableArray(ko.utils.arrayMap(values, function(value) {
return new Value(value);
}));
self.categoryChanged = function(obj, event) {
if(self.selectedCategory()) {
console.log(self.selectedCategory());
if("1" == self.selectedCategory()) {
//console.log(values1);
self.values.push(new Value({"name":"test1"}));
} else if("2" == self.selectedCategory()) {
//console.log(values2);
self.values.push(new Value({"name":"test2"}));
}
}
};
};
var viewModel;
$(document).ready(function() {
viewModel = new ViewModel(categories, values0);
ko.applyBindings(viewModel);
});
当一个类别被更改时,我真正想做的是这样的事情。
self.values.removeAll();
for(var v in values1) {
self.values.push(new Value(v));
}
但是这不起作用,所以我只需要将一个新值推入可观察数组。
此外,我对values
和categories
的div的迭代没有显示,我不确定为什么。
知道我做错了什么吗?
您的<select>
元素缺少关闭标记并在视图中进一步引起问题。
<select data-bind="options: categories,
optionsText: 'name',
optionsValue: 'id',
value: selectedCategory,
optionsCaption: 'Choose...',
event: { change: categoryChanged }"></select>
更新小提琴:http://jsfiddle.net/ragnarok56/69q8xmrp/
相关文章:
- knockoutjs可观察数组
- 将js对象更改为使用嵌套的可观察数组敲除js视图模型
- 敲除:可观察数组没有被正确绑定——只有1个结果显示,而api返回6
- $scope$观察数组中的一个特定对象——Angular JS控制器
- 如何使用敲除映射将空值映射到空的可观察数组
- 以不同的方式对相同的可观察数组进行排序
- 如何在 Knockout.js 中更新可观察数组后立即使用 DOM 容器
- Knockout.js:如何根据可观察数组中的更改更改值
- 使用挖空.js如何刷新 Select 元素中的可观察数组
- 更新挖空中可观察数组中项目的属性
- 动态地向可观察数组中的特定项添加绑定(例如hasfocus)
- AngularJS:观察数组属性
- 对可观察数组foreach的更新删除了格式化knockoutjs
- 当通过Ajax成功回调更新可观察数组时,启用绑定中断
- 如何获取复选框值并将其插入到挖空中的可观察数组中
- 剔除不更新辅助表的可观察数组
- 如何让Knockout可观察数组与jQuery对话框一起工作
- 更改可观察数组会更改自定义绑定处理程序knockoutjs的可见性
- 正在更新Knockoutjs可观察数组项
- Knockout,无法解析空可观察数组中的绑定错误