#each helper的正确语法是什么?

时间:2015-06-09 23:20:07

标签: ember.js ember-cli

因此,似乎Ember创建了一个控制器(因为我没有指定一个控制器)并将路由中定义的模型属性设置为控制器属性。

为什么循环使用以前版本中的数据的其他一些方法根本不输出数据?我是否错过了依赖关系或者只是删除了这些方法?

//这有效

<ul class="list-unstyled">
  {{#each post in model}}
  <li>
    {{post.title}}
  </li>
  {{/each}}
</ul>

// block params不起作用

<h2>Posts</h2>

<ul class="list-unstyled">
  {{ log posts }}
  {{#each posts as |post|}}
  <li>
    {{post.title}}
  </li>
  {{/each}}
</ul>

//也不是这个

<ul class="list-unstyled">
  {{#each}}
  <li>
    {{title}}
  </li>
  {{/each}}
</ul>

// api端点的http-mock

res.send({
  'posts': [
    {
      id: 1,
      title: "Bananas"
    },
    {
      id: 2,
      title: 'Apples'
    }
  ]
});

//路由/ posts.js

import Ember from 'ember';

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

//的package.json

  "devDependencies": {
    "broccoli-asset-rev": "^2.0.2",
    "ember-cli": "0.2.7",
    "ember-cli-app-version": "0.3.3",
    "ember-cli-babel": "^5.0.0",
    "ember-cli-content-security-policy": "0.4.0",
    "ember-cli-dependency-checker": "^1.0.0",
    "ember-cli-htmlbars": "0.7.6",
    "ember-cli-ic-ajax": "0.1.1",
    "ember-cli-inject-live-reload": "^1.3.0",
    "ember-cli-qunit": "0.3.13",
    "ember-cli-uglify": "^1.0.1",
    "ember-data": "1.0.0-beta.18",
    "ember-disable-proxy-controllers": "^1.0.0",
    "ember-export-application-global": "^1.0.2",
    "express": "^4.12.4",
    "glob": "^4.5.3",
    "morgan": "^1.5.3"
  }

//亭子

{
  "name": "blog",
  "dependencies": {
    "ember": "1.12.0",
    "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
    "ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
    "ember-data": "1.0.0-beta.18",
    "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.4",
    "ember-qunit": "0.3.3",
    "ember-qunit-notifications": "0.0.7",
    "ember-resolver": "~0.1.15",
    "jquery": "^1.11.1",
    "loader.js": "ember-cli/loader.js#3.2.0",
    "qunit": "~1.17.1"
  },
  "devDependencies": {
    "bootstrap": "~3.3.4"
  }
}

1 个答案:

答案 0 :(得分:1)

你是对的,Ember创建了post控制器(Ember.Controller类),并将模型属性设置为路由器模型承诺解决的帖子。

正确的方式:

{{#each model as |post|}}
   {{post.title}}
{{/each}}

对其他方式的评论:

{{#each post in model}} {{post.title}} {{/each}}也有效,但此语法已过时,将在Ember 2.0之路上弃用

{{#each}} {{title}} {{/each}} - 已弃用的each没有阻止参数,title这里是帖子控制器的属性,所以没有设置。

{#each posts as |post|}} {{post.title}} {{/each}}语法没问题,但帖子属性没有在帖子控制器中设置

弃用链接:

http://emberjs.com/deprecations/v1.x/#toc_more-consistent-handlebars-scope

http://emberjs.com/deprecations/v1.x/#toc_code-in-code-syntax-for-code-each-code

http://emberjs.com/deprecations/v1.x/#toc_objectcontroller