Knockoutjs div 綁定無法按預期工作

Question

我正在嘗試將一些動態值綁定到 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

將綁定更改為

skills && skills().length > 0

和

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

會修好。 Skills 是一個 observableArray，所以 Skills.length 會導致錯誤並破壞其他綁定。 展開 observable 然后檢查長度將修復它。

作為旁注，這種邏輯最好放在視圖模型中，這樣您就可以將模型視圖和視圖模型分開。