Question

我正在尝试在我的ember路径中使用已经实例化的控制器。

实例化控制器并想在路由中使用它是不正常的？我知道，如果我为应用程序为我实例化一个控制器，那么我可以router.get("myController")，但这不会访问我自己实例化的那个。

如何让路由器底部的代码段工作？

HTML

 <script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
 </script>


<script type="text/x-handlebars" data-template-name="instanced">
    <h1>Hello from instanced template</h1>
    {{showinstancedvalue}}<hr>
    {{outlet}}
</script>


<script type="text/x-handlebars" data-template-name="foobar">
    <h1>hello from foobar</h1>
    {{foobarvalue}}
</script>

的Javascript

var App = Ember.Application.create();
// application view and controller
App.ApplicationView = Ember.View.extend({
    templateName: 'application',
});
App.ApplicationController = Ember.Controller.extend();




// foobar controller and view
App.FoobarController = Ember.Controller.extend({
    foobarvalue: "working"
});
App.FoobarView = Ember.View.extend({
    templateName: 'foobar'
});



// instantiated controller and view
App.InstancedController = Ember.Controller.extend({});
App.instancedController = App.InstancedController.create({
    myvar: "a value from an instantiated controller"
});
App.InstancedView = Ember.View.extend({
    templateName: 'instanced',
});
App.instancedView = App.InstancedView.create({
    showinstancedvalueBinding: 'App.instancedController.myvar'
});

App.instancedView.append();

App.router = Ember.Router.create({
    enableLogging: true,
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            redirectsTo: 'works'
        }),
        works: Ember.Route.extend({
            route: '/works',
            connectOutlets: function(router) {
                router.get('applicationController').connectOutlet('foobar');
            }
        }),
        broken: Ember.Route.extend({
            route: '/broken',
            connectOutlets: function(router) {

                // no error in console, but foobar doesn't appear
                // router.get('instancedController').connectOutlet('foobar');

                // *** this one was my best guess as to what I thought would work ***
                // no error in console, but foobar doesn't appear
                // App.instancedController.connectOutlet('App.Foobar');

                // Uncaught Error: assertion failed: The name you supplied foobar did not resolve to a view FoobarView
                // App.instancedController.connectOutlet('foobar');
            }
        }),

    })
});

App.initialize(App.router);

Answer 1

查看connectOutlet定义，它包含一个基本文档作为注释，以便您可以更好地了解它应该如何使用或使用。

基本上，您应该将其连接到applicationController，因为{{outlet}}位于ApplicationView模板上。在这种情况下，框架将找到应该在该状态下使用的视图和控制器（在您的情况下为FoobarView和foobarController，因为它是使用参数'foobar'指定的）并添加到集合中（在controllers内命名applicationController}。如果您尝试直接连接到foobarController的实例，它将无法在其视图中找到一个插座（在那一刻不应该实例化，我相信）并且您要对该控制器说“嘿，发现自己，然后将自己与你联系起来“有点事。

如果你在foobar视图模板中有一个插座，并且你将这个插座连接到foobar以外的其他东西（作为子状态/路由），这可能会有效。因此，您应该阅读更多关于商店和指定商店的信息。

此外，我强烈推荐这些链接：

Router Primer - 这篇文章大约两个星期新鲜，现在显然是最好的，请务必阅读本文！
Ember.js Routing - the Director’s Cut - 有关路由器的分步发布信息，请务必仔细阅读本文。
Outlets - 这有点老了，但正在被保留
JSFiddle Sample 1 - 您可以使用路线的示例小提琴作为参考
JSFiddle Sample 2 - 您可以使用路线的示例小提琴作为参考（这比以前更新）

Answer 2

您应该尝试详细说明您的要求。从我的观点来看，这没有任何意义。

    broken: Ember.Route.extend({
        route: '/broken',
        connectOutlets: function(router) {
            App.foobarController.connectOutlet('foobar');
        }
    }),

此代码无法工作，因为您在fooBarController上调用connectOutlet。因此，它会在assigend视图中搜索{{outlet}}。但是在名为foobar的模板中，您没有指定{{outlet}}。即使你解决了这个问题，也没有任何意义，因为这一行会尝试将插座连接到新的Foobar View实例。所以你基本上有你的FooBarController的FooBarView，在它的视图中，你试图再次连接一个新的FooBarView实例？

因此，如果不解释要求，则无法回答此问题。

ember.js路由器和connectOutlets

2 个答案: