EmberJS - RequireJS - 如何将视图/模板连接到子视图的插座 [英] EmberJS - RequireJS - How to connect a view/template to an outlet of a child view
问题描述
我从github使用EmberJS。这是我使用的版本
https：// github .com / emberjs / ember.js / tree / c87ad9fc13f7883e7b898c9fb9b1630cb2fc9bf1
[/ EDIT]
这个问题是
EmberJS - 手动绑定控制器以查看
但是您不需要阅读它来了解以下问题。
我有一个EmberJS应用程序，我正在使用requireJS加载我的控制器和视图路由器路由到的应用程序部分。
我的主index.html有一个 {{outlet}} ApplicationView将被添加到哪里。
我的ApplicationView有3个子视图 - 标题，菜单和容器 - 如下
require
（
[
'app / app'，
'app / common / views / menu'，
'ember'
]，
/ **
*主应用程序视图
*
* @param App
* /
函数（App）
{
App.ApplicationView = Ember.ContainerView.extend
（{
childViews：['headerView' 'menuView'，'containerView']，
headerView：App.HeaderView，
menuView：App.MenuView，
containerView：App.ContainerView
}）;
}
）;
我的ContainerView如下
需要
（
[
'app / app'，
'text！app / common / templates / container.hbs'，
'ember'
]，
/ **
*查看清除已完成的任务
*
* @param App
* @param模板
* /
函数（App，template）
{
App.ContainerView = Ember.View.extend
（{
template：Ember.Handlebars.compile模板），
什么：'容器视图'
}）
}
）;
及其模板如下
模板在自己的文件app / common / templates / container.hbs中。我不想在HTML中定义具有脚本标签的模板
[/ EDIT]
< div id =containerclass =container>
我的主要内容!!!
{{outlet}}
< / div>
现在我有一条路线，在那里我想将模板/视图呈现到容器主出口（我也尝试命名这个插座）。
我想在我的路线上有这样的东西。请注意，控制器和视图以前没有被加载，并且将在执行功能之前由requireJS加载。
定义
（
[
'app / app'，
'app / library / controllers / library'，
'app / library / views / main'
'ember'
]，
函数（App）
{
App.LibraryRoute = Ember.Route.extend
（{
setupControllers ：function（controller，model）
{
this.set（'controller'，this.container.lookup（'controller：library'））;
}，
renderTemplates：function（）
{
this.render
（'library'，
{
//可以这样指定视图？
//似乎不是容器视图不是活动视图的一部分
//我可以这样指定视图吗？如何将它添加到activeViews？
// into：'container'，
//我也试图做
// outlet：'container'
//与容器中的插座模板beeing命名容器，这不工作
控制器：this.controller
}
）;
//这是我将来的目标，这意味着只有在用户导航到
/ * require
（
[
'app / library / controllers / library'，
'app / library / views / main'，
'app / library / models / library'
]，
函数（）
{
//渲染模板/视图
）* /
}
}）
}
）;
LibraryView就像这样
需要
（
[
'app / app'，
'text！app / library / templates / main.hbs'，
'ember'
]，
/ **
*查看清除已完成的任务
*
* @param App
* @param模板
* /
函数（App，template）
{
App.LibraryView = Ember.View.extend
（{
template：Ember.Handlebars.compile模板），
什么：'库视图'
}）;
}
）;
，此视图的控制器就是这样
需要
（
[
'app / app'，
'ember'
]，
/ **
*库控制器
* /
函数（App）
{
App.LibraryController = Ember.ArrayController.extend
（{
需要：'menu'，
content：[]
}）;
}
）
该问题可以恢复到这个
如何将视图/模板连接到子视图的插座（在应用程序初始化之前或之后加载） ，DOM加载）？
我已经在GitHub上创建了一个repo， https://github.com/zeflasher/ember-require-js ，以便检查代码，并帮助我解决这个问题。
谢谢很多你可以提供的任何帮助！
干杯，
Xavier
我想知道我的问题是否与其中一个有关我指定我的模板的错误
https：// github .com / emberjs / ember.js / commit / 712e2b62f79577b84630a99e80c043f751a67fe4
https://github.com/emberjs/ember.js/commit/9bcc0cd87c587affc0e60030b2dac1174f820dbf
[/ EDIT＃4]
更新github项目以使用ember commit ea6922f（写入时为4天）
仍然无法提高更多问题:)
[/编辑＃5]
我更新了github repo。
现在一个分支（working-no-containerview）在应用程序是一个正常的视图有一个插座。
主分支是非工作示例（在容器模板/视图插座中没有呈现）。
我虽然这样，因为孩子视图不是_activeViews的一部分，当尝试连接插座，它将失败，所以我甚至试图添加我的小孩的容器视图到活动视图使用以下代码ApplicationView
require
（
[
'app / app' ，
'app / common / views / menu'，
'ember'
]，
/ **
*主应用程序视图
*
* @param App
* /
函数（App）
{
App.ApplicationView = Ember.ContainerView.extend
（{
childViews： ['headerView'，'menuView'，'containerView']，
headerView：App.HeaderView，
menuView：App.MenuView，
containerView：App.ContainerView，
init： function（）
{
App .__ container __。lookup（'router：main'）._ connectActiveView（'containe r'，App .__ container __。lookup（'view：container'））;
this._super（）;
}
}）;
return App.ApplicationView;
}
）;
将其添加到activeViews中，但仍然不起作用，补充说，看起来非常错误在框架中深入一些这样简单的工作（在我的casE中还是不行），所以我真的认为我错过了这里的一些必要条件。
[/ EDIT＃6]
这不是一个错误。 ContainerViews根本不渲染模板。请参阅 Ember.ContainerView 的api文档
容器视图上的模板，templateName，defaultTemplate，layout，layoutName或defaultLayout属性不会导致渲染模板或布局。 Ember.ContainerView的DOM表示的HTML内容只会是其子视图的呈现HTML。
如果要渲染在一个模板中，您可以在Ember.View的子类中执行此操作，没有任何问题。但是如上所述，这对于ContainerView和CollectionView都不起作用，因为这是Ember.ContainerView的子类。
我也对你的问题发表了评论： https://github.com/emberjs/ember.js/issues/1795#issuecomment- 12453015 ，我想你可以自己关闭它。
最好的问候，
Mike
Again a question due to EmberJS evolving quite fast :)
[EDIT]
I am using EmberJS from github. This is the version I am using
https://github.com/emberjs/ember.js/tree/c87ad9fc13f7883e7b898c9fb9b1630cb2fc9bf1
[/EDIT]
This question is a follow up of
EmberJS - Manually bind controller to view
But you don't need to read it to understand the following question.
I have an EmberJS application and I am using requireJS to load my controllers and views for the section of the application the router is routing to.
My main index.html has an {{outlet}} where the ApplicationView will be added.
My ApplicationView has 3 child views - header, menu and container - as follow
require
(
[
'app/app',
'app/common/views/menu',
'ember'
],
/**
* Main application view
*
* @param App
*/
function (App)
{
App.ApplicationView = Ember.ContainerView.extend
({
childViews : ['headerView', 'menuView', 'containerView'],
headerView : App.HeaderView,
menuView : App.MenuView,
containerView: App.ContainerView
});
}
);
My ContainerView is as follow
require
(
[
'app/app',
'text!app/common/templates/container.hbs',
'ember'
],
/**
* View to clear completed tasks
*
* @param App
* @param template
*/
function( App, template )
{
App.ContainerView = Ember.View.extend
({
template: Ember.Handlebars.compile( template ),
what: 'container view'
})
}
);
and its template like this
[EDIT]
The template is in its own file app/common/templates/container.hbs. I don't want to define the templates with script tag in the html
[/EDIT]
<div id="container" class="container">
my main content !!!
{{outlet}}
</div>
Now I have a route, where I would like to render a template/view into the container main outlet (I also tried to name the outlet).
I would like to have something like this in my route. Please note that the controller and view haven't been previously loaded and will be loaded now by requireJS before the execution of the function.
define
(
[
'app/app',
'app/library/controllers/library',
'app/library/views/main',
'ember'
],
function (App)
{
App.LibraryRoute = Ember.Route.extend
({
setupControllers: function(controller, model)
{
this.set('controller', this.container.lookup('controller:library') );
},
renderTemplates : function()
{
this.render
( 'library',
{
// can I specify the view like so?
// It seems not as the container view is not part of the active views.
// can I specify the view like so?How to add it to the activeViews?
// into: 'container',
// I also tried to do
// outlet: 'container'
// with the outlet in the container template beeing named container, this doesn't work either
controller: this.controller
}
);
// This is what I am aiming for in the future, meaning loading resources only if the user is navigating to those
/* require
(
[
'app/library/controllers/library',
'app/library/views/main',
'app/library/models/library'
],
function()
{
// render template / view
)*/
}
})
}
);
The LibraryView is like this
require
(
[
'app/app',
'text!app/library/templates/main.hbs',
'ember'
],
/**
* View to clear completed tasks
*
* @param App
* @param template
*/
function( App, template )
{
App.LibraryView = Ember.View.extend
({
template: Ember.Handlebars.compile( template ),
what :'library view'
});
}
);
and the controller for this view is like this
require
(
[
'app/app',
'ember'
],
/**
* Library controller
*/
function(App)
{
App.LibraryController = Ember.ArrayController.extend
({
needs: 'menu',
content: []
});
}
)
The question can be resumed to this
How to connect a view/template to an outlet of a child view (loaded before or after the app is initialized, DOM Loaded)?
I have created a repo on GitHub here https://github.com/zeflasher/ember-require-js for you to check the code and maybe helping me out fixing this.
Thanks a lot for any help you could provide!!! Cheers, Xavier
[EDIT #4]
I wonder if my problem is related to one of those bugs as I am specifying my template
https://github.com/emberjs/ember.js/commit/712e2b62f79577b84630a99e80c043f751a67fe4
https://github.com/emberjs/ember.js/commit/9bcc0cd87c587affc0e60030b2dac1174f820dbf
[/EDIT #4]
[EDIT #5]
Updated the github project to use ember commit ea6922f (4 days old at the time of writting)
Still not working an raising more question :)
[/EDIT #5]
[EDIT #6]
I have updated the github repo.
Now one branch (working-no-containerview) render my view in the outlet when the application is a normal view haveing an outlet.
The master branch is the non working example (nothing is rendered in the container template/view outlet).
I though that as the child view aren't part of the _activeViews when trying to connect the outlet it will fail, so I have even tried to add my child 'container' view to the active view using the following code in the ApplicationView
require
(
[
'app/app',
'app/common/views/menu',
'ember'
],
/**
* Main application view
*
* @param App
*/
function (App)
{
App.ApplicationView = Ember.ContainerView.extend
({
childViews : ['headerView', 'menuView', 'containerView'],
headerView : App.HeaderView,
menuView : App.MenuView,
containerView: App.ContainerView,
init: function()
{
App.__container__.lookup('router:main')._connectActiveView('container', App.__container__.lookup('view:container'));
this._super();
}
});
return App.ApplicationView;
}
);
Which add it to the activeViews, but still is not working, added that it looks terribly wrong to go that deep in the framework to have something this simple working (which well still doesn't in my casE), so I really think I missed something essential here.
[/EDIT #6]
This is not a bug. ContainerViews simply don't render a template. See the api docs for Ember.ContainerView
A template, templateName, defaultTemplate, layout, layoutName or defaultLayout property on a container view will not result in the template or layout being rendered. The HTML contents of a Ember.ContainerView's DOM representation will only be the rendered HTML of its child views.
If you want to render an outlet in a template you can do this in a subclass of Ember.View without any problem. But as stated above this will not work for ContainerView nor on CollectionView I think because this is a subclass of Ember.ContainerView.
I also commented on your issue: https://github.com/emberjs/ember.js/issues/1795#issuecomment-12453015 and I think you can close it yourself.
Best regards, Mike
这篇关于EmberJS - RequireJS - 如何将视图/模板连接到子视图的插座的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
