如何将控制器连接到Ember中的视图

时间:2012-10-03 04:19:48

标签: ember.js

我认为我在理解控制器加载的数据应如何绑定并可用于视图时遇到问题。出于这个问题的目的,我制作了a small example in jsFiddle,它使用ember-rest来加载数据。

正如您在jsFiddle中所看到的,我希望在此示例中实现的是将testData绑定到使用BlockView模板呈现的blocki。在Ember中这样做的适当方法是什么?

要了解小提琴在正常运行时的样子,请将绑定替换为blocksController以直接绑定到testData。我在another version of the jsFiddle中完成了这项工作。

{{view App.BlockView blockiBinding="App.testData" }}

当然在这个版本中块可以正常渲染 - 但这不是我想要的方式。我想学习如何正确(按照Ember的建议)将blockController连接到视图并从中获取数据。在实际场景中,数据将从REST API获取,这就是我在此示例中使用ember-rest的原因。

如果您使用忍者动作修复that jsFiddle,请花几秒时间解释它背后的概念。我发现很难获得有关此信息的最新信息。谢谢!

2 个答案:

答案 0 :(得分:4)

使用可以将视图与控制器连接 a)适当的命名方案 b)连接插座

例如,如果你有一个视图BlockView,你应该有一个控制器BlockController。然后从视图中可以直接访问控制器的内容。

App.BlockView = Ember.View.extend({
  templateName: 'block'
});

App.BlockController = Ember.ObjectController.extend({
  block: { name: 'block 1', children: [ {name: 'child1' }, {name: 'child2'}] }
});

<script type="text/x-handlebars" data-template-name="block" >
   <div>Block Name: {{block.name}}</div>
   {{#each child in block.children}}
     <div>Child Name: {{child.name}}</div>
   {{/each}}
</script>

我在代码示例中也遗漏的是路由器。这一个负责所有组件的适当“粘合”。看一下Trek教程中的路由器(这是最新的,代表了应用程序的编写方式)。

在路由器中,您将定义connectOutlets方法,在该方法中加载应呈现到插座中的视图。如果您坚持使用上面的命名方案,您可以从视图直接访问控制器

<强>更新

我的代码运行了一些修改:

  • 您无需自行启动控制器。 App.initialize()将为您处理
  • 我将资源控制器修改为对象控制器并删除了资源块,但这当然与ObjectController没有什么不同。只是为了基本的理解使用普通的ember.js对象可以让你的生活更轻松。
  • 用JavaScript而不是咖啡脚本 - 抱歉:D

不幸的是我无法创建一个jsFiddle(不要问为什么 - 没有线索:))。所以我已将数据添加到GIST - https://gist.github.com/3832764

更新2

我还设法创建了一个JSFiddle http://jsfiddle.net/qV5wu/2/:)

答案 1 :(得分:0)

阅读http://trek.github.com/并查看是否对您有所帮助。从我所看到的小提琴中,你所拥有的例子与教程中提供的非常相似。

特别是我要看的区域是connectOutlet。

希望有所帮助。