使用Knockout为JSON中的选定值预填充多个选择

I'm trying to populate which options have been selected, for any given multiple select, based on the json presented. It seems to be working fine if I only choose one select option, but if I choose multiple I get no result. Also, I'm trying to show the selected option(s) in a text beneath the multi select, but that doesn't seem be be working if I change the option chosen.

我正在尝试根据所提供的json,为任何给定的多个选择填充选择的选项。如果我只选择一个选项,它似乎工作正常,但如果我选择多个,我得不到结果。此外,我正在尝试在多重选择下方的文本中显示所选选项,但如果我更改所选的选项,那似乎不起作用。

I know I'm close as I'm not getting any errors... so what am I doing wrong?

我知道我很亲密,因为我没有收到任何错误......所以我做错了什么?

Here's my code:

这是我的代码:

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/

Any help would be great!

任何帮助都会很棒!

thanks Joe

1 个解决方案

#1

Alright check it out, I think I got what you were looking for, minus validation.

好吧看看,我想我得到了你想要的东西,减去验证。

Main problems I saw were that you really wanted instances of Options rather than just one big thing. Also it looked like the facilityCode just repeated over and over so I set it to a literal in the OptionModel.facilityCode observable.

我看到的主要问题是你真的想要选项的实例,而不仅仅是一件大事。它看起来像只是反复重复的facilityCode所以我把它设置为OptionModel.facilityCode observable中的文字。

Brought the click function up to the root viewModel. Created a "data" array for everything else and mapped it in to self.options observableArray in the viewModel. Had to modify some of the html a little bit, but I think that should get you going.

将click函数带到根viewModel。为其他所有内容创建了一个“数据”数组,并将其映射到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/