如何基于Knockout JS的$root值控制div的显示隐藏？

首先明确：你在调试器里看到的$root_toJS是调用ko.toJS($root)生成的普通JS对象，这说明你的ViewModel里items、mainItems这类属性大概率是Knockout的observable（可观察对象）或observableArray（可观察数组），直接用$root.items拿到的是可观察对象本身，不是实际数据——这就是原代码无效的核心原因。

修正后的条件写法 #

基础写法（直接解包可观察对象） #

给可观察对象/数组加上()，获取其内部的实际值：

<!-- ko if: $root.items().mainItems()[0].itemDescription.productId != 1 -->
    <div class="action-row">
        <a href="#" data-bind="click: execute" class="btn-primary fiori3-btn-primary">
            <span data-bind="text: name"></span>
        </a>
    </div>
<!-- /ko -->

安全写法（避免空值报错） #

如果存在mainItems为空、itemDescription未定义的场景，建议用可选链操作符?.避免代码报错：

<!-- ko if: $root.items()?.mainItems()?.[0]?.itemDescription?.productId != 1 -->
    <div class="action-row">
        <a href="#" data-bind="click: execute" class="btn-primary fiori3-btn-primary">
            <span data-bind="text: name"></span>
        </a>
    </div>
<!-- /ko -->

分步判断写法（逻辑更清晰） #

用ko with分步处理上下文，同时规避空值问题：

<!-- ko with: $root.items() -->
    <!-- ko with: mainItems()[0] -->
        <!-- ko if: itemDescription.productId != 1 -->
            <div class="action-row">
                <a href="#" data-bind="click: execute" class="btn-primary fiori3-btn-primary">
                    <span data-bind="text: name"></span>
                </a>
            </div>
        <!-- /ko -->
    <!-- /ko -->
<!-- /ko -->

额外注意 #

如果itemDescription本身也是observable对象，需要再加()解包：

<!-- ko if: $root.items().mainItems()[0].itemDescription().productId != 1 -->

内容的提问来源于stack exchange，提问作者Alexandru Tugui