模型,命名和这个

时间:2014-12-09 20:09:16

标签: javascript ember.js handlebars.js

在EmberJS'上运行the starter tutorial时网站,现在有些事让我有些困惑。

有一点需要注意的是,我决定使用带有把手2.0.0的ember 1.9.0beta4而不是初学者包中的1.8.1 / 1.3.0。

首先是截屏视频中包含的代码:

app.js

App.Router.map(function() {
  this.resource('about');
  this.resource('posts');
  this.resource('post', {path: ':post_id'})
});

App.PostsRoute = Ember.Route.extend({
  model: function() {
    return posts;
  }
});

index.html

{{#each model}}
  <tr><td>
    {{#link-to 'post' this}}
      {{title}} <small class='muted'>by {{author.name}}</small>
    {{/link-to}}
  </td></tr>
{{/each}}

这与预期完全一致,单击时会显示请求的帖子。

但是,因为我使用的是1.9.0,所以前面的代码会为{{#each}}生成一个已弃用的警告,告诉我改为使用{{#each foo in bar}}。我理解为什么会出现并同意详细程度有助于准确显示正在循环的数据。

所以我将行{{#each model}}更改为{{#each post in model}}并且每一位数据都消失了......然后我尝试将代码更改为:

updated index.html

{{#each post in model}}
  <tr><td>
    {{#link-to 'post' this}}
      {{post.title}} <small class='muted'>by {{post.author.name}}</small>
    {{/link-to}}
  </td></tr>
{{/each}}

大!每个帖子都会再次出现标题和作者姓名。但是点击任一帖子会给我一个未定义的id。我将{{#link-to 'post' this}}更改为{{#link-to 'post' this.id}}。结果相同。我将其更改为{{#link-to 'post' post.id}}。现在包含id但是当我点击链接时出现此错误:

Error while processing route: post Assertion Failed: You used the dynamic segment
post_id in your route post, but App.Post did not exist and you did not override
your route's `model` hook.

我的问题是:

  1. 如果只包含post.代码,内部会发生什么强制post in前缀?对我来说,我应该可以使用this或继续不需要任何前缀。

  2. post in添加到每个语句后,this会发生什么?为什么它不再引用同一个对象?

  3. 如何命名模型以便于分类? post in model应该post in posts,但我还没有办法为数据容器命名。

  4. 由于我不再将模型称为this,导致错误的原因是什么?怎么可以补救?

2 个答案:

答案 0 :(得分:1)

您的挫败感和问题正是为什么不推荐使用第一种语法并且仅支持each post in ...表单的原因。希望这能回答您的问题,如果您需要澄清,请回复。

  1. 在您使用each model的第一个示例中,块的范围更改为帖子,这意味着this指的是循环中的当前帖子。当您使用表单each post in ...时,范围不会更改。当它没有改变时,这意味着this实际上指的是前一个范围(循环之前)。在您的示例中,前一个范围是数组控制器,而不是post对象。

  2. 这与问题1有关。使用each post in ...格式,this指的是each块之外的任何内容。 this并没有发生任何事情,this发生 事件,因为范围没有变化。< / p>

  3. 为了更好地命名,我通常会将属性设置为数组控制器中内容的别名:

    posts: Ember.computed.alias('content')

  4. 在原始示例中,当您向link-to提供this帮助时,您将传递完整的帖子对象。根据您的尝试,看起来这是您没有做过的事情:

    {#link-to 'post' post}}

答案 1 :(得分:1)

我会尝试按顺序回答你的问题:

  1. 当您说{{#each model}}循环浏览模型中的帖子(数组)时,每次循环this都指的是当前帖子。因此,当您说{{title}}时,您实际上是在说{{this.title}}当您通过说{{#each post in model}}更加明确时,循环中的每次迭代都不再是this,而是指你所做的变量名为post

  2. 如上文#1中所述,this不再引用每个单独的迭代。我理解你是怎么想的,或许仍然能够使用this(和post一起)会很方便,但请考虑以下场景。嵌套{{#each}}时会发生什么?隐式this是否会引用外部数组或内部数组?如果您真的不想输入额外的post.,则可以始终使用范围为{{#with post}} post this的{​​{1}}把手助手。请参阅以下示例{{ 3}}

  3. 如果您的模型或控制器中有属性,则绝对可以在{{#each color in colors}}中查看该属性,并参阅here了解工作示例

  4. 最后,link-to应为{{#link-to 'post' post}}