如何使用淘汰赛进行搜索 [英] how to search with knockout

问题描述

我正在尝试使用Durandal项目中的淘汰赛进行非常简单的搜索. Jsfiddle中的演示

i am trying to make a very simple search using knockout in a Durandal project. Demo in Jsfiddle

1. 我在这里做错什么了吗?

2. 是否有更好的方法来实现搜索?

1. What am i doing wrong here?

2. Is there a better way to implement search ?

 var url = "https://www.googleapis.com/books/v1/volumes?q=the+Cat+In+The+Hat";

    $.getJSON(url, function (data) {
        console.log(data.items);
        var books = data.items;
   var viewModel = {
    query: ko.observable('')
    };
     viewModel.model = ko.mapping.fromJS(data.items);
   viewModel.books = ko.dependentObservable(function() {
    var search = this.query().toLowerCase();
    return ko.utils.arrayFilter(books, function(book) {
        return book.kind.toLowerCase().indexOf(search) >= 0 || book.brewery.toLowerCase().indexOf(search) >= 0 || book.style.toLowerCase().indexOf(search) >= 0;
    });
}, viewModel);
        ko.applyBindings(viewModel);
    });

推荐答案

1:我在这里做错什么了吗?

1: What am i doing wrong here?

您的代码中几乎没有明显的错误:

There are few mistakes in your code which is clearly visible to me:

• 您在 knocout.js 之前添加了 ko.mapping 插件.映射插件应在tickout.js之后添加.
• 在您的js代码中，您使用的是 JSON.stringify ，它将响应json对象转换为json字符串.无需转换，只需照原样使用即可.

• You added ko.mapping plugin before knocout.js. Mapping plugin should added after knockout.js.
• In your js code you are using JSON.stringify which convert the response json object to json string. No need to convert it, just use as it is.

2:有没有更好的方法来实现搜索?

2: Is there a better way to implement search ?

我创建了一个小提琴来演示根据您的情况进行搜索的更好的方法.

I have created a fiddle to demonstrate a slightly better approach of searching according to your scenario.

注意:我使用了最新的稳定版本的淘汰赛，即3.0.0，我建议您始终使用最新版本.您在代码中使用了dependentObservable，但是自从Knockout 2.0以来，从属可观察对象现在称为计算出的可观察对象.. em>

Note: I used the latest stable version of knockout i.e. 3.0.0 and i recommend you to always use the latest version. You used dependentObservable in your code but Since Knockout 2.0, dependent observables are now called computed observables.

小提琴(如果小提琴无效，则应在javascript代码中提供api密钥)

Fiddle (If fiddle not works than you should provide your api key in javascript code)

主视图模型

function viewModel()
{
  var self = this;
  var key = "your api key";

  self.query = ko.observable("the cat is in the hat").extend({ throttle: 500 });

  self.books = ko.observableArray();

  self.get = function() { 
     $.ajax({
            url: "https://www.googleapis.com/books/v1/volumes",
            data: { q: self.query(), key: key },
            type: "GET",
            success: function (response) {
                ko.mapping.fromJS(response.items, {
                    create: function(options) {
                       return new book(options.data);
                    }
                }, self.books);
            }
      });
  };

  self.search = ko.computed(function() {
    if(self.query() !== "")
      self.get();
  });
}

Book对象

function book(data)
{
  var self = this;

  ko.mapping.fromJS(data, {}, self); 

  //here you can add extra properties in book object if needed
}

应用绑定

$(function(){
  var vm = new viewModel();
  vm.get();                   //get initial data
  ko.applyBindings(vm);
});

注意: 当前该代码无法处理有关错误，未找到的书，输入查询验证等的正确消息.您应该自己处理它，以便提供更好的用户体验

修改

我在小提琴中更新了您的代码选中此.

I updated your code in fiddle check this its working.

这篇关于如何使用淘汰赛进行搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！