如何在编辑时禁用单击

Question

以下是需要应用 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);```

Answer 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>