使用Knockout从JSON预先填充多个选择的选定值
使用Knockout从JSON预先填充多个选择的选定值
提问于 2016-03-15 18:38:13
我正在尝试填充那些选项已经被选中，对于任何给定的多个选择，基于所显示的json。如果我只选择一个选择选项，那么它似乎工作得很好，但是如果我选择多个选项，则没有结果。另外，我试图在多个select下面的文本中显示所选的选项，但是如果我更改所选的选项，这似乎是行不通的。
我知道我很接近，因为我没有任何错误.那我做错什么了？
这是我的密码：
Knockout
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/
任何帮助都会很好！
谢谢乔
回答 1
Stack Overflow用户
发布于 2016-03-16 02:21:43
好的，我想我得到了你想要的，减去验证。
我看到的主要问题是，你真的想要选项的实例，而不仅仅是一件大事。而且，它看起来就像facilityCode重复了一遍又一遍，所以我将它设置为OptionModel.facilityCode中可观察到的文字。
将click函数带到根viewModel。为其他一切创建一个“数据”数组，并将其映射到self.options observableArray中的viewModel中。必须修改一些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/oc9oo/22/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36019445
复制相关文章
相似问题
腾讯云开发者
