emberjs v.1.13：在模板中沒有模型數據可訪問，但在餘燼檢查器中

我是新來的emberjs，我很不知所措。我嘗試從模型image中獲取我的模型數據以顯示在我的模板index中。我可以在瀏覽器中看到模型數據，但模板不能用Handlebars打印出來。emberjs v.1.13：在模板中沒有模型數據可訪問，但在餘燼檢查器中

我注意到我的模型記錄沒有標識。它是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') 
});

\控制器\指標.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，我的索引路線沒有任何模型。

來源

2015-09-03 CodeShark

在您的應用>適配器> application.js文件中，是否說「DS.RESTAdapter.extend」？如果是這樣，並且你沒有後端，這可能是一個潛在的原因。如果你只是建立一個測試項目，你可以按照以下步驟安裝灰燼CLI後：

ember new test-image-project

現在更改目錄（CD）進入測試圖像項目做：

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;

下一步做應用>路線是這樣的> 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 
      }); 

     } 
    } 
});

和這樣的事情in 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}}

來源

2015-09-04 08:01:21 learningMachine

感謝您的幫助。這是我需要的。我很驚訝，我並不知道我必須設置適配器並定義FIXTURES。 – CodeShark

在您的模板，你應該{{each model as |image|}}取代{{each image as |image|}}，並根據您的使用情況{{image.imgurl}}或{{image.title}}更換{{this}}。

來源

2015-09-04 01:57:47 rmmmp

謝謝，你幫了我！ – CodeShark

emberjs v.1.13：在模板中沒有模型數據可訪問，但在餘燼檢查器中

回答

相關問題