knockoutjs单选按钮点击事件

Question

我有一些 html:

<input name="Test" type="radio" value="yes" data-bind="checked: Page2.Traded, click: Traded_Yes" /> Yes
<input name="Test" type="radio" value="no" data-bind="checked: Page2.Traded, click: Traded_No" /> No

还有一些 Javascript:

    self.Traded_Yes = function(data) {
       $("#Page2Symbol").prop("disabled", false);
       return true;
    };

    self.Traded_Yes = function(data) {
       $("#Page2Symbol").prop("disabled", true);
       return true;
    };

UI 在禁用 id: Page2Symbol 和保存正确数据方面一切正常，但是 UI 不显示在 Yes/No 之间翻转的单选按钮我点击任一收音机。我这样做 return true 是为了允许此处讨论的默认点击操作：https://knockoutjs.com/documentation/click-binding.html，但是当我点击任一单选按钮时 UI 不会翻转选择。有什么想法吗？

Answer 1

我无法重现您的问题，但可能有一些好的建议来解决您可能遇到的问题：

使用敲除时，建议使所有与 DOM 的交互通过敲除绑定。要禁用和启用按钮，有 disable 和 enable 绑定。以下是您如何使用它们：

使用 `disable` 绑定：

你添加一个 computed 属性到你的 viewmodel 来定义是否基于 Traded 的值禁用。

这确保您不需要 click-binding 并且可以删除任何 id 引用。

const self = {};

self.Page2 = { Traded: ko.observable("yes") };
self.disablePage2Symbol = ko.pureComputed(() => self.Page2.Traded() === "yes");

ko.applyBindings(self);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<button data-bind="disable: disablePage2Symbol">Page 2 button</button>

<label> 
  <input type="radio" value="yes" data-bind="checked: Page2.Traded" /> Yes
</label>
<label> 
  <input type="radio" value="no" data-bind="checked: Page2.Traded" /> No
</label>

问题重现失败：

此代码段表明您的原始代码应该可以工作，即使它有点 anti-pattern。

const self = {};

self.Traded_Yes = function(data) {
   $("#Page2Symbol").prop("disabled", false);
   return true;
};

self.Traded_No = function(data) {
   $("#Page2Symbol").prop("disabled", true);
   return true;
};

self.Page2 = { Traded: ko.observable("yes") };

ko.applyBindings(self);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<button id="Page2Symbol">Page 2 button</button>

<input name="Test" type="radio" value="yes" data-bind="checked: Page2.Traded, click: Traded_Yes" /> Yes
<input name="Test" type="radio" value="no" data-bind="checked: Page2.Traded, click: Traded_No" /> No

knockoutjs单选按钮点击事件

knockoutjs radiobutton click event

javascript

knockout.js

使用 `disable` 绑定：

问题重现失败：

knockoutjs单选按钮点击事件

knockoutjs radiobutton click event

javascript

knockout.js

使用 disable 绑定：

问题重现失败：

使用 `disable` 绑定：