Question

我有“取消”按钮。点击我应该显示确认对话框，询问用户是否真的想要丢失填写的数据（如果他做了一些更改），只是隐藏表格以防万一他没有做出更改。

我有变量canSave，这有助于检测表单上是否有某些更改。

cancel - 方法，只清除所有数据并隐藏表单。

这是我尝试过的，但这没有做任何事情。

<button data-bind="click: canSave ? function(){openConfirmation(!openConfirmation());} : cancel" type="reset" class="btn btn-default">Cancel</button>

初始代码：

 <button data-bind="toggleClick: openConfirmation" type="reset" class="btn btn-default">Cancel</button>

toggleClick是自定义指令，用于更改切换一些布尔变量。

 <!-- ko if: canSave -->
    <confirmation-modal class="delete-confirm-popup" params="showDialog : openConfirmation, bodyHtml: 'Your changes will not be saved.<br/> Do you want to continue?', confirmCallBack: cancel"></confirmation-modal>
    <!-- /ko -->

我已经显示确认保存有一些变化......但是在这里我没有更改用户点击取消按钮（在我的情况下没有任何反应）的情况下错过了案例。

那么如何组合2个指令 - click（对于没有变化的情况）和toggleClick（对于有些变化的情况）？

感谢。

Answer 1

您可以在click事件上单独使用一个函数，然后在函数内部比较是否需要进行更改。

以下是一个简单示例：https://jsfiddle.net/kyr6w2x3/110/

HTML：

<form data-bind="visible:ShowForm">
  <input type="text" data-bind="textInput:Input">
  <input type="button" value="Cancel" data-bind="click:CancelForm">
</form>


<div data-bind="text:Status">

</div>

JS：

 var MainViewModel = function() {
     var self = this;
     self.Input = ko.observable();
     self.Status = ko.observable();
     self.ShowForm  = ko.observable(true);
     self.canSave  = ko.observable(false);
     self.Input.subscribe(function(newValue){
        if(newValue){
            self.canSave(true);
          }
      })
    self.CancelForm = function(){
        if(self.canSave()){
          self.Status("there is a change that needs to be asked the user");
          }else{
            self.ShowForm(false);
            self.Status("there is no change so the form got hidden")
          }
      }
  };
 ko.applyBindings(new MainViewModel ());

将2个Knockout指令与类似逻辑相结合

1 个答案: