为什么我的Ember CLI生成的输出中Firebase数据不能正常显示？ [英] Why is Firebase data not displaying properly in my Ember CLI generated output?
问题描述
我已成功设置Ember CLI和Firebase，我试图将一些基本数据添加到我的模板中。我的标题和字幕数据在Ember Inspector以及我的Firebase项目仪表板中显而易见。但是， {{foo.title}} 和 {{foo.subtitle}} 正在回到空，未定义浏览器。这是为什么？这是我的代码：
application.js （适配器）
从ember-data导入DS;
导出默认DS.FirebaseAdapter.extend（{
firebase：new window.Firebase（'https：//< firebase-database-name> .firebaseio.com /'）
}）;
foo.js （型号）
从ember-data导入DS;
导出默认DS.Model.extend（{
标题：DS.attr（'string'），
subtitle：DS.attr（'string'）
}）;
index.js （控制器）
从ember导入Ember;
导出默认Ember.Controller.extend（{
model：function（）{
var titles = this.store.createRecord（'foo'，{
title ：'Title'，
subtitle：'Subtitle'
}）;
titles.save（）;
}
}）;
index.js （路线）
从ember导入Ember;
导出默认值Ember.Route.extend（{
model：function（）{
return this.store.findAll（'foo'）;
}
}）;
application.hbs （模板）
< h2 id ='title'> {{foo.title}}< / h2>
{{outlet}}
index.hbs （template）
< h1> {{foo.title}}< / h1>
< h3> {{foo.subtitle}}< / h3>
标题和字幕无法显示在模板中。
Ember Inspector视图树选项卡显示index，并显示DS.RecordArray：ember368。
Ember Inspector Data选项卡显示foo的模型类型，其中＃个记录为1.当我点击该记录时，它将显示Firebase ID，标题和字幕值。当我检查我的Firebase数据网址时，我看到以下结构：
firebase-database-name
| - foos
| - JU1Ay8emCNNZBeqYoda
| - subtitle：Subtitle
| - title：Title
似乎一切都正确，但模板不显示数据值。感谢任何帮助。
这个问题的答案集中在正确检索和暴露Ember Data，而不是那么多使用Firebase或Ember CLI。上面的代码有多个问题...
foo.js 代码表示一个简单的模型，并正确写入。
正确实现 index.js 路由。它正在从Ember Data存储中检索并返回foo模型，作为一个数组，通过EmberFire和Firebase适配器最终从Firebase数据库中提取。但是，这是3个问题的第1部分。如果您希望这个数据在应用程序中显示一次，可以省略index.js路由，并且只需定义一个 application.js 路由，如下所示：
从ember导入Ember
导出默认值Ember.Route.extend（{
model：function（）{
return this.store.findAll（'foo'）;
}
}
index.js 控制器有许多问题，是3个问题的第2部分：首先，控制器没有模型方法，它们只有一个模型属性（Ember Routes是使用模型方法的那些，并且还可以通过Route的'setupController'方法设置控制器的'model'属性）;其次，而不是Ember.Controller，它需要扩展Ember.ObjectController用于单数据实例，或Ember.ArrayController用于数组数组，这是此处所需的控制器，因为index.js路由中的'this.store.findAll（foo）'将要返回控制器不用于从服务器保存或检索数据，但可以用于对模型进行装饰，因为t他的路线正在返回模型，控制器在这个简单的数据练习中甚至不需要。
application.hbs 句柄模板是第3部分3个问题。没有设置正确显示通过路由提供给它的模型。有必要使用{{#each}}帮助器来循环通过路由的model方法返回的数据数组。尝试这样：
{{！ - 循环通过路线返回的'foo'模型 - }}
{{＃在模型中{#each foo}}
< h2>应用程序标题=< 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的基本方面。
I've successfully setup Ember CLI and Firebase and I'm attempting to bring some basic data into my templates. My 'title' and 'subtitle' data are apparent in the Ember Inspector, as well as my Firebase project dashboard. However, {{foo.title}} and {{foo.subtitle}} are coming back empty and undefined in the browser. Why is that? Here's my code:
application.js (adapter)
import DS from 'ember-data';
export default DS.FirebaseAdapter.extend({
firebase: new window.Firebase('https://<firebase-database-name>.firebaseio.com/')
});
foo.js (model)
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string'),
subtitle: DS.attr('string')
});
index.js (controller)
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 (route)
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.findAll('foo');
}
});
application.hbs (template)
<h2 id='title'>{{foo.title}}</h2>
{{outlet}}
index.hbs (template)
<h1>{{foo.title}}</h1>
<h3>{{foo.subtitle}}</h3>
The title and subtitle fail to display in the templates.
The Ember Inspector View Tree tab shows 'index' with 'DS.RecordArray:ember368' for the model.
The Ember Inspector Data tab shows Model Type of 'foo' with # Records of 1. When I click on that record, it displays the Firebase ID, title, and subtitle values. When I inspect my Firebase data url, I see the following structure:
firebase-database-name
|— foos
|— JU1Ay8emCNNZBeqYoda
|— subtitle: "Subtitle"
|— title: "Title"
Seems like everything is correct, but the templates do not display the data values. Thanks for any help.
The answer to this question centers on properly retrieving and exposing Ember Data, and not so much to do with Firebase or Ember CLI. There are multiple issues with the code above…
The foo.js code represents a simple model, and is written correctly.
The index.js route is implemented correctly. It is retrieving and returning the ‘foo’ model from the Ember Data store as an array, which, via EmberFire and the Firebase adapter, is ultimately being pulled from the Firebase database. However, this is part 1 of 3 problems. If you want this data displayed once across the application, dispense with the index.js route, and just define an application.js route, like this:
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.findAll('foo');
}
}
The index.js controller has a number of issues, and is part 2 of 3 problems. Firstly, controllers do not have a ‘model’ method, they only have a ‘model’ property (Ember Routes are the ones that employ a ‘model’ method, and can also set the ‘model’ property of a controller via a Route’s ‘setupController’ method). Secondly, instead of Ember.Controller, it needs to extend Ember.ObjectController for a singular data instance, or, Ember.ArrayController for an array of data, which is the controller needed here, since ‘this.store.findAll("foo")’ in the index.js route is going to return an array of objects. Controllers are not used to save or retrieve data from a server, but they can be used to decorate a model. Given that the route is returning the model, the controller, in this simple data exercise, is not even necessary.
The application.hbs handlebars template is part 3 of 3 problems. It is not setup to properly display the model that is being provided to it via the route. It’s necessary to employ the {{#each}} helper, to loop over the data array that is being returned via the route’s model method. Try this:
{{!-- 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}}
The index.hbs handlebars template is not necessary. The application.hbs template is sufficient to display the data of interest.
This is a very basic exercise, but illustrates fundamental aspects of using Ember Data properly.
这篇关于为什么我的Ember CLI生成的输出中Firebase数据不能正常显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
