骨干搜索(始终未找到)

时间:2014-01-18 21:42:47

标签: javascript search backbone.js model-view-controller

我的搜索表单与骨干工作..除了它总是说该项目没有找到所以我想我总是发送一个空数组所以是的,那么它的逻辑,它将找不到任何东西。

我的搜索结果视图:

var ArtikelSearchResultsView = Backbone.View.extend({
  el: '#searchResults',
  render: function ( query_encoded ) {
    var query = decodeURIComponent(query_encoded.replace(/\+/g, "%20"));

    var result_artikels = _.filter(this.model.models, function (artikel_model) {
      var artikel = artikel_model.attributes;

      for (var key in artikel) {
        if ( artikel[key].toLowerCase().indexOf( query.toLowerCase() ) >= 0 )
        {
          return true;
        }
      }
      return false;
    });

    // Show results
    var template = $("#search-results").html();
    var result_html = _.template( template, { artikels: result_artikels, query: query } );

    this.$el.html( result_html );
  }
});

我的路由器发送了这个:

searchResults: function(query){
      artikelSearchView.render(query);
      var artikelSearchResultsView = new ArtikelSearchResultsView({ model: Artikel });
      artikelSearchResultsView.render(query);

    }

Artikel就是这样:

var Artikel = Backbone.Model.extend({
  urlRoot: 'api/items.json',
  defaults: {
        titel: 'Titel niet opgegeven',
        url_titel: 'unieke sleutel urltitel',
        img_path: 'geen image toegevoegd',
        commentaar: 'Commentaar niet opgegeven',
        categorie: 'Categorie niet opgegeven',
        waardering: 0,
        artikel: 'Artikel niet opgegeven'
    },
    initialize: function(){

      if(!this.get('description')){
        var lazy = 'This user was too lazy too add a description';
        this.set('description', lazy);
      }
    }
});

完整代码:http://pastebin.com/Y9zi6aGH(我以不同的方式使用Artikel和Artikels,我知道这是不好的做法,但这就是我现在的方式)所以我的问题是:有人可以解决这个问题,所以我得到了搜索结果?如果我按“a”应该给我所有的所有对象,但它没有给我任何结果。

1 个答案:

答案 0 :(得分:1)

为了工作,我对您的代码进行了一些更改:

1-在您的视图中ArtikelSearchResultsView,我已经将它的模型(集合)重置事件绑定到它的渲染方法,因此一旦它的模型从服务器重置它就会调用它#&## 39; s渲染方法:

  var ArtikelSearchResultsView = Backbone.View.extend({
  el: '#searchResults',
  initialize: function(){
      this.model.bind('reset', this.render, this);
  } ...

2-改变

var artikels = new Artikels();
var artikel = new Artikels();

var artikels = new Artikels();
var artikel = new Artikel();

3-最后改变你的路由器:

searchResults: function(query){
    var artikelSearchResultsView = new ArtikelSearchResultsView({ model: artikels });
    artikels.fetch();
}

我还从ArtikelSearchResultsView渲染方法中删除了过滤以测试它,现在是' this.model.models'填充了从服务器收到的数据。