ember.js - 从不相关的控制器更改视图属性

Question

我有以下看法：

App.MessageTrayView = Bootstrap.AlertMessage.extend({
    message: 'This is a message.',
});

在此模板中显示：

  <script type="text/x-handlebars" data-template-name="nodes">
    <article>
      <form class="form-horizontal">
        <fieldset>

          {{view App.MessageTrayView id="message-tray-view"}}

          <div id="legend" class="">
            <legend class="">Nodes&nbsp;&nbsp;&nbsp;<span class="badge">{{controllers.nodesIndex.length}} records</span>
            <div class="pull-right">
              <a {{action destroyAllRecords}}><i class="icon-remove-circle"></i><a/>
              {{#linkTo "nodes.new" class="btn btn-primary"}}Add Node{{/linkTo}}
            </div>
            </legend>
          </div>

          {{outlet}}

        </fieldset>
      </form>
    </article>
  </script>

而这个不相关的控制器：

App.NodesIndexController = Ember.ArrayController.extend({
    destroyAllRecords: function () {
        console.log('destroyAllRecords called');
        App.MessageTrayView.set('message', 'All nodes have been deleted');
    },
});

我想在destroyAllRecords触发后立即更改显示的消息。这不起作用（控制台中的错误消息告诉我我在做某事*非常*错误）。如何更改message属性，以使更改在页面上直接可见？

你可以在这里看到代码

Answer 1

一种快速的方法是在App命名空间上定义一个属性：

App = Ember.Application.create({
  messageTrayContent: ''
});

然后在您的视图中使用Binding属性名称后的后缀绑定到它：

App.MessageTrayView = Bootstrap.AlertMessage.extend({
  messageBinding: 'App.messageTrayContent'
});

现在做：

App.NodesIndexController = Ember.ArrayController.extend({
  destroyAllRecords: function () {
    console.log('destroyAllRecords called');
    App.set('messageTrayContent', 'All nodes have been deleted');
  },
});

应该管用。

希望能帮助到你。