Knockout JS：foreach中with绑定引发isAdmin未定义的问题求解

嘿，这个问题我之前也碰到过～先给你理清楚：错误不是foreach本身导致的，而是上下文切换的锅。

为什么会出现“isAdmin未定义”？ #

在Knockout的foreach循环里，当前的绑定上下文会自动切换成数组里的每一项。你直接写isAdmin，Knockout会在当前循环的这个item里找这个属性，但你的isAdmin其实属于外层的authorization对象，自然就找不到啦。

另外提一句：如果你的需求是“当isAdmin为真时显示内容”，用if绑定就够了；with绑定是用来切换上下文到某个对象的，别把两者搞混哦～

怎么在foreach里正确访问外层的authorization.isAdmin？ #

给你几个实用的方法：

1. 用$parent/$root明确指定上下文

如果authorization是foreach父级上下文里的属性，就用$parent.authorization.isAdmin；如果它是根ViewModel里的属性，就用$root.authorization.isAdmin。示例代码：

<div data-bind="foreach: yourItemsArray">
  <!-- 先判断外层的isAdmin，再渲染内容 -->
  <div data-bind="if: $parent.authorization.isAdmin">
    <!-- 这里可以正常访问当前item的属性，比如itemName -->
    <p data-bind="text: itemName"></p>
    <!-- 也能继续通过$parent访问外层的authorization -->
    <p>管理员权限：<span data-bind="text: $parent.authorization.isAdmin"></span></p>
  </div>
</div>

2. 用let绑定给外层变量起别名（Knockout 3.5+支持，推荐）

这个方法更清晰，尤其是当嵌套层级多的时候，不用记$parent的层数。你可以在foreach上用let把外层的authorization存成一个别名，之后直接用别名访问：

<div data-bind="foreach: yourItemsArray, let: { auth: $parent.authorization }">
  <div data-bind="if: auth.isAdmin">
    <p data-bind="text: itemName"></p>
    <p>管理员权限：<span data-bind="text: auth.isAdmin"></span></p>
  </div>
</div>

3. 如果要在with绑定里结合判断

如果你确实需要用with切换上下文，同时要判断isAdmin，可以这么写（注意先通过$parent/$root拿到外层的authorization）：

<div data-bind="foreach: yourItemsArray">
  <!-- 当isAdmin为真时，切换上下文到当前item的某个属性 -->
  <div data-bind="if: $parent.authorization.isAdmin, with: itemDetails">
    <p data-bind="text: detailText"></p>
  </div>
</div>

内容的提问来源于stack exchange，提问作者S.Teru