EmberJS - 如何从子控制器中访问父控制器?

时间:2013-10-08 16:22:24

标签: javascript ember.js

我有一个ProfilesController和一个ProfileController代表一个个人资料。

// Profiles listing
App.ProfilesController = Ember.ArrayController.extend({

});

// Single Profile representation
App.ProfileController = Ember.ObjectController.extend({

    isActive: false,

    actions: {

        edit: function() {

            // TODO: disable all profiles
            // does not work ... parentController is undefined. pseudo code only!
            this.get('parentController.children').forEach(function(profile) {
                profile.set('isActive', false);
            });

            // enable current profile
            this.set('isActive', true);
        }
    }
});

请注意,这不是完整的代码,这两个控制器在我的应用程序中有更多的代码,还有一个ProfileView使配置文件列表成为可能。

重要的是如何从ProfileController中访问父ProfilesController(ArrayController)?

我尝试过(在编辑操作中):

this.get('parent') // => undefined
this.get('parentController') // => null
this.get('target') // => null

编辑:同时我走下了对象树,我想出了一个令人难以置信的hacky但工作正常的解决方案:

// disable all profiles
this.get('controllers.profiles.target._activeViews.profiles.0._childViews.0._childViews').forEach(function(childView) {
    childView.get('_childViews.0.controller').set('isActive', false);
});

直到我改变模板结构中的某些内容,我才会这样做。必须有一个更清洁的方法来做到这一点:-D

编辑2 :为了澄清一点,这里是我的个人资料模板,其中profiles是个人资料模型的集合(不是控制器!每个模型都由控制器代表,因为我必须存储应用程序状态,如当前活动配置文件等):

{{#each profile in profiles}}
    {{view App.ProfileView profileBinding=profile}}
{{/each}}

和ProfileView

App.ProfileView = Ember.View.extend({

     templateName: 'profiles/profile',

     init: function() {
         this._super();
         var profile = this.get('profile');

         // Here I explicitely create a ProfileController instance, 
         // otherwise ProfilesController would be used instead of ProfileController 
         // because in EmberJS by default the View's controller is always the parent controller
         this.set('controller', App.ProfileController.create());
         var controller = this.get('controller');
         controller.set('profile', profile);            
     }
});

2 个答案:

答案 0 :(得分:4)

您可以在itemController循环中设置each属性,这样就不必手动创建ProfileController

{{#each profile in profiles itemController="profile"}}
    {{view App.ProfileView profileBinding=profile}}
{{/each}}

然后,您可以使用needs确保将ProfilesController的引用注入每个ProfileController。您可以使用this.get('controllers.profiles')来访问ArrayController本身。如果您正在使用Ember Way,则需要访问该控制器的content属性(this.get('controllers.profiles.content'))。看起来你没有这样做Ember Way,而是将集合添加到该控制器的profiles属性而不是content属性。在这种情况下,您将使用this.get('controllers.profiles.profiles')profiles的第一个实例获取ProfilesController,第二个实例获取在该控制器上设置的profiles属性。

App.ProfileController = Ember.ObjectController.extend({
    needs: ['profiles'],
    actions: {
        edit: function() {

            this.get('controllers.profiles.profiles').forEach(function(profile) {
                profile.set('isActive', false);
            });

            // enable current profile
            this.set('isActive', true);
        }
    }
});

答案 1 :(得分:1)

你想让它隐含(就像使用super的任何其他语言一样)或者是否足以命名你想要显式访问的控制器?

请参阅此链接:http://eviltrout.com/2013/02/04/ember-pre-1-upgrade-notes.html

在你的情况下,它将是:

App.ProfileController = Ember.ObjectController.extend({
    needs: ['profiles'],
    actions: {
        edit: function() {

            this.get('controllers.profiles').forEach(function(profile) {
                profile.set('isActive', false);
            });

            // enable current profile
            this.set('isActive', true);
        }
    }
});