Kendo UI MVVM按钮enabled绑定函数结合ViewModel双变量问题

嘿，我看你现在是通过页面全局函数来结合ViewModel里的两个变量判断按钮是否可用，其实咱们可以把这个逻辑直接整合到ViewModel中，这样更符合MVVM的关注点分离原则，代码也更好维护。

方案1：在ViewModel里封装判断方法 #

从data-bind语法来看你大概率用的是KnockoutJS，咱们可以直接在ViewModel里加一个方法来处理这两个变量的判断：

// 假设你的ViewModel结构大致如下
X.details.viewModel = {
    canAddStuff: ko.observableArray([true, false, true]), // 示例数组数据
    isStuffDisabled: ko.observable(false),
    // 新增方法，传入index返回按钮是否启用
    isAddButtonEnabled: function(index) {
        // 可观察变量要加()才能取到最新值
        return this.canAddStuff()[index] && !this.isStuffDisabled();
    }.bind(this) // 绑定this指向ViewModel，避免上下文混乱
};

然后模板里就不用依赖全局函数了，直接绑定ViewModel的方法：

<a data-role="button" id="#=index#" data-bind="events: { click: onAddClick }, enabled: $root.isAddButtonEnabled(#=index#)"> Add </a>

方案2：给每个数据项加计算属性（适合循环渲染场景） #

如果这个按钮是在循环模板里渲染的（看#=index#的语法很像Kendo UI模板），可以把每个条目的启用状态做成计算属性，让模板更简洁：

// 假设你有一个要渲染的数据源数组items
X.details.viewModel.items = ko.observableArray(items.map(item => {
    return {
        // 保留原有数据属性
        index: item.index,
        // 计算属性，自动响应ViewModel变量的变化
        isAddEnabled: ko.computed(() => {
            return X.details.viewModel.canAddStuff()[item.index] && !X.details.viewModel.isStuffDisabled();
        })
    };
}));

模板里直接绑定这个计算属性即可：

<a data-role="button" id="#=index#" data-bind="events: { click: onAddClick }, enabled: isAddEnabled"> Add </a>

额外小tip：不推荐但可行的简化写法 #

如果你暂时不想改动ViewModel，也可以直接在模板的data-bind里写逻辑（不过不建议这么做，因为模板里放太多业务逻辑会让代码难以维护）：

<a data-role="button" id="#=index#" data-bind="events: { click: onAddClick }, enabled: $root.canAddStuff()[#=index#] && !$root.isStuffDisabled()"> Add </a>

总的来说，把判断逻辑放到ViewModel里是更优的选择，不仅代码结构更清晰，而且如果用了Knockout的可观察变量，按钮状态还能自动响应数据变化，不用手动触发更新～

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