Question

我希望在文本元素之间切换焦点时触发事件（即保存/取消对话框） - 但有一点需要注意：它不是每个元素，它包含每个元素DIV。

我有多个div，每个div都有相同的控件。如果在包含div的一个中更改了任何值并且焦点切换到另一个，我需要确定离开的挖空数据是否是脏的然后触发事件。

knockout是否支持这种事件绑定，还是我必须连接其他东西？看起来我可以在我的div上使用tabindex属性，但如果它可用，我更喜欢使用框架中的现有功能。

代码的模型如下所示：

<div>
    First Name: <input type="text" name="firstName"/><br/>
    Last Name: <input type="text" name="lastName"/><br/>
    Customer Type: <select>
        <option value="Individual">Individual</option>
        <option value="Corporate">Corporate</option>
    </select>
</div>
<div>
    First Name: <input type="text" name="firstName"/><br/>
    Last Name: <input type="text" name="lastName"/><br/>
    Customer Type: <select>
        <option value="Individual">Individual</option>
        <option value="Corporate">Corporate</option>
    </select>
</div>

Answer 1

这样的事情怎么样。一种jquery / knockout hybrid。单击属性会显示保存按钮。保存并移动到另一个div后获得焦点会再次保存。

function viewModel() {
  var self = this;
  this.currentDiv = ko.observable('');
  this.isDirty = ko.observable(false);
  this.save = function() {
    self.isDirty(false)
  }
}


var vm = new viewModel();


(function($) {

  ko.applyBindings(vm); //bind the knockout model

  $("input, select").not('#save').focus(function() {
    var d = $(this).parent('div').attr('id');
    if (d != vm.currentDiv() || vm.isDirty()) {
      vm.isDirty(true);
    } else {
      vm.isDirty(false);
    }
    vm.currentDiv(d);
  });

})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="div1"> First Name:
<input type="text" name="firstName" />
<br/> Last Name:
<input type="text" name="lastName" />
<br/> Customer Type:
<select>
    <option value="Individual">Individual</option>
    <option value="Corporate">Corporate</option>
  </select>
</div>
<div id="div2">
  First Name:
  <input type="text" name="firstName" />
  <br/> Last Name:
  <input type="text" name="lastName" />
  <br/> Customer Type:
  <select>
    <option value="Individual">Individual</option>
    <option value="Corporate">Corporate</option>
  </select>
</div>

<input type="button" id="save" data-bind="visible: isDirty, click: save" value="save" />

使用Knockout在切换DIV时触发事件

1 个答案: