2

Помогите пожалуйста исправить скрипт. jsfiddle

Я создал коллекцию из моделей, которые имеют только одно поле - 'title'. Потом я вывел их на страничку в виде списка и поместил рядом текстовое поле.

Я хотел бы чтобы пользователь вводил в поле для поиска буковки, а коллекция фильтровала модели. Соответственно на страничке список перестраивался бы. Но у меня скрипт не работает.

Делал по аналогии с этим рабочим примером

models and collection:

APP.NewsModel = Backbone.Model.extend({
  defaults:{
    "title": ""
  }
});  

APP.NewsModelsCollection = Backbone.Collection.extend({
  model: APP.NewsModel,

  search : function(letters){ console.log(letters)
    if(letters == "") return this;

    var pattern = new RegExp(letters,"gi");
    return _(this.filter(function(data) {
        return pattern.test(data.get("title"));
    }));
  }  
});

views:

APP.Filter = Backbone.View.extend({  

  initialize: function() {   
    var self = this;

    this.collection = new APP.NewsModelsCollection();  

    var model1 = new APP.NewsModel({title: 'qwerty'}),
        model2 = new APP.NewsModel({title: 'qwddez'}),
        model3 = new APP.NewsModel({title: 'zxxc'});

    this.collection.add(model1);
    this.collection.add(model2);
    this.collection.add(model3);

    this.render();

    $('#filterTitleField').on('keyup', function() { self.search() });
  },    

  render: function () {   
    this._createNewsUnits();
    return this;
  },

  search: function(e){  console.log('search')
    var letters = $("#filterTitleField").val();
    this.collection.search(letters);
    console.log(this.collection.models)
    this._createNewsUnits();
  },    

  _createNewsUnits: function () {  
    $('#newsList').html('');

    this.collection.each(function (news) {    
      var news = new APP.News({model: news});    
      $('#newsList').append(news.render().el);
    }, this);
  } 

});


APP.News = Backbone.View.extend({  

  initialize: function(model) {   
    this.model = model.model;
  },

  className: 'news',

  template: _.template($('#newsUnitTpl').html()),

  render: function () {  
    this.$el.html(this.template({title: this.model.get('title')}));   
    return this;
  }

});

1 ответ 1

2

Не думаю что это актуально, но раз я уж сюда заглянул: Вероятно расставив консольлоги Вы убедились что если просто сделать так

this.collection.search(letters);

то это коллекцию не отфильтрует. В чем же дело?
Лезем в метод search и видим там такое:

return _(this.filter(function(data) {
        return pattern.test(data.get("title"));
    }));

Лезем в доки backbone и ищем там что же делает метод filter. Он в свою очередь валится в метод filter underscore. Ну да, так и есть, он просто возвращает вам отфильтрованную коллекцию.
Пункт 1. Метод filter возвращает Новую коллекцию, старую он не изменяет.

То есть для вашего списка это просто операция "сходи куда-то сделай что-то", данные с которыми этот список реально оперирует просто никто не меняет, вот он и не чешется перерисовываться.

То есть первую упомянутую строчку надо заменить на что-то вроде

this.collection = this.collection.search(letters);

Печатаем и получаем ошибку. Что же такое? Ну наверное то, что
Пункт 2. Метод поиска должен возвращать коллекцию
а не массив, для верности зачем-то завернутый underscore враппером (ну ок, я понимаю, в примере так было, но пример немного другой, да и вообще не очень.) То есть второй кусок кода можно переписать как-то так:

return new APP.NewsModelsCollection(this.filter(function(data) {
        return pattern.test(data.get("title"));
    }));

Наконец все фильтруется. Но возникает проблема в том, что фильтруется куда больше, чем мы хотим. Вводим "qw", хотим две записи, видим одну. И тут возникает

Пункт 3. Не доверяйте всякому левому коду из интернета.
На гитхаб может кто угодно выложить что угодно. Вы тоже можете. Я тоже могу, но мне влом. В частности в этом примере человек не учел, что регулярка с флагом g запоминает свою позицию, соответственно если эту регулярку вызывать в итераторе, то поведет она себя неинтуитивно. Можно впрочем каждый раз определять новую регулярку в теле цикла. Например так:

return new APP.NewsModelsCollection(this.filter(function(data) {
        var pattern = new RegExp(letters,"gi"); // вот здесь
        return pattern.test(data.get("title"));
    }));

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.