使用淘汰视图模型插件时如何扩展淘汰视图模型？答案

【问题标题】：How do I extend a knockout viewmodel when using the knockout viewmodel plugin?使用淘汰视图模型插件时如何扩展淘汰视图模型？
【发布时间】：2014-06-02 13:20:44
【问题描述】：

我正在使用 knockout.viewmodel 插件 (http://coderenaissance.github.io/knockout.viewmodel/) 从通过 JSON 返回的 JSON 生成我的 viewModels strong>WebAPI。
我在扩展 viewModel 时遇到了问题。
这是我的测试脚本的示例：

JSON：

{"Employees":
    [
     {"FirstName":"James",
      "LastName":"Bond",
      "Addresses":[{"StreetNumber":"MI6","StreetName":"Undisclosed"},
                   {"StreetNumber":"SAS","StreetName":"Undisclosed"}]},
     {"FirstName":"Jason",
      "LastName":"Bourne",
      "Addresses":[{"StreetNumber":"CIA","StreetName":"Undisclosed"},
                   {"StreetNumber":"NSA","StreetName":"Undisclosed"}]}
    ]
}

标记：

<div id="POC">
    <div id="test"></div>
    <table>           
        <tbody data-bind="foreach: Employees">
            <tr>
                <td data-bind="text: FirstName"></td>
                <td data-bind="text: LastName"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <table style="color:blue">                            
                        <tbody data-bind="foreach: Addresses">
                            <tr>
                                <td data-bind="text: StreetNumber"></td>
                                <td data-bind="text: StreetName"></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>

    <table>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>First Name</td>
            <td><input width="150" /></td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td><input width="150" data-bind="" /></td>
        </tr>
        <tr>
            <td></td>
            <td><button data-bind="click: addEmployee ">Add Agent</button></td>
        </tr>
    </table>
</div>

JavaScript：

$.getJSON("http://localhost:58191/api/employees", function (jsonModel) {

var options = {
    extend: {
        "{root}.Employees[i]": function (employee) {
            employee.addEmployee = function () {
                alert("add");
            }
        }
    }
}

var kovmmappingVM = ko.viewmodel.fromModel(jsonModel, options);    
ko.applyBindings(kovmmappingVM, document.getElementById("POC"));
});

JSON 已正确处理和绑定，但扩展功能未连接。
我没有任何例外；警报只是没有触发。
任何见解将不胜感激。

【问题讨论】：

标签： json knockout.js formatting knockout-viewmodel-plugin

【解决方案1】：

您在{root}.Employees[i] 而不是{root}.Employees 上声明了您的扩展。因此，该函数被添加到每个Employees，但您的标记绑定到根，因为它在foreach 之外。

替换为：

var options = {
    extend: {
        "{root}.Employees": function (employees) {
            employees.addEmployee = function () {
                alert("add");
            }
        }
    }
}

或

将您的按钮放入foreach

【讨论】：

感谢您的帮助。我也发现了这一点。现在像魅力一样工作:)
任何推荐的最佳实践来实现“addEmployee”功能？看起来很简单；我打算从 viewModel 中的Employees 集合中调用push 函数。
@user3699387 看起来不错:)
如何引用当前的 viewModel 向父集合添加记录？任何想法...这是我的测试代码，但它无效：
@user3699387 你能把这个作为一个新问题发布吗？