了解具有ember.js的模型/控制器/模板 [英] Understanding Models/Controllers/Templates with ember.js
问题描述
我正在尝试学习ember.js，并且困难的时候试图使它之间的连接。我已经浏览了ember.js提供的教程，但仍然有点困惑。
I'm trying to learn ember.js and having a difficult time trying to make the connection between it all. I've gone through the tutorials provided on ember.js, but still a bit confused.
该模型包含将保存在服务器上的数据。控制器可以访问模型的数据，并可以对其进行装饰（添加显示数据）并将其发送到模板本身。
The model contains the data that will be saved on the server. The controller has access to the model's data and can decorate it (add its on display data) and send that to the template itself.
在示例中，他们使用路由类实际上从模型中获取数据。他们将路由与模型相关联，只需调用.find（），并且find（）将返回模型中的数据列表。
In the examples, they use the route class to actually get the data from the model. They associate the route with a model and just call .find() and that find() return you the list of data from the model.
我只使用一个路线在我的例子中：
I'm only using one route in my example:
我的问题是：
- 来自控制器的模型的数据
- 控制器可以从多个模型获取数据吗？如果是这样，那么这个怎么做？
- 如果控制器有多个与之相关的功能，那么你如何在模板中触发正确的功能。
任何示例都会帮助...我一直在搜索，在大多数情况下，他们处理一个简单的情况，其中一个控制器与一个模型链接，控制器与一个模板相关联。如果模板想要使用多个控制器，会发生什么？
Any examples would help... I've been searching around and in most cases they deal with the simple case where there is one controller linked with one model and the controller is linked with one template. What happens if the template wants to use more then one controller?
参考Mike的多控制器模板示例：
In Reference to Mike's example of Template to multiple controllers:
//index.html
<script type="text/x-handlebars" id="index">
<div {{action getMessage}} > </div>
<div {{action getTest}} > </div>
{{#each App.menuController}}
{{title}}
{{/each}}
</script>
// app.js
App.ChatController = Ember.Controller.extend({
getMessage: function() { alert("getMessage Called"); }
});
App.MenuOption = Ember.Object.extend({
title: null,
idName: null
});
App.MenuController = Ember.ArrayController.create({
content:[],
init : function()
{
// create an instance of the Song model
for(var i=0; i<menuOptions.length; i++) {
console.debug(menuOptions[i]);
this.pushObject(menuOptions[i]);
}
},
getTest: function() { alert("getTest Called"); }
});
//router.js
App.Router.map(function () {
this.resource('index', { path: '/' });
});
App.IndexRoute = Ember.Route.extend({
model: function () {
return ['a','b', 'c' ];
},
setupController: function(controller, model) {
controller.set('content', model);
},
});
App.IndexController = Ember.Controller.extend({
needs: "index"
});
从上面可以看出我有一条路由索引。在默认的索引模板中，我试图找出如何调用多个控制器的动作。在这种情况下，我想调用属于App.ChatController&属于App.MenuController的getTest。目前，getTest没有为模板的控制器index定义，并且还没有被IndexRoute定义。所以你使用需要将MenuController链接到IndexController，以便我可以调用控制器的getTest方法。
From the above, as you can see I have one route "index." Within the default index template, I'm trying to figure out how to call multiple controller's action. In this case, I want to call "getMessage" which belong to App.ChatController & "getTest" which belong to App.MenuController. Currently, the "getTest" is not defined for the template's controller "index" and has not be defined by the IndexRoute as well. So do you use "needs" to link the MenuController to the IndexController so i can call the controller's getTest Method.
更新----------- -----------------------
Updated ----------------------------------
我结束了渲染路线
App.IndexRoute = Ember.Route.extend({
model: function () {
return ['a','b', 'c' ];
},
renderTemplate: function () {
this.render();
this.render('menu', { outlet: 'menu', into: 'application', controller: App.menuController });
this.render('userList', { outlet: 'userList', into: 'application', controller: App.UserListController });
}
});
这允许我为每个特定渲染指定一个特定的控制器。
This allowed me to specify a specific controller for each specific rendering.
任何建议赞赏，
谢谢
D
Any advice appreciated, Thanks, D
推荐答案
如何从控制器获取模型中的数据
How do you grab data from the model from the controller
默认情况下，路由的模型（由路线的模型钩子）将被注入到控制器中，并且可以通过控制器的内容属性（也被别名为 model ）。
By default, a route's model (the object retured by the route's model hook) will be injected into the controller and can be accessed via the controller's content property (also aliased as model).
控制器可以从多个模型获取数据吗？如果是这样，那怎么做？
Can a controller get data from more then one model? If so, how is this done?
是的，这是可能的。可以在路由器的 setupController 钩子的控制器上设置其他模型。那就是说在大多数情况下你会想使用多个控制器。
Yes it is possible. Additional models can be set on a controller from a route's setupController hook. That said in most cases you will want to use multiple controllers.
如果控制器有多个控制器，那么你怎么触发正确的模板。
If the controller has more then one function associated with it, how do you trigger the right one within the template.
通过句柄触发控制器功能 {{action}} helper。该帮助器的第一个参数是要触发的函数的名称。所以 {{actionsave}} 将触发控制器的保存函数和 {{动作取消}} 触发取消功能。
Controller functions are triggered via the handlebars {{action}} helper. The first parameter to that helper is the name of the function to trigger. So {{action "save"}} will trigger the controller's save function and {{action "cancel"}} triggers the cancel function.
任何例子都有帮助...我一直在搜索，在大多数情况下，它们处理一个简单的情况，其中有一个控制器与一个模型链接，并且控制器与一个模板链接。
Any examples would help... I've been searching around and in most cases they deal with the simple case where there is one controller linked with one model and the controller is linked with one template.
很难找到这样的例子的原因是因为它不是最佳实践。确定它是可能将一个控制器链接到多个模型或使用多个控制器的模板，但这不是一个好主意。
The reason it's hard to find examples like that is because it's not a best practice. For sure it is possible to have one controller linked to multiple models or a template that uses multiple controllers but it's just not a good idea.
如果模板想要使用多个控制器，会发生什么？
What happens if the template wants to use more then one controller?
从技术上讲，这可以通过使用全局变量，但请不要。控制器非常轻巧。每个模板都得到它自己的控制器。如果模板需要来自其他控制器的数据，则控制器应该使该数据可用。这可以通过需要属性来完成。请参阅管理控制器之间的依赖关系
Technically this could be done by using global variables but please don't. Controllers are very lightweight. Each template gets it's own controller. If a template needs data from other controllers then it's controller should make that data available. This can be done via the needs property. See managing dependencies between controllers
{{each message in messages}}
{{message.username}}: {{message.text}}
{{/message}}
{{input valueBinding="text"}}
<button {{action send}}>Send</button>
App.ChatController = Ember.Controller.extend({
needs: ['messages', 'currentUser'],
messagesBinding: 'controllers.messages'
send: function() {
var message = App.Message.createRecord({
username: this.get('username'),
text: this.get('text')
});
message.save();
this.set('text', '');
}
})
这篇关于了解具有ember.js的模型/控制器/模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
