Question

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

我注意到我的模特记录没有id。它是null。

\模板\ 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}}

\路由\ image.js：

import Ember from 'ember';

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

\模型\ image.js：

import DS from 'ember-data';

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

\控制器\ 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

在您的应用中＆gt;适配器＆gt; application.js文件，它说，＆＃34; DS.RESTAdapter.extend＆＃34;？如果是这样，并且您没有后端，这可能是一个潜在的原因。如果您只是构建测试项目，则可以在安装Ember CLI后执行以下步骤：

ember new test-image-project

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

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

现在转到app＆gt;适配器＆gt; application.js和更改

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

到

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

现在转到app＆gt;模型＆gt; 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中执行类似的操作＆gt;路线＆gt; 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中的类似内容＆gt;模板＆gt; 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检查器中

2 个答案: