映射不适用于 api 调用

Question

我想让所有内部员工属性都可以观察到，所以我尝试了 knockout 映射插件。然而，在使用它之后，数据没有得到正确的绑定。这是 javascript 代码：

var employeeViewModel = new function () {
    var self = this;
    self.employees = ko.observableArray();
    self.loading = ko.observable(true);
}();

$(document).ready(function () {
    ko.applyBindings(employeeViewModel);
    GetEmployees();
});

function GetEmployees()
{
    $.get('/api/Employees', null, function (data) {
        if (employeeViewModel.employees.length == 0) {
            employeeViewModel.employees = ko.mapping.fromJS(data);
        }
        else {
            ko.mapping.fromJS(data, employeeViewModel.employees);
        }
        //employeeViewModel.employees(data); //This works but want to make all inner properties as observable
        employeeViewModel.loading(false);
    });
}

HTML代码：

<div class="loadingImg" data-bind="visible: loading()"></div>
<table class="table table-bordered" data-bind="visible: !loading()">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody data-bind="foreach:employees">
        <tr data-bind="template: {name: 'edit-template', data: $data }"></tr>
    </tbody>
</table>

<script type="text/html" id="display-template">
    <td data-bind="text: Name"></td>
    <td data-bind="text: Email"></td>
    <td data-bind="moneyFormat: Salary"></td>
</script>
<script type="text/html" id="edit-template">
    <td><input class="form-control" type="text" data-bind="value: Name" /></td>
    <td><input class="form-control" type="text" data-bind="value: Email" /></td>
    <td><input class="form-control" type="text" data-bind="value: Salary" /></td>
</script>

主要问题是它出现了但没有以某种方式被绑定。这是结果：-

下面的代码可以工作，但是如何通过映射插件实现同样的功能？我以为我们可以通过映射插件在 1 行中做同样的事情，但它不起作用。!!需要帮助..可能是我在这里遗漏了一些东西..

        employeeViewModel.employees(ko.utils.arrayMap(data, function (employee) {
            var obsEmployee = {
                Name: ko.observable(employee.Name),
                Email: ko.observable(employee.Email),
                Salary: ko.observable(employee.Salary)
            }
            return obsEmployee;
        }
        ));

Answer 1

不要创建 employees observableArray。它受到 applyBindings 的约束，然后您从 ko.mapping.fromJS 重新分配它。您需要使用 if 绑定而不是 visible 来防止 knockout 在映射和绑定之前尝试访问员工。

<table class="table table-bordered" data-bind="if: !loading()">

示例：http://jsfiddle.net/qxc19joy/

映射不适用于 api 调用

Mapping not working with api call

knockout-mapping-plugin

knockout.js