实施数据库 - 无法读取未定义的属性 'initializedRelationships' - Ember js

Question

这是适配器在 Ember Data 中，Adapter 确定数据如何持久保存到后端数据存储。诸如后端主机、URL 格式和用于与 REST API 通信的 headers 之类的东西都可以在适配器中配置。

/* adapters/application.js */

import FirebaseAdapter from "emberfire/adapters/firebase";

export default FirebaseAdapter.extend({});

控制器是可路由的 object 从路由接收单个属性 .. 这里是控制器

/* controllers/cars.js */

import Controller from "@ember/controller";

export default Controller.extend({
  actions: {
    deleteCar(id) {
      this.get("store")
        .findRecord("car", id, { reload: true })
        .then(car => {
          car.destroyRecord();
          car.save();
          //self.transitionToRoute("cars");
         });
    }
  }
});

/* controllers/cars/edit.js */

import Controller from "@ember/controller";

export default Controller.extend({
  actions: {
    editCar: function(id) {
      var self = this;
      var make = this.get("model.make");
      var model = this.get("model.model");
      var year = this.get("model.year");
      this.store.findRecord("car", id).then(function(car) {
        car.set("make", make);
        car.set("model", model);
        car.set("year", year);
        car.save();
        self.transitionToRoute("cars");
      });
    }
  }
});

/* controllers/cars/new.js */

import Controller from "@ember/controller";

export default Controller.extend({
  actions: {
    addCar: function() {
      var self = this;
      var rand = Math.floor(Math.random() * 10000 + 1);
      var newCar = this.store.createRecord("car", {
        id: rand,
        make: this.get("carMake"),
        model: this.get("carModel"),
        year: this.get("carYear")
      });
      newCar.save();
      self.transitionToRoute("cars");
    }
  }
});

在 Ember 数据中，模型是 object 代表您的应用程序呈现给用户的基础数据。请注意，Ember 数据模型与路由上的模型方法是不同的概念，尽管它们共享相同的名称..这是模型

/* models/cars.js */

import DS from "ember-data";

export default DS.Model.extend({
  make: DS.attr("string"),
  model: DS.attr("string"),
  year: DS.attr("string")
});

在Ember中，当我们想制作一个可以使用URL访问的新页面时，我们需要使用Ember CLI生成一个"route"。 . 这是路线

/* routes/cars.js */

import Route from "@ember/routing/route";

export default Route.extend({
  model() {
    return this.store.findAll("car", {
      orderBy: "make"
    });
  }
});

/* routes/cars/edit.js */

import Route from '@ember/routing/route';

export default Route.extend({});

/* routes/cars/new.js */

import Route from "@ember/routing/route";

export default Route.extend({
  model() {
    return this.store.findAll("car");
  }
});

/* routes/users.js*/

import Route from "@ember/routing/route";
import $ from "jquery";

export default Route.extend({
  model: function() {
    var url = "https://api.github.com/users";
    return $.getJSON(url).then(function(data) {
      return data.splice(0, 10);
    });
  }
});

Ember路由器class管理应用程序状态和URLs ..这是路由器

/* router.js */

import EmberRouter from "@ember/routing/router";
import config from "./config/environment";

const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route("cars", function() {
    this.route("new");
    this.route("edit", { path: "/edit/:car_id" });
  });
  this.route("users");
});

export default Router;

模板用于创建跨多个页面的标准布局。当您更改模板时，基于该模板的页面会自动更改。模板提供标准化控制。

<!-- templates/users.hbs -->

<h1>Github Users</h1>
<ul>
  {{#each model as |user|}}
    <li>{{user.login}}</li>
  {{/each}}
</ul>

<!-- templates/car.hbs -->

{{#link-to "cars.new"}}Create Car{{/link-to}}
<hr>
{{outlet}}
<h1>Cars</h1>
<ul>
  {{#each model as |car|}}
    <li>
      {{car.year}} {{car.make}} {{car.model}} -
      {{#link-to "cars.edit" car.id}}Edit{{/link-to}}
      <button {{action "deleteCar" car.id}}>Delete</button>
    </li>
  {{/each}}
</ul>

<!-- templates/application.hbs -->

{{outlet}}

<!-- templates/cars/new.hbs -->

<form {{action "addCar" on="submit"}}>
  <p>Make: {{input type="text" value=carMake}}</p>
  <p>Model: {{input type="text" value=carModel}}</p>
  <p>Year: {{input type="text" value=carYear}}</p>
  <p>{{input type="submit" value="submit"}}</p>
</form>

<!-- templates/cars/edit.hbs -->

<form {{action "editCar" model.id on="submit"}}>
  <p>Make: {{input type="text" value=model.make}}</p>
  <p>Model: {{input type="text" value=model.model}}</p>
  <p>Year: {{input type="text" value=model.year}}</p>
  <p>{{input type="submit" value="Submit"}}</p>
</form>

运行

Uncaught TypeError: Cannot read property 'initializedRelationships' of 
undefined
https://i.stack.imgur.com/y7Ax0.png

这是我的应用程序 drive link

Answer 1

当我remove the findAll query inside model hook时错误消失了。这可能是 firebase 配置错误。

您错过了输入以下配置。确保你的 app/config/environment.js

中包含所有这些变量

var ENV = {
  firebase: {
    apiKey: "your-api-key",
    authDomain: "YOUR-FIREBASE-APP.firebaseapp.com",
    databaseURL: "https://YOUR-FIREBASE-APP.firebaseio.com",
    projectId: "YOUR-FIREBASE-APP",
    storageBucket: "YOUR-FIREBASE-APP.appspot.com",
    messagingSenderId: "00000000000"
  }
}

我的应用程序在 firebase 上运行良好。请按照 here

中的逐步方法进行操作

您已经安装了 emberfire、

的稳定版和最新版

"emberfire": "^2.0.10",
"emberfire-exp": "^3.0.0-rc.1-4",

这是没有必要的。安装任一版本。

Answer 2

如果您正在使用 ember-cli 3.12.0，当您在默认情况下与您的应用程序创建 firebase 连接时，"emberfire/adapters/firebase" 将自动导入 adapters/application.js， 这不是真的。

`/* adapters/application.js */

import FirebaseAdapter from "emberfire/adapters/firebase";

export default FirebaseAdapter.extend({});`

去那里编辑导入到"emberfire/adapters/firestore"。

`import FirebaseAdapter from 'emberfire/adapters/firestore';

export default FirebaseAdapter.extend({

});`

并在 package.json

中降级您的 "ember-source to : 3.10.0"

实施数据库 - 无法读取未定义的属性 'initializedRelationships' - Ember js

Implementing a Database - Cannot read property 'initializedRelationships' of undefined - Ember js

ember.js

firebase

emberfire

firebase-realtime-database

实施数据库 - 无法读取未定义的 属性 'initializedRelationships' - Ember js

Implementing a Database - Cannot read property 'initializedRelationships' of undefined - Ember js

ember.js

firebase

emberfire

firebase-realtime-database

实施数据库 - 无法读取未定义的属性 'initializedRelationships' - Ember js