Knockout.js数据绑定：根据precio_anterior值切换显示文本

方式一：使用计算属性（推荐） #

这种方式把判断逻辑封装在ViewModel里，代码更清晰易维护，尤其适合逻辑复杂或多处复用的场景。

假设你的ViewModel里precio_anterior和precio_suscriptor是可观察对象（observable），代码示例：

function PriceViewModel() {
    const self = this;
    // 示例初始值，实际由后端返回
    self.precio_anterior = ko.observable("$0");
    self.precio_suscriptor = ko.observable("$15");

    // 定义计算属性，自动根据条件返回要显示的价格
    self.displayPrice = ko.computed(() => {
        const anteriorVal = self.precio_anterior();
        // 判断：不为空且不是后端返回的空值标记"$0"
        if (anteriorVal && anteriorVal !== "$0") {
            return anteriorVal;
        }
        return self.precio_suscriptor();
    });
}

// 应用绑定
ko.applyBindings(new PriceViewModel());

HTML绑定部分：

<span data-bind="text: displayPrice"></span>

方式二：直接在绑定表达式中写逻辑 #

如果逻辑简单且只在一处使用，可以直接在data-bind的text绑定里写三元表达式：

<!-- 注意：如果属性是observable，要加()取值；普通属性直接用属性名 -->
<span data-bind="text: (precio_anterior() && precio_anterior() !== '$0') ? precio_anterior() : precio_suscriptor()"></span>

注意事项 #

• 如果后端返回的空值标记是数字0而非字符串"$0"，把判断条件改成anteriorVal !== 0即可。
• 如果precio_anterior和precio_suscriptor是普通属性（非observable），去掉表达式里的()直接使用属性名。

内容的提问来源于stack exchange，提问作者Diego Castro