我使用"编辑事件构建一个简单的页面"形式和底部的消息线程。
<script type="text/x-handlebars" id="stack">
<div class='stack'>
<div class="container">
<div class="row">
<div class="span12" style="text-align:center; margin: 0 auto;">
{{#if isEditing}}
{{partial 'stack/edit'}}
<button {{action 'doneEditing'}}>Done</button>
{{else}}
<button {{action 'edit'}}>Edit</button>
{{/if}}
<h1>{{stack.title}}</h1>
<h2>at {{stack.date}} <small class='muted'>({{format-date date}})</small></h2>
<hr>
<div class='intro'>
{{stack.location}}
</div>
<div class='below-the-fold'>
{{stack.details}}
</div>
<div class="chatbox jumbotron">
<ul id="messageList">
{{#each}}
<li>{{username}} : {{stack.message}}</li>
{{/each}}
</ul>
</div>
<form {{action "sendMessage" on="submit"}}>
<p>{{input type="text" placeholder="username" value=username disabled=entryNotAllowed size="15"}}
{{input type="text" placeholder="where?" value=stack.message disabled=entryNotAllowed size="50"}}</p>
<button class="btn" {{action "sendMessage"}}>Send</button>
</form>
</div>
</div>
</div>
</div>
</div>
</script>
我需要两个不同的控制器(一个用于事件编辑,一个用于创建消息)。我使用ArrayController进行事件编辑,使用ObjectController进行创建消息。我如何把这两个放在一条路线上?
App.StackController = Ember.ArrayController.extend({
isEditing: false,
actions: {
edit: function() {
this.set('isEditing', true);
},
doneEditing: function() {
this.set('isEditing', false);
},
}
});
App.MessageController = Ember.ObjectController.extend({
init: function() {
this.set('message', Ember.Object.create());
},
actions: {
sendMessage: function() {
var newMessage = this.store.createRecord('message', {
username: this.get('username'),
message: this.get('stack.message'),
});
newMessage.save();
alert('newMessage' + " is submitted!");
},
}
});
我尝试使用FormComponent,但是this.store.createRecord在组件内部不起作用。我应该使用View吗?
答案 0 :(得分:1)
您可以通过needs api公开其他控制器。
请参阅http://emberjs.com/guides/controllers/dependencies-between-controllers/
App.StackController = Ember.ArrayController.extend({
needs : ['message'],
isEditing: false,
actions: {
edit: function() {
this.set('isEditing', true);
},
doneEditing: function() {
this.set('isEditing', false);
},
}
});
在您的操作助手中,您可以定位此控制器。
<button class="btn" {{action "sendMessage" target=controllers.message}}>Send</button>