Question

我是淘汰赛的新手，需要一些帮助。我点击新按钮时会加载表单，当我点击列表页面（dataTable）中的用户名时，它也会从某个列表页面加载。

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

场景1：当我来自NEW按钮时，我需要填写所有字段，然后我必须保存（按钮），它将处于启用状态，我也有下一个阶段按钮，这是已禁用但成功保存后需要启用，因此我可以进入下一阶段/页面。

场景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"/>

在我的页面加载如果文本框为空我将禁用，如果不是我将启用。所以我只需要 if condition 来启用/禁用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" />

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

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

使用Data-Bind中的if条件启用/禁用按钮？淘汰赛

1 个答案: