EmberJSが非常に速く進化しているためにもう一度質問があります:)
[編集]
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'
],
/**
* 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
});
}
);
私のContainerViewは次のとおりです
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'
})
}
);
そしてこのようなテンプレート
[編集]
テンプレートはそれ自身のファイルapp/common / templates/container.hbsにあります。HTMLでscriptタグを使用してテンプレートを定義したくない
[/EDIT]
<div id="container" class="container">
my main content !!!
{{outlet}}
</div>
これで、テンプレート/ビューをコンテナのメインアウトレットにレンダリングしたいルートができました(アウトレットにも名前を付けようとしました)。
私のルートにはこのようなものが欲しいです。コントローラとビューは以前にロードされておらず、関数の実行前にrequireJSによってロードされることに注意してください。
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
)*/
}
})
}
);
LibraryViewはこんな感じです
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'
});
}
);
このビューのコントローラーは次のようになります
require
(
[
'app/app',
'ember'
],
/**
* Library controller
*/
function(App)
{
App.LibraryController = Ember.ArrayController.extend
({
needs: 'menu',
content: []
});
}
)
質問はこれに再開できます
ビュー/テンプレートを子ビューのアウトレットに接続する方法(アプリが初期化される前または後にロードされ、DOMがロードされます)?
ここhttps://github.com/zeflasher/ember-require-jsでGitHubにリポジトリを作成しました。コードを確認し、修正を手伝ってくれるかもしれません。
あなたが提供できるどんな助けにも感謝します!!! 乾杯、ザビエル
[編集#4]テンプレートhttps://github.com/emberjs/ember.js/commit/712e2b62f79577b84630a99e80c043f751a67fe4 https://github.com/emberjs/
を指定しているので、問題がこれらのバグの1つに関連しているのではないかと思います。 ember.js / commit / 9bcc0cd87c587affc0e60030b2dac1174f820dbf
[/編集#4]
[編集#5]
ember commit ea6922fを使用するようにgithubプロジェクトを更新しました(作成時点で4日経過しています)
まだ問題が発生していません:)
[/編集#5]
[編集#6]
githubリポジトリを更新しました。
これで、アプリケーションがアウトレットを持つ通常のビューである場合、1つのブランチ(working-no-containerview)がアウトレットにビューをレンダリングします。
マスターブランチは機能しない例です(コンテナテンプレート/ビューアウトレットには何もレンダリングされません)。アウトレットに接続しようとすると子ビューが_activeViewsの一部ではないため、失敗します。そのため、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;
}
);
それをactiveViewsに追加しますが、まだ機能していません。フレームワークの奥深くにこの単純な機能を持たせるのはひどく間違っているように見えると付け加えました(これはまだ私のケースでは機能しません)。ここで不可欠な何か。
[/編集#6]