Question

我使用淘汰框架。我有一个可以使用ko.utils.arrayFilter过滤的可观察数组现在，我想添加一个按钮来重置阵列。当使用击键清空输入字段时数组被重置，我想通过清空输入字段然后按回车键来模拟它

 self.resetFilter = function (){

         $('#filter').val('');
        var e = $Event("keypress");
        e.which = 13; 

        $("#filter").trigger(e);


    };

不确定，如果代码错误。或者如果这是Knockout的问题，因为我没有使用Knockout重置。

在HTML

中的过滤功能和数据绑定的整个代码下面

Javascript

 self.stringStartsWith = function(string, startsWith) {
 string = string || "";
 if (startsWith.length > string.length)
    return false;
 return string.substring(0, startsWith.length) === startsWith;
 };



self.filter = ko.observable('');

self.filteredItems = ko.computed(function() {



var filter = self.filter().toLowerCase();

self.resetFilter = function() {

    $('#filter').val('');

    var e = $Event("keypress");
    e.which = 13; 

    $("#filter").trigger(e);


};


if (!filter) { 
    return self.venueList(); 
} else {
    return ko.utils.arrayFilter(self.venueList(), function(venue) {
        console.log(venue);
        return self.stringStartsWith(venue.name.toLowerCase(), filter);
        console.log(venue);
    });
}
}, self.venueList);

};

HTML

<li>
<input placeholder="Search" id="filter" type="text" data-bind="value:    filter, valueUpdate: 'afterkeydown'" autocomplete="off">

<button data-bind="click: function(){resetFilter();}">Reset</button>
</li>

Answer 1

淘汰赛的魅力在于你可以使用数据绑定来完成你想要做的事情。虽然它可以很好地与其他库如jQuery一起使用，但你可以找到一个更优雅的淘汰赛解决方案。你提到你没有使用淘汰赛来重置。这有什么理由吗？

此外，您可以使用textInput绑定而不是使用valueUpdate: 'afterkeydown'我不确定您的搜索流程所需的结果是什么，而是基于您提供的内容在你的问题中我把这个例子放在一起。按回车会重置您的过滤器 - 我不确定这是否是您的预期行为，因为从UX的角度来看它似乎有点奇怪，但它仍然存在

＆＃13;

var ViewModel = function() {

  var self = this;
  self.filter = ko.observable();

  self.list = ko.observableArray([
    "fruit",
    "bread",
    "dad",
    "zoo",
    "keyboard",
    "monkey",
    "tiger",
    "apple",
    "bicycle",
    "father",
    "mother",
    "test",
    "computer",
    "programming",
    "ninja",
    "love",
    "earth",
    "nothing",
    "money"
  ]);

  self.filteredList = ko.computed(function() {
    return ko.utils.arrayFilter(self.list(), function(item) {
      return item.toLowerCase().indexOf(self.filter()) > -1;
    });

  });

  self.clearFilter = function() {
    self.filter('');
  }

  self.onEnter = function(d, e) {
    if (e.keyCode === 13) {
      //alert("You want to search for: " + self.filter());
      self.clearFilter();
    }
    return true;
  }

}

ko.applyBindings(new ViewModel())

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="text" placeholder="Search" data-bind="textInput: filter, event: { keypress: onEnter }" />
<input type="button" data-bind="click: clearFilter" value="Reset" />

<ul data-bind="foreach: filteredList">
  <li data-bind="text: $data"></li>
</ul>

＆＃13;

Javascript：清空输入字段并按Enter键

1 个答案: