Почему данные Firebase не отображаются должным образом в моем выводе Ember CLI?

Я успешно настроил Ember CLI и Firebase и пытаюсь добавить некоторые базовые данные в свои шаблоны. Мои данные «заголовок» и «подзаголовок» видны в Ember Inspector, а также на панели инструментов моего проекта Firebase. Однако {{foo.title}} и {{foo.subtitle}} возвращаются пустыми и неопределенными в браузере. Это почему? Вот мой код:

application.js (адаптер)

    import DS from 'ember-data';

    export default DS.FirebaseAdapter.extend({
      firebase: new window.Firebase('https://<firebase-database-name>.firebaseio.com/')
    });

foo.js (модель)

    import DS from 'ember-data';

    export default DS.Model.extend({
      title:    DS.attr('string'),
      subtitle: DS.attr('string')
    });

index.js (контроллер)

    import Ember from 'ember';

    export default Ember.Controller.extend({
      model: function() {
        var titles = this.store.createRecord('foo', {
          title: 'Title',
          subtitle: 'Subtitle'
        });
        titles.save();
      }
    });

index.js (маршрут)

    import Ember from 'ember';

    export default Ember.Route.extend({
      model: function() {
        return this.store.findAll('foo');
      }
    });

application.hbs (шаблон)

    <h2 id='title'>{{foo.title}}</h2>

    {{outlet}}

index.hbs (шаблон)

    <h1>{{foo.title}}</h1>
    <h3>{{foo.subtitle}}</h3>

Заголовок и подзаголовок не отображаются в шаблонах.

Вкладка Ember Inspector View Tree показывает «индекс» с «DS.RecordArray: ember368» для модели.

Вкладка Ember Inspector Data показывает тип модели 'foo' с # Records равным 1. Когда я нажимаю на эту запись, отображается идентификатор Firebase, заголовок и значения субтитров. Когда я просматриваю свой URL-адрес данных Firebase, я вижу следующую структуру:

    firebase-database-name
      |— foos
           |— JU1Ay8emCNNZBeqYoda
                |— subtitle: "Subtitle"
                    |— title: "Title"

Вроде все правильно, но в шаблонах не отображаются значения данных. Спасибо за любую помощь.


firebase ember.js ember-cli ember-data
person jacefarm    schedule 11.08.2014    source источник
comment
Ваш URL-адрес указывает на web / data, но коллекция находится в data / foos / ...   -  person Kato    schedule 15.08.2014
comment
Спасибо @Kato, но проблема не в этом. Я обновил схему URL-адресов данных Firebase выше, чтобы уточнить, что «Интернет» является родительским элементом данных, чтобы отразить конечную точку для адаптера Firebase.   -  person jacefarm    schedule 16.08.2014

Ответы (1)


arrow_upward
1
arrow_downward

Ответ на этот вопрос заключается в правильном извлечении и раскрытии данных Ember, и не столько в Firebase или Ember CLI. В приведенном выше коде есть несколько проблем ...

Код foo.js представляет собой простую модель и написан правильно.

Маршрут index.js реализован правильно. Он извлекает и возвращает модель «foo» из хранилища данных Ember в виде массива, который через EmberFire и адаптер Firebase в конечном итоге извлекается из базы данных Firebase. Однако это часть 1 из 3 проблем. Если вы хотите, чтобы эти данные отображались в приложении один раз, откажитесь от маршрута index.js и просто определите маршрут application.js, например:

    import Ember from 'ember';

    export default Ember.Route.extend({

      model: function() {
        return this.store.findAll('foo');
      }
    }

index.js контроллер имеет ряд проблем и является частью 2 из 3 проблем. Во-первых, у контроллеров нет метода «модель», у них есть только свойство «модель» (маршруты Ember - это те, которые используют метод «модели», а также могут устанавливать «модель» < em> свойство контроллера с помощью метода setupController маршрута). Во-вторых, вместо Ember.Controller ему необходимо расширить Ember.ObjectController для отдельного экземпляра данных или Ember.ArrayController для массива данных, который является здесь необходимым контроллером, поскольку 'this.store.findAll («foo» ) 'в маршруте index.js будет возвращать массив объектов. Контроллеры не используются для сохранения или получения данных с сервера, но их можно использовать для украшения модели. Учитывая, что маршрут возвращает модель, в этом простом упражнении с данными контроллер даже не нужен.

Шаблон handlebars application.hbs - это часть 3 из 3 проблем. Он не настроен для правильного отображения модели, которая предоставляется ему через маршрут. Необходимо использовать помощник {{#each}} для перебора массива данных, который возвращается с помощью метода модели маршрута. Попробуй это:

    {{!-- looping over the 'foo' model returned via the route --}}
    {{#each foo in model}}
      <h2>Application Title = <span style="color: blue;">{{foo.title}}</span></h2>
      <h4>Application Tagline = <span style="color: blue;">{{foo.tagline}}</span></h4>
    {{/each}}

    {{outlet}}

Шаблон handlebars index.hbs не нужен. Для отображения интересующих данных достаточно шаблона application.hbs.

Это очень простое упражнение, но оно иллюстрирует фундаментальные аспекты правильного использования Ember Data.

person jacefarm    schedule 21.08.2014