Question

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

我在这里做错了什么？

有没有更好的方法来实施搜索？

 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);
    });

Answer 1

1：我在这里做错了什么？

您的代码中几乎没有错误，我可以清楚看到：

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

2：有更好的方法来实现搜索吗？

我创建了一个小提琴来演示根据您的场景稍微更好的搜索方法。

注意： 我使用了淘汰赛的最新稳定版本，即3.0.0，我建议您始终使用最新版本。您在代码中使用了dependentObservable但是从Knockout 2.0开始，依赖的observable现在被称为computed observables。

Fiddle（如果小提琴不起作用，你应该在javascript代码中提供你的api密钥）

主视图模型

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();
  });
}

图书对象

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);
});

注意： 目前此代码未处理错误的正确消息，未找到的书籍，输入查询验证等等。您应该自己处理它以提供更好的用户体验。

修改

我在小提琴check this中更新了你的代码。

如何用淘汰赛搜索

1 个答案: