根据id值使knockout数组对象可见

时间:2014-01-19 00:26:23

标签: javascript jquery arrays knockout.js

我看到的所有示例都是针对明确写在页面上的DOM元素。在我的情况下,我使用knockout foreach在我的可观察数组中创建一个项目列表:

<div class="tab-pane fade" id="recruiting">
    <input type="text" data-bind="value: selectedOrgKey" id="orgSectionId" onchange="FlipOrgView()" style="visibility: hidden;" />
    <ul class="list-unstyled" data-bind="foreach: orgs">
        <li data-bind="attr: { id: 'orgSection' + orgId}" class="orgSection">

我目前正在使用一个kludgy解决方案,通过在隐藏元素上使用onchange来获取id和.show()它。

window.OrgDdlUpdated = function () {
    $(".orgSection").hide();
    var selectedOrgId = $('#orgDropDown').val();
    //alert(selectedOrgId);
    flipOrgView(selectedOrgId);
};

var flipOrgView = function (id) {
    $('#orgSection' + id).show();
};

这在技术上是第一次工作,但是当我翻阅所有内容时,所选的id落后于它显示先前选择的位置,而不是当前选择。我知道有很多方法可以实现这一点,所以淘汰赛或其他方式,如何使用knockout foreach方法正确切换对象数组的可见性?

1 个答案:

答案 0 :(得分:1)

怎么样:

<div class="tab-pane fade" id="recruiting">
    <input type="text" data-bind="value: selectedOrgKey" id="orgSectionId" style="visibility: hidden;" />
    <ul class="list-unstyled" data-bind="foreach: orgs">
        <li data-bind="visible: $parent.selectedOrgKey() === orgId(), attr: { id: 'orgSection' + orgId}" class="orgSection">

我在你的例子中不太确定你是如何设置selectedOrgKey的,但是这应该做我认为你得到的MVVM行为。