Ember.js中的路由和嵌入式视图/控制器链接

时间:2014-06-17 09:15:30

标签: javascript model-view-controller ember.js url-routing

Ember.js中的路由让我很烦恼,我似乎无法找到正确的#34;做我想做的事。

我有一条路线,让我们称之为#/ map,其中包含一系列顶级和子视图容器。

在层次上,我有一个顶级的map_view,其中包含4个额外的视图:一个顶部栏(其中包含顶部栏菜单项触发器),一个侧边栏(其中包含侧边栏菜单项触发器)和两个containerViews(一个侧边栏菜单) containerView和topbar菜单containerView),它将包含一个或多个嵌套视图,这些视图在单击菜单项触发器时以编程方式插入。

我的问题是,虽然这有效,但我可以将所有这些视图嵌入到他们的各种模板中,但它们都没有与控制器链接,而他们正在拾取的控制器是map_controller(这是有意义的,因为这是顶级视图的链接插座控制器)。目前我正在使用一种描述on Ember's github here的方法,但它似乎有点...... hacky?

这是一个显示问题的JSFiddle。请注意,level-one-entrylevel-two-entry的控制器是index_controllerhttp://jsfiddle.net/fishbowl/Z94ZY/3/

以下是我正在做的事情的一些代码片段:

map.hbs:

<section id='map'>
{{view App.SidebarView}}
{{view App.TopbarView}}
<div id='map-canvas'></div>
</section>

topbar_view.js:

var TopbarView = Em.View.extend({
templateName: 'topbar',
classNames: ['topbar-container'],
init: function() {
    var content = this.get('content'),
            controller = App.TopbarController.create({
                view: this
            });
    this.set('controller', controller);
    this._super();

}
});

module.exports = TopbarView;

topbar_controller.js

var TopbarController = App.ApplicationController.extend({
content: Ember.computed.alias('view.content'),
trigger: null,
start_date: null,
end_date: null,
travelling: null,
word: 'topbar'
});

module.exports = TopbarController;

除了声明this.route('map')之外,我没有在路由器中做任何特殊的事情。我遇到的另一个问题是,每当我声明needs: ['some_other_controller']时,我都会收到错误消息 <App.TopbarController:ember413> specifies 'needs', but does not have a container. Please ensure this controller was instantiated with a container.

我是否遗漏了一些令人眼花缭乱的关于如何将这些联系在一起的明显事实。我猜测我使用的路由不正确。我不想改变URL的内容,因为我从技术上讲不是移动页面,只是在页面上打开和关闭菜单,但我真的不明白我是怎么做的。应该使用路由器来实现这一点。

编辑2:我嘲笑了我可以用网点和链接进行的另一个方面,但我不确定我是否希望更改网址(如您可能可以使用后退按钮执行奇怪的操作等等):jsfiddle - 替代方法是在路由器中设置location: 'none',但我不会&#39 ; t非常喜欢那个选项...

0 个答案:

没有答案