Knockoutjs and setting up view model

Question

I have in my view model an observable object with an array and I want to populate it with different items, item1, item2, each item with its' own setup. So I am trying to figure out the best way to set this up.

My Current setup is bad, there are still some bugs that I can't figure out what I'm doing wrong.

For example, I create an item1 and then Save, I then try to create another item1 and when the popup pops up the input fields are filled out with the values from the first item1 I created, I don't know why because I reset the variables after I save.

I am just wondering if I am doing this correct or not, what can I do to make it better.

Please look at my Fiddle

I did shrink my Item1 but keep in mind that I have 10+ variables to it.

Also I do know that Item1 and Item2 are setup differently, I was just testing what would be the best way to go about this, knowing I have objects with 10+ vars.

Answer 1

Small change will do the trick . Make item1Setup as observable rather simple JavaScript variable which don't react to changes ie something like self.item1Setup=ko.observable()

viewModel:

var myViewModel = function() {
    var itemData = ko.observable({
        "data": []
    });
    var self=this;
    self.item1Setup = ko.observable(); //declare it here

    //Create Item1 Popup
    self.item1Setup(new item1("", 0, "")); // assign instance to observable

    function createItem1() {
        self.item1Setup().item1Id(getNewId()); // assign value to observable content
        itemData().data.push(self.item1Setup());
        shouldShowPopup(false, "Item1");
        //reset back to defaults
        resetVariables("Item1");
    }

    function resetVariables(resetType) {
        switch (resetType) {
            case "Item1":
                self.item1Setup(new item1("", 0, "")); //you can reset as it is observable UI takes it changes
                break;
            default:
        }
    }

    return {
        itemData: itemData,
        item2Id: item2Id,
        item2Title: item2Title,  
        item2Location: item2Location,
        item1Setup: self.item1Setup, //return observable 
        addItem2: addItem2,
        createItem1: createItem1,
        editItem1: editItem1,
        getItem1FromList: getItem1FromList,
        resetVariables: resetVariables
    }
}

I cropped up some code to explain pivotal issue check the working fiddle here for createitem1 .

Answer 2

Several ways you could make this better:

1. Use Knockout's click bindings for your buttons
2. Create a custom binding handler to control modal visibility with an observable boolean (each modal gets its own variable, they all use the same binding type)
3. Make your items their own objects; don't have variables prefixed with item2, etc.
4. Don't have things like resetVariables that have to figure out which item type you're working with, have the items know how to reset themselves