javascript - Jquery 在 Knockout Js 中选择等效项

Question

我是 knockout 新手，在尝试解决此问题时遇到了困难。

我正在尝试在 Knockout 中完成此选择功能。当我选择文本时，我想突出显示边框。

https://api.jquery.com/select/

现在，在 Knockout 中，我可以使用单击突出显示边框，但是当用户直接在文本框中选择文本时，我无法突出显示边框。

这是该内容的 html。该文本框中发生了很多事情。如果我的问题不清楚，请提问，以便我更好地解释。

<input class="name" type="text"
data-bind="click: function (y, event) { $root.SelectedWay($parent.Way); $root.SelectChild(y, event); $(event.target).select(); },
typeahead: { 'source': $root.All(), 'sorter': $root.ColorSorter, 'updater': $root.UpdateSelectedColor, 'highlighter': $root.HighlightColor, 'matcher': $root.MatchColor },
css: { 'selected': Selected }, 
value: Name" />

Answer 1

自定义绑定(bind)怎么样。这是使用 jquery select 边框变成红色的一个

ko.bindingHandlers.jquerySelect = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    $(element).select(function() {
      $(this).css("border", "5px solid red");
    });
    $(element).val(valueAccessor()());
  },
  //update the control when the view model changes
  update: function(element, valueAccessor, allBindingsAccessor) {
    $(element).val(valueAccessor()());
  }
};



function model() {
  var self = this;
  this.myObservable = ko.observable('hello world');
}

var mymodel = new model();

$(document).ready(function() {
  ko.applyBindings(mymodel);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input data-bind="jquerySelect: myObservable" />