javascript - 如何让多个 View 在 Knockout.js 的 View 模型中工作

Question

我能够让 ImagesInputView 在我的 ViewModel 中工作，但其他两个则不行。我知道它们不起作用的方式是，我无法删除另外两个，而且它们添加的内容超出了我允许的范围。

这是我的 html 代码:

<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>

这是我的 knockout 码:

    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());

这是我的jsFiddle

我在 JavaScript 错误中收到“ReferenceError:variableName 未定义”。

预先感谢您的帮助。我是 knockout 的新手，已经研究了几个小时，但似乎无法弄清楚或在搜索中找到任何有用的资源。

Answer 1

这是可以使用的 fiddle http://jsfiddle.net/qj3y9/

你错过了一些东西

这个

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

必须更改为

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

同样

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

必须更改为

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

此外，您的删除按钮未绑定(bind)到 View 模型中的正确函数。你可以在 fiddle 中查看它现在已经修复了。