我从服务器获取特定的 JSON,并希望能够在嵌套数组(变体列表、变体和列)中添加/编辑/删除项目,但我不知道如何使用 knockout.js 来做到这一点。
我知道我需要将该 JSON 对象中的属性更改为可观察对象,并且我使用映射插件来执行此操作,如“绑定(bind)”下所示,并且所有值都已正确绑定(bind) - 但如果我更改输入字段中的值,模型/ View 不会自动更新。
为什么?我错过了什么吗?那么,knockout.js 是否支持嵌套数组,而无需编写自己的代码?如何将此 JSON 获取到完整工作的 Knockout.js View 模型?
我使用当前可用的版本( knockout :v2.1.0,映射插件:v2.3.2)。
JSON
{
"VariantList": [
{
"ColumnCount": 1,
"Variants": [
{
"Title": "One column 100%",
"Columns": [
"100 %"
]
}
]
},
{
"ColumnCount": 2,
"Variants": [
{
"Title": "Two columns 50%/50%",
"Columns": [
"50%",
"50%"
]
},
{
"Title": "Two columns 75%/25%",
"Columns": [
"75%",
"25%"
]
}
]
}
]
}
HTML
<div data-bind="foreach: VariantList">
<h2 data-bind="text: ColumnCount"></h2>
<div data-bind="foreach: Variants">
<h3 data-bind="text: Title"></h3>
<table style="width:500px">
<tr>
<!-- ko foreach: Columns -->
<th><input data-bind="value: $data"/></th>
<!-- /ko -->
</tr>
<tr>
<!-- ko foreach: Columns -->
<td data-bind="style: {width:$data}, text:$data"></td>
<!-- /ko -->
</tr>
</table>
</div>
</div>
绑定(bind)
var viewModel;
$(function(){
viewModel = ko.mapping.fromJS(myJson);
ko.applyBindings(viewModel);
});
最佳答案
问题是,默认情况下,映射插件不会将数组中的原始值转换为可观察值。即使它确实如此,当您将 $data
绑定(bind)到您的输入时,您将拥有它的展开值而不是可观察值。
实现这项工作的最简单方法是构建数据,如下所示:
var data = {
"VariantList": [
{
"ColumnCount": 1,
"Variants": [
{
"Title": "One column 100%",
"Columns": [
{ value: "100 %" }
]
}
]
},
{
"ColumnCount": 2,
"Variants": [
{
"Title": "Two columns 50%/50%",
"Columns": [
{ value: "50%" },
{ value: "50%" }
]
},
{
"Title": "Two columns 75%/25%",
"Columns": [
{ value: "75%" },
{ value: "25%" }
]
}
]
}
]
};
然后,您将在Columns
循环中绑定(bind)value
。这是一个示例:http://jsfiddle.net/rniemeyer/MCnMX/
如果您无法在此结构中提取数据,那么您可以考虑使用映射选项,将其转换为这样的结构。这是一个示例:http://jsfiddle.net/rniemeyer/sH3r2/
var mappingOptions = {
Columns: {
create: function(options) {
return { value: ko.observable(options.data) };
}
}
};
var viewModel = ko.mapping.fromJS(data, mappingOptions);
如果您需要以收到的相同格式将 JSON 发送回服务器,那么有几个选项。我有点喜欢这样做:http://www.knockmeout.net/2011/04/controlling-how-object-is-converted-to.html 。这是包含您的数据的示例:http://jsfiddle.net/rniemeyer/Eed2R/
var Value = function(val) {
this.value = ko.observable(val);
};
Value.prototype.toJSON = function() {
return ko.utils.unwrapObservable(this.value);
};
var mappingOptions = {
Columns: {
create: function(options) {
return new Value(options.data);
}
}
};
var viewModel = ko.mapping.fromJS(data, mappingOptions);
关于javascript - 将 js 对象更改为带有嵌套可观察数组的 knockout js View 模型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12248056/