Question

我有一个li的列表，它们可以用jquery ui排序，我试图让列表可以排序或禁用排序

如果检查输入=启用排序，如果输入未选中=禁用排序

这是我到目前为止所做的：

<ul id="sortable" style="list-style:none">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

<br />

<label>Sort <input type="checkbox" data-bind="checked: IsChecked"/></label

JS：

function viewModel(){
  self = this;
  self.button = ko.observable();
  self.IsChecked = ko.observable();

  self.enableDrag = function(){
      $("#sortable").sortable();
    console.log("checked");
  }
  self.disableDrag = function(){
    $("#sortable").sortable();
    $("#sortable").sortable("disable");
  }
  self.sort = function(){
    if(self.IsChecked()){
      self.enableDrag();
    }else{
      self.disableDrag();
    }
  }
  self.sort();
};

var myViewModel  = new viewModel();
ko.applyBindings(myViewModel);

Answer 1

选中复选框将改变.IsChecked属性，但就是这样。您可以订阅＆＃39;一个observable的事件处理程序，以便您可以在其值更改时运行代码：

self.IsChecked.subscribe(function (newBool) {
   console.log(newBool);
   self.sort();
});

当值发生变化时，仅会触发。在复选框的情况下，每次单击元素时都会这样，因为它是一个布尔值。

请参阅文档中的明确订阅observables 以获取更多详细信息：http://knockoutjs.com/documentation/observables.html

您也可以使用自定义绑定来实现可重用性： http://knockoutjs.com/documentation/custom-bindings.html

如何跟踪输入复选框检查状态

1 个答案: