使用挖空从 JSON 预填充所选值以进行多项选择
Prepopulating selected values from JSON for multiple select using Knockout
我正在尝试根据呈现的 json 填充任何给定的多项选择已选择的选项。如果我只选择一个选择选项,它似乎工作正常,但如果我选择多个选项,我没有得到任何结果。另外,我正在尝试在多选下方的文本中显示所选选项,但是如果我更改所选选项,这似乎不起作用。
我知道我很接近,因为我没有收到任何错误......那我做错了什么?
这是我的代码:
淘汰赛
var OptionsModel = function(options) {
var self = this;
self.options = ko.observableArray(options);
self.allFacilityCodes = ko.observable("");
self.facilityCode = ko.observable("");
self.selectedFacilityCode = ko.observable();
self.addOption = function() {
self.options.push({
facilityCode: ["A116", "A118", "A120", "A122", "A124", "A125", "A126", "A127", "A128", "A130", "A132", "A134", "A138", "A139", "A140", "A142", "A143", "A144", "A146", "A148", "A152", "A154", "A270", "A364", "A365", "A366", "A370"],
accountType: "",
customCode: "",
facilityPT: "",
selectedFacilityCode: ""
});
};
self.removeOption = function(option) {
self.options.remove(option);
};
self.save = function(form) {
alert("Could now transmit to server: " + ko.utils.stringifyJson(self.options));
// To actually transmit to server as a regular form post, write this: ko.utils.postJson($("form")[0], self.options);
};
};
var viewModel = new OptionsModel([
{ facilityCode: ["A116", "A118", "A120", "A122", "A124", "A125", "A126", "A127", "A128", "A130", "A132", "A134", "A138", "A139", "A140", "A142", "A143", "A144", "A146", "A148", "A152", "A154", "A270", "A364", "A365", "A366", "A370"],
selectedFacilityCode: ["A116", "A125", "A127"], accountType: "Account Type text goes here", customCode: "Custom Code text goes here", facilityPT: "0"},
{ facilityCode: ["A116", "A118", "A120", "A122", "A124", "A125", "A126", "A127", "A128", "A130", "A132", "A134", "A138", "A139", "A140", "A142", "A143", "A144", "A146", "A148", "A152", "A154", "A270", "A364", "A365", "A366", "A370"],
selectedFacilityCode: ["A270"], accountType: "Account Type text goes here", customCode: "Custom Code text goes here", facilityPT: "0"},
{ facilityCode: ["A116", "A118", "A120", "A122", "A124", "A125", "A126", "A127", "A128", "A130", "A132", "A134", "A138", "A139", "A140", "A142", "A143", "A144", "A146", "A148", "A152", "A154", "A270", "A364", "A365", "A366", "A370"],
selectedFacilityCode: ["A139", "A140", "A148"], accountType: "Account Type text goes here", customCode: "Custom Code text goes here", facilityPT: "0"},
{ facilityCode: ["A116", "A118", "A120", "A122", "A124", "A125", "A126", "A127", "A128", "A130", "A132", "A134", "A138", "A139", "A140", "A142", "A143", "A144", "A146", "A148", "A152", "A154", "A270", "A364", "A365", "A366", "A370"],
selectedFacilityCode: ["A148"], accountType: "Account Type text goes here", customCode: "Custom Code text goes here", facilityPT: "0"},
{ facilityCode: ["A116", "A118", "A120", "A122", "A124", "A125", "A126", "A127", "A128", "A130", "A132", "A134", "A138", "A139", "A140", "A142", "A143", "A144", "A146", "A148", "A152", "A154", "A270", "A364", "A365", "A366", "A370"],
selectedFacilityCode: ["A130"], accountType: "Account Type text goes here", customCode: "Custom Code text goes here", facilityPT: "0"}
]);
ko.applyBindings(viewModel);
// Activate jQuery Validation
$("form").validate({ submitHandler: viewModel.save });
http://jsfiddle.net/mujaji/oc9oohoh/7/
任何帮助都会很棒!
谢谢乔
好吧,检查一下,我想我得到了你要找的东西,减去验证。
我看到的主要问题是你真的想要期权的实例,而不仅仅是一件大事。此外,看起来 facilityCode 只是一遍又一遍地重复,所以我在 OptionModel.facilityCode 可观察中将其设置为文字。
将单击函数提升到根视图模型。为其他所有内容创建了一个"data"数组,并将其映射到viewModel中的self.options observableArray。不得不稍微修改一些 html,但我认为这应该让你开始。
var model;
var data = [
{ selectedFacilityCode: ["A116", "A125", "A127"], accountType: "Account Type text goes here", customCode: "Custom Code text goes here", facilityPT: "0"},
{ selectedFacilityCode: ["A270"], accountType: "Account Type text goes here", customCode: "Custom Code text goes here", facilityPT: "0"},
{ selectedFacilityCode: ["A139", "A140", "A148"], accountType: "Account Type text goes here", customCode: "Custom Code text goes here", facilityPT: "0"},
{ selectedFacilityCode: ["A148"], accountType: "Account Type text goes here", customCode: "Custom Code text goes here", facilityPT: "0"},
{ selectedFacilityCode: ["A130"], accountType: "Account Type text goes here", customCode: "Custom Code text goes here", facilityPT: "0"}
];
var OptionsModel = function(options) {
var self = this;
self.facilityCode = ko.observable(["A116", "A118", "A120", "A122", "A124", "A125", "A126", "A127", "A128", "A130", "A132", "A134", "A138", "A139", "A140", "A142", "A143", "A144", "A146", "A148", "A152", "A154", "A270", "A364", "A365", "A366", "A370"]);
self.accountType = ko.observable(options.accountType);
self.customCode = ko.observable(options.customCode);
self.facilityPT = ko.observable(options.facilityPT);
self.selectedFacilityCode = ko.observable();
};
var viewModel = function (definition) {
var self = this;
// Create an observableArray, using var data to store instances of OptionsModel
self.options = ko.observableArray(ko.utils.arrayMap(definition, function(item) {
return new OptionsModel(item);
}));
// Remove selected option
self.removeOption = function(option) {
self.options.remove(option);
};
// Add new option, could be extended with a small form instead of object literal
// Form fields will still work, whatever you fill out will show when you hit submit
self.addOption = function () {
var emptyOption = {
accountType: '',
customCode: '',
facilityCode: '',
}
self.options.push(new OptionsModel(emptyOption));
}
// Alert options observable array
self.save = function(form) {
alert("Could not transmit to server: " + ko.toJSON(self.options));
// To actually transmit to server as a regular form post, write this: ko.utils.postJson($("form")[0], self.options);
};
};
model = new viewModel(data);
ko.applyBindings(model);
// Activate jQuery Validation
$("form").validate({ submitHandler: viewModel.save });
jsfiddle.net/oc9oohoh/22/
相关文章:
- AngularJS-在JSON选择器中使用变量名
- 动态添加通过json创建的选择项
- 按数字而不是按名称选择JSON对象
- 使用angularjs解析JSON,并选择select选项
- 选择菜单,将json列表与单数值进行匹配
- 在html选择中显示AJAX成功JSON值
- 根据条件选择JSon对象
- 如果您知道名称为字符串,如何选择 JSON 数组
- 如何使用 D3 选择 JSON 数组.js 使用 .算子
- 选择 JSON 对象数据表元素以列出其所有元素
- 使用ng repeat选择json数组
- 选择JSON结果
- 选择JSON的部分并检查值是否为空
- 如何选择json值
- 调用/选择Json数据中的某些项目
- 根据数组值选择json对象项
- 如何从数组中选择 json 项
- 使用变量选择JSON数组元素
- Node JS: postgres查询后选择json数据
- 选择JSON对象的子集&计数