我的Ember应用需要两个控制器用于一条路线

时间:2015-03-13 23:58:43

标签: ember.js

我使用"编辑事件构建一个简单的页面"形式和底部的消息线程。

<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吗?

1 个答案:

答案 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>