Question

I am using knockout to build a user interface for the following situation:
– I have an array of items. Each item has an array of item details.
– An item detail can be of one of two types: ‘Type A’ or ‘Type B’.
– If an item detail is of type of A, it can have one of two subtypes: ‘Subtype A-1’ and ‘Subtype A-2’.
– If an item detail is of type of B, it does not have a subtype.

My fiddle

I have the two questions/problems:

1. I’d like to add/remove the ‘Detail Subtype’ dropdown based on the value of the ‘Detail Type’ dropdown. For example, if the user selects ‘Type B’, I’d like to remove the ‘Detail Subtype’ dropdown. I also would like to set value of the underlying ‘subtype’ property to null. I played with the if binding but to no avail
2. In the addItemDetail method of the view model, how can I add a new item detail?

Answer 1

The item details are an observable array containing regular objects that contain regular properties, not observables. You’ve already created a “pm.itemDetail” constructor function, so why don’t you use that?

pm.Item = function(name, itemDetails) {
    // ...    
    var details = [];
    for (var i = 0; i < itemDetails.length; i++) {
        details.push( new pm.ItemDetail(itemDetails[i]) );
    }
    self.itemDetails = ko.observableArray(details);
};

I’ve updated the pm.ItemDetail function a bit:

pm.ItemDetail = function(data) {
    var self = this;
    self.name = ko.observable(data.name);
    self.type = ko.observable(data.type);
    self.subtype = ko.observable(data.subtype);
};

Now you’re able to use the “visible” binding (the “if” binding hides the content of a DOM node, not the node itself):

data-bind="visible: type() == 1, ..."

---

To add a new item detail, just create an instance of “pm.ItemDetail” and push it to the itemDetails array of the currently selected item:

addItemDetail = function(item) {
    selectedItem().itemDetails.push(new pm.ItemDetail({
        name: "Please enter a name",
        type: 1,
        subtype: 1
    }));
};

http://jsfiddle.net/XscRT/6/