映射不适用于 api 调用答案

【问题标题】：Mapping not working with api call映射不适用于 api 调用
【发布时间】：2015-08-19 23:59:00
【问题描述】：

我想让所有内部员工属性都可观察，所以我尝试了敲除映射插件。但是，使用它后，数据没有正确绑定。这是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;
        }
        ));

【问题讨论】：

你试过这个employeeViewModel.employees(ko.mapping.fromJS(data)) mapping 插件吗，它所做的只是将平面json数据制作成 observables 。干杯
检查这个样本，它会给你想法jsfiddle.net/supercool/LkqTU/24514。干杯
你不应该使用“新功能”。 stackoverflow.com/a/10406585/1048572
它仍然无法正常工作。这是html代码。它出现在 ViewModel 中，但未在 data-bind="foreach:employees" 中绑定 - 没有返回任何内容。

标签： knockout.js knockout-mapping-plugin

【解决方案1】：

不要创建employees observableArray。它被applyBindings 绑定，然后你从ko.mapping.fromJS 重新分配它。您需要使用if 绑定而不是visible，以防止敲除在映射和绑定之前尝试访问员工。

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

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

【讨论】：

非常感谢。！！现在效果很好！