1

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

<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');
    }
});

但我觉得从我为此目的定义的视图中打开面板更合适。这将使我能够访问视图，以便我可以对其中包含的 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/

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

4

2 回答 2

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>
于 2013-03-11T19:33:06.880 回答
1

更新：

方法一：

最简单的

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();
  }
});

小提琴

方法二：（关联控制器，更清洁）

使用 Handlebarsrender助手：这个助手所做的是将一个控制器与要显示的视图关联起来，这样我们就可以在这个控制器中处理与视图相关的所有逻辑，不同之处在于

 {{partial "myPartial"}}

只是渲染视图，而

{{render "myPartial"}}

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()

于 2013-03-12T10:43:50.280 回答