使用Data-Bind中的if condtion启用/禁用按钮？knockoutjs

Question

我很擅长淘汰赛,需要一些帮助.我点击新按钮时会加载表单,当我点击列表页面中的用户名(dataTable)时,它也将从某个列表页面加载.

我需要的是看起来非常基本和直接.

场景1:当我来自NEW按钮时,我需要填写所有字段,然后我必须保存(按钮),它将处于启用状态,我也有禁用的NEXT STAGE BUTTON但是在成功保存时需要启用所以我可以进入下一阶段/页面.

场景2:这就是我在解决问题时遇到的麻烦.当我点击用户名链接来自某个列表页面时,数据将以表格形式自动填充,现在我必须使我的NEXT STAGE按钮在加载时预先启用,因为它已经是一个已保存的表单.

到目前为止我尝试了什么:

<button id="btnSave" class="btn" data-bind="click:$data.save">SAVE</button>
<input type ="button"  id="nextstage" data-bind="click:$root.nextstage,enable:false" value="NEXT STAGE"/>

我也试图在数据绑定中使用IF条件,我完全不知道如何.

我的想法:在数据绑定中,我将基于我的表单上的字段启用/禁用NEXTSTAGE,例如如果我有这样的东西

<input type="text"  id="txtComepitors" data-bind="value:$data.Competitors"/>

在我的页面加载如果文本框为空我将禁用,如果它不是我将启用.所以我只需要条件来启用/禁用data-bind中的nextstage.

这就是我所拥有的一切,并且认为它缺乏适当的实施.

Answer 1

很难从你的问题中准确地得到你所要求的内容,但最简洁的方法是使用一个computed可观察的方法.

所以在你的视图模型的某个地方,你会有这样的东西:

self.canSave = ko.computed(function() {
    // test conditions for saving here (i.e. whether all the fields have values)
    // and return true if you can save
    // for example:
    return self.someProperty() && self.someOtherProperty();
});

现在您可以像这样使用启用绑定:

<input type="button" value="Save Me!" data-bind="enable: canSave" />

这是一个小提琴演示.注意保存按钮在两个文本框都有一些值之前是如何变灰的.

您可以根据需要使逻辑computed变得复杂,并且敲除将跟踪依赖关系,并在其中一个依赖的可观察对象发生更改时重新评估它.这可以防止VM逻辑混乱您的视图.