Предоставление представления возвращает undefined

Question

У меня есть представление коллекции с двумя методами фильтра и метод рендеринга, который принимает параметр. Проблема, с которой я столкнулся, заключается в том, что при первом представлении представления он возвращает мне ошибку. Вот моя коллекция:

var ResumeCollection = Backbone.Collection.extend({ 
    url: 'http://localhost:3000', 
    filterActive: function() { 
     var active = this.where({interviewed: false}); 
     return new ResumeCollection(active); 
    }, 
    filterInterviewed: function() { 
     var interviewed = this.where({interviewed: true}); 
     return new ResumeCollection(interviewed); 
    } 
}); 

И мое мнение:

var ResumeList = Backbone.View.extend({ 
    events { // hash array of filter events }, 
    initialize: function() { 
     this.collection.fetch(); 
    }, 

    render: function (filtered) { 
     var self = this; 
     var data; 

     if (!filtered) { 
      data = this.collection.toArray(); 
     } else { 
      data = filtered.toArray(); 
     } 

     _.each(data, function (cv) { 
      self.$el.append((new ResumeView({model: cv})).render().$el); 
     }); 

     return this; 
    }, 

    showActive: function (ev) { 
     var filtered = this.collection.filterActive(); 
     this.render(filtered); 
    }, 

    showInterviewed: function (ev) { 
     var filtered = this.collection.filterInterviewed(); 
     this.render(filtered); 
    }, 

    showAll: function (ev) { 
     this.render(this.collection); 
    } 
}); 

Этот вид визуализируется в первый раз в маршрутизаторе, передавая коллекцию:

var AppRouter = Backbone.Router.extend({ 
    routes: { 
     '': 'home' 
    }, 

    initialize: function() { 
     this.layout = new LayoutView(); 
    } 

    home: function() { 
     this.layout.render(new ResumeList({ 
      collection: new ResumeCollection() 
     })); 
    } 
}); 

И это макет вид, в пределах которого отображаются все другие виды:

var LayoutView = Backbone.View.extend({ 
    el: $('#outlet'), 
    render: function (view) { 
     if (this.child && this.child !== view) { 
      this.child.undelegateEvents(); 
     } 

     this.child = view; 
     this.child.setElement(this.$el).render(); 
     return this; 
    } 
}); 

Когда я просто обновляю свою страницу, я получаю ошибку filtered.toArray is not a function и ничего не отображается соответственно. После проверки всего в отладчике я узнал, что когда представление получает визуализацию в первый раз, атрибут filtered получает пустую коллекцию, присваивает ей переменную data, которая становится пустым массивом и переходит в тело функции render, становясь undefined после этого. Тайны идут здесь: всякий раз, когда я нажимаю элементы, привязанные к моим событиям show*, они действуют точно так, как ожидалось, и отображают любые модели, где interviewed === false, или true или всю коллекцию. Это выглядит для меня волшебным, и у меня нет ни малейшего понятия, что я могу с этим сделать.

ДОБАВЛЕНО: GitHub repo with this project

Answer 1

После куска советов от моего наставника, я понял, что суть проблемы заключается в асинхронном происхождении fetch метода - как я прошел this.collection.fetch в моей функции инициализации, она выполняется после моего render метода, а не до него , поэтому мой метод render не имел ничего, что можно было бы визуализировать при первом просмотре представления. Итак, это исправление работает:

var ResumeList = Backbone.View.extend({ 
    initialize: function (options) { 
     this.collection = options.collection(); 
     // removed .fetch() method from here 
    }, 
    render: function (filtered) { 
     var self = this; 
     var data; 
     // and added it here: 
     this.collection.fetch({ 
      success: function (collection) { 
       if (!filtered) { 
        data = collection.toArray(); 
       } else { 
        data = filtered.toArray(); 
       } 
       self.$el.html(self.template(collection.toJSON())); 
       _.each(data, function (cv) { 
        self.$el.append((new ResumeView({model: cv})).render().$el); 
       }) 
      } 
     }); 
    } 
}); 

И это сработало отлично и точно так, как мне было нужно.

Answer 2

Ваш home функция на AppRouter есть опечатка. У вас есть дополнительная точка с запятой.

home: function() { 
    this.layout.render(new ResumeList({ 
     collection: new ResumeCollection(); 
    })); 
} 

Должно быть

home: function() { 
    this.layout.render(new ResumeList({ 
     collection: new ResumeCollection() 
    })); 
} 

мне нужно, чтобы удалить его, чтобы получить JSFiddle работу: https://jsfiddle.net/4gyne5ev/1/

Я бы рекомендовал добавить какой-то пылеобразования инструмент в вашей IDE или процесс сборки (http://eslint.org/)

Answer 3

Необходимо добавить исходный URL-адрес в файл db.json, как этот

"" : [ 
    { 
     'somthing': 'somthing' 
    } 
]