Knockoutjs div 绑定没有按预期工作

Posted 2023-05-07

【中文标题】Knockoutjs div 绑定没有按预期工作

【英文标题】：Knockoutjs div binding not working as expected

【发布时间】：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 可能会导致错误并破坏其他绑定

【参考方案1】：

将绑定更改为

skills && skills().length > 0

和

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

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

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