实现数据库 - 无法读取未定义的属性“initializedRelationships” - Ember js

Question

这是适配器 在 Ember Data 中，适配器确定数据如何持久保存到后端数据存储。后端主机、URL 格式和用于与 REST API 通信的标头等内容都可以在适配器中进行配置。

/* adapters/application.js */

import FirebaseAdapter from "emberfire/adapters/firebase";

export default FirebaseAdapter.extend({});

控制器是可路由对象，它从路由接收单个属性..这里是控制器

/* 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 Data 中，模型是代表应用程序呈现给用户的基础数据的对象。请注意，Ember Data 模型与 Routes 上的模型方法是不同的概念，尽管它们具有相同的名称.. 这是模型

/* 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 生成一个“路由”。这是路由

/* 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);
    });
  }
});

EmberRouter 类管理应用程序状态和 URL .. 这是路由器

/* 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 降级为：3.10.0”