javascript - Knockoutjs div 绑定(bind)未按预期工作

Question

我试图将一些动态值绑定(bind)到 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 的新手，我仍在学习该框架。

Answer 1

将绑定(bind)更改为

skills && skills().length > 0

还有

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

会修复它。 Skills 是一个 observableArray，因此 Skills.length 会导致错误并破坏其他绑定(bind)。展开可观察对象，然后检查长度即可修复它。

顺便说一句，这种逻辑最好放置在 View 模型中，这样您就可以将模型 View 和 View 模型分开。