我有一个余烬应用程序和插座的概念和连接插座很好,我明白了.我不明白的是如何在没有疯狂嵌套的情况下在另一个视图/控制器视图中有多个视图/控制器视图
假设我正在设计icloud clone,我有电子邮件功能和照片库功能.现在,如果我想完成类似的事情
***********************************************************
* INBOX LIST ** COMPOSE OR VIEW MESSAGE *
* ** *
* ** *
* ** *
* ** *
* CONTACTS LIST ** *
* ** *
* ** *
* ** *
* ** *
***********************************************************
我想要设计的方式就像是
EmailController/View
|-- SplitViewController/View
|-- InboxListController/View
|-- ContactsListController/View
|-- ComposeMessageController/View
|-- ReadMessageController/View
我可以将这些热交换到SplitView的级别或将它们全部删除,但我没有看到一个很好的方法,只outlet允许一个这样做.它会迫使我接下来不应该嵌套的东西.使用单一插座方法,我的结构看起来更像
EmailController/View
|-- SplitViewController/View
|-- InboxListController/View
|-- ContactsListController/View
|-- ComposeMessageController/View
|-- ReadMessageController/View
我怎样才能找到适合Ember.js/Router的架构风格,它仍然允许更复杂的嵌套？
当我使用Ember路由器时,如何在模板中定义连接到控制器的操作？
一个例子在这里:http: //jsfiddle.net/KvJ38/3/
Unter My Profile是两个动作:一个在State上定义,并且正在工作两个在Controller上定义.我怎样才能使这个工作或我应该使用另一种方法？
App.Router = Em.Router.extend({
enableLogging: true,
location: 'hash',
root: Em.State.extend({
// EVENTS
goHome: Ember.State.transitionTo('home'),
viewProfile: Ember.State.transitionTo('profile'),
// STATES
home: Em.State.extend({
route: '/',
connectOutlets: function(router, context) {
var appController = router.get('applicationController');
appController.connectOutlet(App.HomeView);
}
}),
// STATES
profile: Em.State.extend({
route: '/profile',
connectOutlets: function(router, context) {
var appController = router.get('applicationController');
appController.connectOutlet(App.ProfileView);
}
}),
one: function() {
alert("eins");
},
})
});
我有没有其他可能处理Ember.Router控制器和视图？我的app结构通常依赖于require.js来处理相应的依赖关系.
在我的例子中,我正在将App.ApplicationController作为主路由器控制器.
这是一个jsfiddle:http://jsfiddle.net/mediastuttgart/uMKGt/1/
但有没有机会手动设置？我发现这个提交消息https://github.com/emberjs/ember.js/commit/be69395f5eec4187b1df052d7386bcda45f79475我可以看到,如何设置控制器和手动查看(无论如何都无法正常工作).但是找不到像这样的例子:
App = Ember.Application.create();
App.MyController = Ember.Controller.extend({});
App.MyView = Ember.View.extend({});
Router = Ember.Router.extend({
applicationController : App.MyController,
root : Ember.Route.extend({
index : Ember.Route.extend({
route : '/',
connectOutlets : function (router) {
router.get('applicationController').connectOutlet(App.MyView);
}
})
}),
...
});
编辑
我想详细解释一下这个问题.虽然我们使用require.js来管理或依赖,但我们有多个控制器负责整个应用程序的各个部分.假设我们有一份简报注册表格.用于此场景的控制器是结构化的
- app
-- controller
--- newsletter
---- signup.js
--- cart
--- checkout
-- view
-- model
-- router
-- template
因为我们使用自定义函数来生成在Em.Provide('App.Controller.Newsletter');其中创建对象的命名空间App.Controller.Newsletter.此对象现在充当整个新闻稿应用程序的控制器基础.从App.Controller.Newsletter.Signup = Ember.Controller.extend({});我们开始,我们需要将此实例作为路由器的"ApplicationController"传递.如您所见,我们不能仅仅使用App.ApplicationController实例化Ember.Router的控制器.
我试图回答这个问题:emberjs:在app initialize()之后添加路由
我开始玩Ember.Object.reopen(),了解它是如何工作的,也许还找到了回答上一个问题的方法.
我觉得有点疑惑,并且不明白这段代码的行为:
jsfiddle:http://jsfiddle.net/Sly7/FpJwT/
<script type="text/x-handlebars">
<div>{{App.myObj.value}}</div>
<div>{{App.myObj2.value}}</div>
<div>{{App.myObj3.value}}</div>
</script>
App = Em.Application.create({});
App.MyObject = Em.Object.extend({value: 'initial'});
App.set('myObj', App.MyObject.create());
Em.run.later(function(){
App.get('myObj').reopen({
value: "reopenOnInstance"
}); // the template is not updated, 'initial' is still diplayed, but
console.log(App.get('myObj').get('value')); // print 'reopenOnInstance'
App.MyObject.reopen({
value: "reopenOnClass"
});
App.set('myObj2',App.MyObject.create()); // the template is updated and
console.log(App.get('myObj2').get('value')); //print 'reopenOnClass'
App.myObj3 = App.MyObject.create(); // the template is not updated but
console.log(App.myObj3.get('value')); // print 'reopenOnClass'
Em.run.later(function(){
App.get('myObj').set('value', "setWithSetter"); // the template is updated …我正在开发一个Ember应用程序,我希望按一下按钮转换到一个新路由,将一个对象作为该路由的上下文传递.
问题是,无论我如何尝试并传递上下文,它总是在我到达我转换到的路线时丢失.
调查(http://jsfiddle.net/fxbXM/2/)似乎上下文被传递到路由器命中的第一条路由,因为它适用于请求的路由.(请参阅每个路由级别的connectOutlets函数的输出)
这似乎证实了我在调试我的实际app时发现的内容:在Ember的triggerSetupContext函数中有三个enterStates:[Router,'root','create']并且有三个contexts:[myObject,null,null]
如果上下文的顺序相反,那么我会得到我想要的东西!
我在将对象作为上下文传递的方式中犯了一些基本错误吗？我应该使用其他方法吗？
几个月后没有看emberjs,我现在试图回到它,我正在尝试新的路由器.我想测试我的路线.
有没有人试图用emberjs写一些路由测试？
让我们假设以下路由器非常基本:
App.Router = Ember.Router.extend({
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/',
connectOutlets: function(router, context) {
router.get('applicationController').connectOutlet({name: 'home'});
}
})
})
})
你如何测试加载root.index路线正确加载HomeView？
在不断变化的Ember.js世界中,我正在寻找一些有关简单应用程序启动和运行的帮助.
我试图通过一个带Ember.js的API通过JSON加载数据来获得一些基本框架,但是无法获取数据.代码可以在这里找到:
var App = Ember.Application.create();
App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend({
templateName: 'application'
});
App.Movie = Ember.Object.extend({
title: null,
rating: null,
release_date: null,
poster_image: null
});
App.MoviesView = Ember.View.extend({
templateName: 'movie-list'
});
App.moviesController = Ember.ArrayController.create({
content: [],
init: function(){
var me = this;
$.getJSON('/trailers/api/movies',function(data){
me.set('content', []);
$(data.movies).each(function(index,value){
var t = App.Movie.create({
title: value.title,
rating: value.rating,
release_date: value.release_date,
poster_image: value.poster_image
});
me.pushObject(t);
})
});
}
});
App.router = Ember.Router.create({
enableLogging: true,
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/',
redirectsTo: 'movies'
}), …我添加了示例应用程序. http://jsfiddle.net/Sly7/amG56/
JS:
App = Ember.Application.create();
App.ApplicationController = Ember.ArrayController.extend({
selectedBook: null
});
App.ApplicationView = Ember.View.extend({
actions: {
selectBook: function(book) {
this.get('controller').set("selectedBook", book);
},
cancel: function(book) {
alert(book);
}
}
});
App.Book = Em.Object.extend({
name: null
});
模板:
<script type="text/x-handlebars">
{{#each book in books}}
<a {{action "selectBook" book target="view"}} href="#">select {{book.name}}</a><br />
{{/each}}
<hr />
Selected Book: {{selectedBook.name}}
<br />
<a {{action "cancel" selectedBook target="view"}} href="#">cancel selected book</a>
</script>
选择其中一本书.您将看到将显示该书的名称.但"取消选定的书"链接不起作用.
我认为问题是当选择一本书时动作助手的上下文不会改变.
如何实现具有不断变化的上下文的动作助手？或者这是一个错误？
我有一个使用Ember.Router结构的Ember.js应用程序.
我的app结构看起来像
window.App = Ember.Application.create {
#Truncated idea of app, not including application controller or any of that
MainController = Ember.Controller.extend()
MainView = Ember.View.extend
templateName: 'main-template'
所以控制器和视图中扩展,而不是建立在应用程序的创建.然后有连接出口的路线
Router: Ember.Router.extend
root: Ember.Route.extend
main: Ember.Route.extned
route: '/'
connectOutlets: (router, event) ->
router.get('applicationController').connectOutlet('main')
我需要将<select>标记绑定到一组值.Ember.Select看起来这是一个很好的方法,所以我添加一个控制器和视图扩展为选择
MySelectController: Ember.ArrayController.extend
contents: [{id:1,title:'test'},{id:2,title:'test2'}]
MySelectView: Ember.Select.extend
contentBinding: this.get('controller')
contentValuePath: 'id'
contentLabelPath: 'title'
这不起作用.this.get('controller')当我尝试在视图中包含时,我收到错误{{#view App.MySelectView}}
我该怎么做？
如果我有一个使用路由器架构的应用程序,我如何获得父路由的控制器？
假设有一条路线
Router: Ember.Router.extend
enableLogging: true
root: Ember.Route.extend
main: Ember.Route.extend
route: '/'
connectOutlets: (router, event) ->
router.get('applicationController').connectOutlet('main')
editor: Ember.Route.extend
route: '/editor'
connectOutlets: (router, event) ->
router.get('mainController').connectOutlet('editor')
那我怎么能EditorController抓住我的MainController？
我试过@get('parentController'),@get('parent')以及@get('controller')没有成功