1

Here is the fiddle: http://jsfiddle.net/7RDc3/2096/

The 'Add Service' button doesn't work. I need it to mirror the functionality of the 'Add Hardware' button. Something is wrong with my code below: You can see it in action on the fiddle above though.

var viewModel = function(hardware, services) {
    var self = this;
    self.hardwares = ko.observableArray(hardware);
    self.services = ko.observableArray(services);

    self.addHardware = function() {
        self.hardwares.push({
            name: "",
            price: ""
        });
    };

    self.removeHardware = function(hardware) {
        self.hardwares.remove(hardware);
    };

     self.addService = function() {
        self.services.push({
            name: "",
            price: ""
        });
    };

    self.removeService = function(services) {
        self.services.remove(services);
    };
    self.save = function(form) {
        var allModel = [];
            ko.utils.arrayForEach(services(), function (service) {
                allOrders.push(ko.toJS(service));
            });
            ko.utils.arrayForEach(hardwares(), function (hardware) {
                allOrders.push(ko.toJS(hardware));
            });
            alert("Could now transmit to server: " + ko.utils.stringifyJson(allOrders));
    };
};

var FinalViewModel = new viewModel([]);
ko.applyBindings(FinalViewModel);

1 Answer 1

5

You're not passing an argument in for the services parameter when you construct the viewmodel:

var FinalViewModel = new viewModel([], []); 
ko.applyBindings(FinalViewModel);

Updated fiddle: http://jsfiddle.net/7RDc3/2097/

You could also augment your constructor to use empty arrays if an argument isn't supplied:

var viewModel = function(hardware, services) {
    var self = this;
    self.hardwares = ko.observableArray(hardware || []);
    self.services = ko.observableArray(services || []);
    /* snip */
};
5
  • Perfect!!! One more thing, the alert isn't popping up on submit, could you take a look? jsfiddle.net/7RDc3/2098
    – Stephen
    Mar 20, 2013 at 1:04
  • @StephenHarman: A few things there: 1. You need click binding on the submit button (or alternatively a submit event binding on the form itself), and 2. You need to iterate over self.services() and self.hardwares(): jsfiddle.net/7RDc3/2099 Mar 20, 2013 at 1:47
  • Works great! Thank you! Just noticed that in the JSON the name select is sending the name of it rather than the value, have any idea?
    – Stephen
    Mar 20, 2013 at 1:53
  • 1
    @StephenHarman As for the checkboxes, use the checked binding instead: jsfiddle.net/7RDc3/2100. For the select, the option doesn't have a value so it's not being set (set a value="1" on the option and you should see it populated) Mar 20, 2013 at 1:56
  • Perfect! Works as intended. I had just submitted the checkbox thing and realized I read that in the API. And I don't know how I missed the value thing. Anyways, thank you.
    – Stephen
    Mar 20, 2013 at 2:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.