Knockoutjs div 绑定没有按预期工作答案

【问题标题】：Knockoutjs div binding not working as expectedKnockoutjs div 绑定没有按预期工作
【发布时间】：2015-06-12 15:39:58
【问题描述】：

我正在尝试将一些动态值绑定到 div，但由于某种原因，div 无法正确获取数据。

这就是我所拥有的：

HTML：

            <div class="section-content tabcontent sc7" id="gridEventLimits" style="padding: 0; background-color: #fff; display: none">
                <div style="clear: both">
                </div>
                <table>
                    <tr>
                        <td></td>
                        <td></td>
                        <td colspan="4"></td>
                    </tr>
                    <tr>

                      <table class="sgrid" data-bind="visible: skills && skills.length > 0"
                            style="width: 100%; border-collapse: collapse; border: solid 1px #aaa">
                            <thead>
                                <tr style="background: rgb(242, 242, 225); color: #333">
                                    <td>Event Skills
                                    </td>
                                </tr>
                            </thead>
                            <tbody data-bind="foreach: skills">
                                <tr>
                                    <td>
                                        <ul class="collapsible" data-bind="attr: { id: 'collapsible' + Id }">
                                            <li><span data-bind="text: Name" style="color: #365474"></span>

                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <p data-bind="visible: !skills || skills.length == 0" style="text-align: center">
                            -- No People Found --
                        </p>

                    </tr>
                </table>
            </div>

然后我有在页面加载事件中调用的 js 函数：

var skillPeopleList;
function ApplyKOBindingsToSkillPeopleDetails() {
    if (eventId > 0) {
        var element = $('#gridEventLimits')[0];
        skillPeopleList = new SkillPeopleListModel(eventId);
        ko.applyBindings(skillPeopleList, element);
    }
}

function SkillPeopleListModel(id) {
    var self = this;
    self.Id = id;
    self.skills = ko.observableArray([]);

    //initialize
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "/webservices/EventScheduleService.asmx/GetEventSkills",
        data: "{'eventId':" + self.Id + "}",
        dataType: "json",
        async: true,
        success: function (data) {
            result = data.d;

            if (result) {
                //if (result.skills) {
                //  result.skills.forEach(function (entry) {
                    result.forEach(function (entry) {
                        self.skills.push(entry);
                    });
                //}
            }
        },
        error: function (data, status, error) {
        }
    });
}

web服务响应（结果对象）的内容是这个：

知道我做错了什么吗？我是 Knockoutjs 的新手，我还在学习这个框架。

【问题讨论】：

所有绑定都不起作用吗？还是只有特定的 div？
此示例中的所有绑定都不起作用@AnotherDev
您是否在某处明确调用 ApplyKOBindingsToSkillPeopleDetails()？
@AnotherDev 在页面加载事件中是。我可以在运行时调试脚本，从 ws 获取数据没有问题。
好的，可以尝试“skills && Skills().length > 0”。尝试访问 .length 可能会导致错误并破坏其他绑定

标签： javascript jquery html knockout.js knockout-2.0

【解决方案1】：

将绑定更改为

skills && skills().length > 0

和

!skills() || skills().length == 0

会解决的。 Skills 是一个 observableArray，因此 Skills.length 会导致错误并破坏其他绑定。展开 observable 然后检查长度将修复它。

附带说明一下，这种逻辑最好放在视图模型中，这样您就可以将模型视图和视图模型分开。

【讨论】：