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

Question

Я успешно установил Ember CLI и Firebase, и я пытаюсь привести некоторые базовые данные в свои шаблоны. Мои данные «title» и «subtitle» очевидны в 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> 

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

На вкладке «Умный инспектор просмотра дерева» отображается «индекс» с «DS.RecordArray: ember368» для модели.

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

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

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

Answer 1

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

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

index.js маршрут выполнен правильно. Он извлекает и возвращает модель «foo» из хранилища Ember Data в виде массива, который через 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 Routes - это те, которые используют метод «model», а также могут устанавливать свойство «model» контроллера через метод Routing 'setupController'). Во-вторых, вместо Ember.Controller ему необходимо расширить Ember.ObjectController для экземпляра исключительных данных или Ember.ArrayController для массива данных, который здесь нужен контроллеру, поскольку this.store.findAll ("foo") 'в пути index.js собирается вернуть массив объектов. Контроллеры не используются для сохранения или получения данных с сервера, но их можно использовать для украшения модели. Учитывая, что маршрут возвращает модель, контроллер в этих простых упражнениях данных даже не нужен.

application.hbs handlebars template является частью 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}} 

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

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