如何在编辑时禁用单击

Posted 2023-03-27

【中文标题】如何在编辑时禁用单击

【英文标题】：how to disable a click while editing

【发布时间】：2020-02-06 17:16:47

【问题描述】：

以下是需要应用 disbale 的代码。虽然我在我的淘汰代码中添加了 observable 以用于保存功能

html

    <tr>
        <td>
            <a  href="#" data-bind="click:$parent.save">Confirm</a>
        </td>


Knockout

        vm.save = function () 

        var item = vm.selectedItem();
        vm.confirmedRecord(false);```

【参考方案1】：

没有太多信息可以继续，但如果我解释正确，这是一个可能的解决方案..

ko.applyBindings(() => 
  var self = this;
  self.items = ko.observableArray([
    id: 1,
    name: 'foo'
  , 
    id: 2,
    name: 'bar'
  ]);
  self.confirmed = ko.observable(false);
  self.save = (item) => console.log('clicked');
  self.toggle = () => 
    self.confirmed(!self.confirmed());
    console.log('buttons: ' + self.confirmed());
  
);

button 
  border: 0;
  background: transparent;
  color: blue;
  text-decoration: none;


button:hover:not(:disabled) 
  text-decoration: underline;
  color: red;
  cursor: pointer;


button:disabled 
  color: gray;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
  <tbody data-bind="foreach: items">
    <tr>
      <td data-bind="text: id"></td>
      <td data-bind="text: name"></td>
      <td>
        <button data-bind="click: save, enable: confirmed">save</button>
      </td>
    </tr>
  </tbody>
</table>

<a href="#" data-bind="click: toggle">confirm</a>

===== ** 更新

如果它是一个 ajax 请求，我建议以这种方式更改您的代码，请注意 self.confirming() 可观察对象，它会隐藏您的确认链接以加载消息。

var $fakeAsync = (api, result) => $.Deferred((dfd) => setTimeout(() => dfd.resolve(result), 500)).promise();

ko.applyBindings(() => 
  var self = this;
  self.confirming = ko.observable();
  self.confirmed = ko.observableArray([]);
  self.confirm = (item) => 
    console.clear();
    self.confirming(item.id);
    var apiUrl = '/api/dostuff&id=' + item.id;
    console.log('confirming api ' + apiUrl);
    $fakeAsync(apiUrl, item.id === 1).done((success) => 
      if (success) self.confirmed.push(item.id);
      console.log(success ? 'confirmed' : 'validation error')
    ).always(() => 
      self.confirming(null);
      console.log('done');
    );
  ;
  self.items = ko.observableArray([
     id: 1, name: 'foo' ,
     id: 2, name: 'bar' 
  ]);

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody data-bind="foreach: items">
    <tr>
      <td data-bind="text: id"></td>
      <td data-bind="text: name"></td>
      <td>
        <a href="#" data-bind="click: confirm, visible: !_.contains(confirmed(), id) && confirming() !== id">confirm</a>
        <span data-bind="visible: confirming() === id">loading..</span>
        <span data-bind="visible: _.contains(confirmed(), id) ">done</span>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

嗨山姆，实际情况是当我点击确认（这不是一个按钮）时，数据加载需要很长时间，用户尝试再次点击确认，数据会被保存单击确认的次数，即如果单击两次，则可以看到两次数据，这不是我想要的。我希望你对此有所了解

这是一个 ajax 请求，点击确认？还是会触发整页重新加载？

它是一个 ajax 请求

查看我的次要提案