emberjs v.1.13：模板中没有模型数据可访问，但在 ember 检查器中

Question

我是 emberjs 的新手，我对它感到不知所措。我尝试从模型 image 获取我的模型数据以显示在我的模板 index 中。我可以在浏览器的 ember 检查器中看到模型数据，但模板无法使用 Handlebars 打印出来。

我注意到我的模型记录没有 ID。是null.

\templates\index.hbs:

<form class="form">
    <label for="name">Name: </label>
    {{input class="form-control" type="text" value=imgurl}}
    {{input class="form-control" type="text" value=title}}
    <button class="btn btn-default" {{action "addImage"}}>Press it!</button>
</form>
{{#each image as |image|}}
    <p>{{this}}</p>
    {{else}}
    <p>Nothing!</p>
{{/each}}

\routes\image.js:

import Ember from 'ember';

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

\models\image.js:

import DS from 'ember-data';

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

\controllers\index.js:

export default Ember.Controller.extend({
    actions: {
        addImage: function(imgurl, title) {
            var model = this.store.createRecord('image', {
                imgurl: this.get('imgurl'),
                title: this.get('title')
            });
            model.save();
        }
     }
});

\router.js:

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
    this.route('/', {path: '/index'});
});

export default Router;

我觉得我的路线有问题。根据 Ember Inspector 的说法，我的索引路线没有关联模型。

Answer 1

在您的模板中，您应该将 {{each image as |image|}} 替换为 {{each model as |image|}}，并将 {{this}} 替换为 {{image.imgurl}} 或 {{image.title}}，具体取决于您的用例。

Answer 2

在您的应用 > 适配器 > application.js 文件中，是否显示 "DS.RESTAdapter.extend"？如果是这样，并且您没有后端，这可能是一个潜在原因。如果您只是构建一个测试项目，您可以在安装 Ember CLI 后按照以下步骤操作：

ember new test-image-project

现在将目录 (cd) 更改为 test-image-project 并执行：

ember generate model image
ember generate adapter application
ember generate route index

现在转到应用 > 适配器 > application.js 并更改

import DS from 'ember-data';
export default DS.RESTAdapter.extend({
  });

到

import DS from 'ember-data';
export default DS.FixtureAdapter.extend({
  });

现在转到应用 > 模型 > image.js 并粘贴以下代码：

import DS from 'ember-data';

var Image = DS.Model.extend({
  imgurl: DS.attr('string'),
  title: DS.attr('string')
});

Image.reopenClass({
    FIXTURES: [
        {
        id: 1,
        imgurl: "www.google.com",
        title: "google"
      },
        {
          id: 2,
          imgurl: "www.amazon.com",
          title: "amazon"  
        }
    ]
});

export default Image;

接下来在 app > routes > index.js

中做类似的事情

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(){
    return this.store.findAll('image');
  },
  actions: {
    addImage: function() {
            var controller = this.get('controller');
            var imgurl = controller.get('imgurl');
            var title = controller.get('title');
            return this.store.createRecord('image', {
                imgurl: imgurl,
                title: title
            });

        }
  }
});

在 app > templates > index.hbs:

中类似这样的东西

    <form class="form">
    <label for="name">Name: </label>
    {{input class="form-control" type="text" value=imgurl}}
    {{input class="form-control" type="text" value=title}}
    <button class="btn btn-default" {{action "addImage"}}>Press it!</button>
</form>
{{#each model as |image|}}
  {{#if image.imgurl}}
  <p>  {{image.imgurl}} </p>
    {{else}}
  <p>Nothing!</p>
  {{/if}}
{{/each}}

emberjs v.1.13：模板中没有模型数据可访问，但在 ember 检查器中

emberjs v.1.13: no model data in template accessible but in ember inspector

routes

ember.js