Question

在我的应用程序中，我会显示一个帐户列表，如下所示：

<script type="text/x-handlebars" data-template-name="accounts">
{{#each account in controller}}
    {{#linkTo "account" account class="item-account"}}
        <div>
            <p>{{account.name}}</p>
            <p>@{{account.username}}</p>
            <i class="settings" {{ action "openPanel" account }}></i>
        </div>
    {{/linkTo}}
{{/each}}
</script>

每个帐户都有一个按钮，允许用户打开包含该帐户设置的设置面板。正如你在这个快速的截屏视频中看到的那样：

http://screencast.com/t/tDlyMud7Yb7e

我目前正在AccountsController上的方法中触发面板的打开：

Social.AccountsController = Ember.ArrayController.extend({
    openPanel: function(account){
        console.log('trigger the panel');
    }
});

但我觉得从我为此目的定义的视图中打开面板更合适。这样我就可以访问View了，这样我就可以对其中包含的DOM进行操作。

Social.MainPanelView = Ember.View.extend({
    id: 'panel-account-settings',
    classNames: ['panel', 'closed'],
    templateName: 'mainPanel',
    openPanel: function(){
        console.log('opening the panel');
    }
});

<script type="text/x-handlebars" data-template-name="mainPanel">
    <div id="panel-account-settings" class="panel closed">
        <div class="panel-inner">
            <a href="#" class="button button-close"><i class="icon-cancel"></i>close</a>
            <h3>Account Settings</h3>
            <a href="/accounts/social/connections/" class="button button-disconnect">Disconnect Account</a>
        </div>
    </div>
</script>

我遇到的问题是我没有看到如何从Social.MainPanelView的上下文触发AccountsController上的方法。有更好的解决方案吗？

更新1

我做了一个小提琴来说明我在说什么：

http://jsfiddle.net/UCN6m/

您可以看到，当您单击按钮时，它会调用App.IndexController上的showPanel方法。但我希望能够调用App.SomeView上的showPanel方法。

Answer 1

您需要使用操作助手而不是直接编码链接。操作助手默认以控制器为目标，但您可以将其更改为目标视图：

<a {{action openPanel target="view"}}></a>

您的第二个链接应该是一个路由链接，因为您指定了指向另一个资源的链接。修改后的整个片段：

Social.MainPanelView = Ember.View.extend({
    id: 'panel-account-settings',
    classNames: ['panel', 'closed'],
    templateName: 'mainPanel',
    openPanel: function(){
        console.log('opening the panel');
    }
});

<script type="text/x-handlebars" data-template-name="mainPanel">
    <div id="panel-account-settings" class="panel closed">
        <div class="panel-inner">
            <a {{action openPanel target="view"} class="button button-close"><i class="icon-cancel"></a></i>
            <h3>Account Settings</h3>
            {{#linkTo "connections"}}Disconnect Account{{/linkTo}}
        </div>
    </div>
</script>

Answer 2

更新

方法一：

最简单的

Social.AccountsController = Ember.ArrayController.extend({
  openPanel: function(account){
    /* we can get the instance of a view, given it's id using Ember.View.views Hash
       once we get the view instance we can call the required method as follows
    */
    Ember.View.views['panel-account-settings'].openPanel();
  }
});

Fiddle

方法二:(关联控制器，更清洁）

使用Handlebars render帮助器：这个帮助器的作用是将控制器与要显示的视图相关联，这样我们就可以处理与此视图相关的所有逻辑控制器，差异是

 {{partial "myPartial"}}

只需渲染视图，而

{{render "myPartial"}}

除了呈现视图Fiddle

之外，

将App.MyPartialController关联呈现的视图

现在您可以按照以下更新代码

application.handlebars （您想要渲染视图的地方）

{{render "mainPanel"}}

帐户控制器

Social.AccountsController = Ember.ArrayController.extend({
  openPanel: function(account){
    this.controllerFor("mainPanel").openPanel();
  }
});

主面板视图

Social.MainPanelView = Ember.View.extend({
  id: 'panel-account-settings',
  classNames: ['panel', 'closed']
});

主面板控制器

Social.MainPanelController = Ember.Controller.extend({
  openPanel: function(){
    console.log('opening the panel');
  }
})

方法三： 这是实现方法二的手动方式

Social.MainPanelView = Ember.View.extend({
  id: 'panel-account-settings',
  controllerBinding: 'Social.MainPanelController',
  classNames: ['panel', 'closed'],
  templateName: 'mainPanel'
});

Social.MainPanelController = Ember.Controller.extend({
  openPanel: function(){
    console.log('opening the panel');
  }
})

使用this.controllerFor("mainPanel").openPanel()

从模板中触发视图的显示

2 个答案:

更新

方法一：

方法二:(关联控制器，更清洁）