敲除映射数据绑定不起作用

Question

我使用的是最新的 KO 映射插件。这个想法是“详细信息”部分应该填充从 Ajax 调用中检索到的 JSON 数据。

var supervisorVM = {
        supervisor: ko.observable()
    };

-----------code to call custom data service which returns JSON---
     if (supervisorDetails) {
        $('#Detail').show();
        supervisorVM.supervisor = ko.mapping.fromJS(supervisorDetails);
        ko.applyBindings(supervisorVM, document.getElementById("Detail"));
    }



<div id="Detail" class="side-widget" style="display:none">
    <h2>Details</h2>
    <strong>
        Supervisor<br>
        <span data-bind="text: supervisor.FullName"></span><br/>
    </strong>
    <span data-bind="text: supervisor.PhoneNumber"></span><br/>
    <a data-bind="text: supervisor.Email, attr: { href : 'mailto:'+supervisor.Email() }"></a>
</div>

每次我运行详细信息部分都不会填充主管详细信息，即全名和 Phone 号码。

我调试并确认 supervisorVM.supervisor 已填充，但数据绑定不起作用。

下面也试过了没有运气：

supervisorVM.supervisor(ko.mapping.fromJS(supervisorDetails));

我已经花了2个多小时了，有人能帮我看看我做错了什么吗？

谢谢。

Answer 1

您的 supervisor.Fullname 等绑定定义不正确 - 您正在 可观察函数 上寻找属性 'Fullname'。应该是 supervisor().Fullname.

尝试将字段包装在 with: supervisor 绑定中。只要您的 AJAX 调用未返回并将内容添加到 supervisor:

，这就会产生很好的副作用，即不会呈现字段

<div id="Detail" class="side-widget" style="display:none" data-bind="with: supervisor">
    <h2>Details</h2>
    <strong>
        Supervisor<br>
        <span data-bind="text: FullName"></span><br/>
    </strong>
    <span data-bind="text: PhoneNumber"></span><br/>
    <a data-bind="text: Email, attr: { href : 'mailto:' + Email() }"></a>
</div>

此外，不要像您在此处那样替换 observables：

supervisorVM.supervisor = ko.mapping.fromJS(supervisorDetails);

相反，替换他们的内容：

supervisorVM.supervisor( ko.mapping.fromJS(supervisorDetails) );

您的标记已经与您使用 supervisor: ko.observable() 分配的旧可观察对象绑定。你可以用一个新的替换那个可观察的，但是你的标记仍然绑定到旧的——它永远不会再更新。

敲除映射数据绑定不起作用

Knockout Mapping data bind not working

knockout.js