淘汰赛映射数据绑定不起作用

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>

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

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

下面也试过了，没有运气：

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

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

谢谢。

Answer 1

您的绑定（例如 supervisor.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() 的旧可观察对象绑定。你可以用一个新的 observable 替换那个 observable，但是你的标记仍然绑定到旧的——它永远不会再更新了。