How can I get multiple views working in my viewmodel in knockout.js

Question

I am able to get the ImagesInputView to work in my ViewModel, but the other two will not. The way I know they are not working, is that I cannot delete the other two, and they add more than I am allowing them to.

Here is my html code:

<div id="image_inputs" class="image_gallery_area">
                <table>
                    <thead>
                        <tr>
                            <th>
                                <label class="ae_field_label">Images:</label>
                            </th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: imageInput">
                        <tr>
                            <td>
                                <input class="ae_filed_value" type="file" data-bind="value: value" />
                            </td>
                            <td>
                                <button type="button" class="minus" data-bind="click: $root.removeImageInput">X</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <button type="button" class="plus" data-bind="click: addImageInput,  enable: imageInput().length < 8">Add Image</button>
            </div>
            <div id="app_inputs" class="app_link_area">
                <table>
                    <thead>
                        <tr>
                            <th><label class="ae_field_label">App Download Links:</label></th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: appInput">
                        <tr>
                            <td>
                                <label class="ae_field_label" for="appLinkName">Link Name:</label>
                            </td>
                            <td>
                                <input class="ae_filed_value" data-bind="value: appLinkName" maxlengthe="255" />
                            </td>
                            <td rowspan="2">
                                <button type="button" class="minus" data-bind="click: $root.appInput">X</button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label class="ae_field_label" for="appURL">URL:</label>
                            </td>
                            <td>
                                <input class="ae_filed_value" data-bind="value: appURL" maxlengthe="255" />
                            </td>
                        </tr>
                    </tbody>
                </table>
                <button type="button" class="plus" data-bind="click: appInput,  enable: appInput().length < 4">Add App Input</button>
            </div>
            <div id="web_link_inputs" class="web_thumbs_area">
                <table>
                    <thead>
                        <tr>
                            <th>
                                <label class="ae_field_label">Web Thumbnail Links:</label>
                            </th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: webLinkInput">
                        <tr>
                            <td>
                                <label class="ae_field_label" for="webLinkName">Link Name:</label>
                            </td>
                            <td>
                                <input class="ae_filed_value" data-bind="value: webLinkName" maxlengthe="255" />
                            </td>
                            <td rowspan="2">
                                <button type="button" class="minus" data-bind="click: $root.webLinkInput">X</button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label class="ae_field_label" for="webURL">URL:</label>
                            </td>
                            <td>
                                <input class="ae_filed_value" data-bind="value: webURL" maxlengthe="255" />
                            </td>
                        </tr>
                    </tbody>
                </table>
                <button type="button" class="plus" data-bind="click: webLinkInput,  enable: webLinkInput().length < 2">Add Web Thumbnail</button>
            </div>

Here is my knockout code:

    function ImageInputView (value){
        var self = this;
        self.value = value
    }
    function AppLinkView (appLinkName, appURL){
        var self = this;
        self.appLinkName = appLinkName;
        self.appURL = appURL;
    }
    function WebLinkView (webLinkName, webURL){
        var self = this;
        self.webLinkName = webLinkName;
        self.webURL = webURL;
    }

    function ViewModel(){
        var self = this;

        self.imageInput = ko.observableArray();
        self.addImageInput = function() {
            self.imageInput.push(new ImageInputView(""));
        }
        self.removeImageInput = function(imageInput) {
            self.imageInput.remove(imageInput);
        }

        self.appInput = ko.observableArray();
        self.addAppInput = function() {
            self.appInput.push(new AppLinkView("",""));
        }
        self.removeAppInput = function(appInput) {
            self.appInput.remove(appInput);
        }

        self.webLinkInput = ko.observableArray();
        self.addWebLinkInput = function() {
            self.webLinkInput.push(new WebLinkView("",""));
        }
        self.removeWebLinkInput = function(webLinkInput) {
            self.webLinkInput.remove(webLinkInput);
        }
    }

    ko.applyBindings(new ViewModel());

here is my jsFiddle

I get a "RefferenceError: variableName is not defined" in my javascript errors.

Thank you in advance for any help. I am new to knockout, and have been at this for a few hours, and can't seem to figure it out or find any helpful sources in my searching.

Answer 1

Here is the fiddle that works http://jsfiddle.net/qj3y9/

You were missing a couple of things

This

<button type="button" class="plus" data-bind="click: appInput,  enable: appInput().length < 4">Add App Input</button>

Must be changed to

<button type="button" class="plus" data-bind="click: addAppInput,  enable: appInput().length < 4">Add App Input</button>

Same for

<button type="button" class="plus" data-bind="click: webLinkInput,  enable: webLinkInput().length < 2">Add Web Thumbnail</button>

Must be changed to

<button type="button" class="plus" data-bind="click: addWebLinkInput,  enable: webLinkInput().length < 2">Add Web Thumbnail</button>

Also your remove buttons were not bound to the correct function in the view model. You can look in the fiddle It is fixed now there.