html - 启用绑定(bind)不起作用

Question

 <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
    <button class="btn btn-danger pull-right btn-block" data-bind="enable: DeletedEnable">Delete</button>                            
 </div>

即使 DeletedEnable 为 false，启用属性也不起作用，按钮 仍处于启用状态。

self.CurrentStatusIsDraft= ko.pureComputed(function () {
        return false;
    });

self.DeletedEnable = ko.pureComputed(function () {
        return self.CurrentStatusIsDraft() ;
    });

Answer 1

基于您的示例 https://jsfiddle.net/3rnt2zsc/ :

A) 使用 inline onClick 不是一个好习惯。 由于您使用的是 knockout ，因此只需使用 click 事件绑定(bind)。

B) 尝试在您的 View 中放置较少的 javascript 逻辑。

C) 通过使用模型的 new 实例应用绑定(bind)。

示例:https://jsfiddle.net/of8qfdvL/1/

查看:

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
   <div class="col-lg-offset-6 col-md-offset-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
      <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
         <button class="btn btn-default btn-gb-default btn-block pull-right" data-bind="enable: ContinuedEnabled, click:OnContinue">Continue</button>
      </div>
      <button class="btn btn-danger pull-right btn-block" data-bind="enable: DeletedEnabled(), click:OnDelete">Delete</button>
      <pre data-bind="text: ko.toJSON(DeletedEnabled, null, 2)"></pre>
   </div>
</div>

型号:

var viewModel = function() {
   var self = this;
   self.SubmissionId = ko.observable(1234);
   self.LastPageId = ko.observable(2);
   self.ContinuedEnabled = ko.observable(true);  // you can set the value based on your logic

   self.OnContinue = function(){
      console.log("SubmissionId:",self.SubmissionId());
      console.log("LastPageId:",self.LastPageId());
   }

   self.OnDelete = function(){
      console.log("SubmissionId:",self.SubmissionId());
   }

   self.CurrentStatusIsDraft= ko.pureComputed(function () {
       return false;
   });

   self.DeletedEnabled = ko.pureComputed(function () {
      return self.CurrentStatusIsDraft() ;
   });
}

ko.applyBindings(new viewModel()); // apply a new instance of your model