I am researching Ember and i wanna know if it is possible to include multiple views in a single page and switch between layout templates. I've developed with AngularJS before.
I am searching for an Ember equivalent of this $route.when('/view1', ...); and <ng-include src="templates.top" />.
Here is a working fiddle for Angular. I hope someone can help me because i found little help.
In it's simplest form, you can use StateManager. Please see the following fiddle I created: http://jsfiddle.net/npCfF/
Javascript:
App= Ember.Application.create();
App.StateManager = Ember.StateManager.create({
rootElement: '.tab-content',
initialState: 'tab1',
//Show the location tab function
showTab1: function(manager) {
manager.transitionTo('tab1');
},
//show seleceted areas
showTab2: function(manager) {
manager.transitionTo('tab2');
},
showTab3: function(manager) {
this.set('locationActive', 'inactive');
this.set('areasActive', 'active');
this.set('filterActive', 'inactive');
this.set('childOf', 'showAreas');
manager.transitionTo('tab3');
},
tab1: Ember.ViewState.create({
route: 'tab1',
view: Ember.View.create({ templateName: 'tab1' })
}),
tab2: Ember.ViewState.create({
route: 'tab2',
view: Ember.View.create({ templateName: 'tab2' })
}),
tab3: Ember.ViewState.create({
route: 'tab3',
view: Ember.View.create({ templateName: 'tab3' })
})
});
HTML:
<script type="text/x-handlebars">
<nav class="tab_menu">
<span id="tab_location_result" data-show="location_result" {{action "showTab1" target="App.StateManager"}}><i class="icon-globe"></i>Tab 1</span> |
<span id="tab_selected_areas" data-show="selected_areas" {{bindAttr class="MapSearch.StateManager.areasActive"}} {{action "showTab2" target="App.StateManager"}}><i class="icon-map-marker"></i>Tab 2</span> |
<span id="tab_filter_results" data-show="filter_results" {{bindAttr class="MapSearch.StateManager.filterActive"}} {{action "showTab3" target="App.StateManager"}}><i class="icon-filter"></i>Tab 3</span>
</nav>
</script>
<div class="tab-content"></div>
<script type="text/x-handlebars" data-template-name="tab1">
Tab1
</script>
<script type="text/x-handlebars" data-template-name="tab2">
Tab2
</script>
<script type="text/x-handlebars" data-template-name="tab3">
Tab3
</script>
What you're thinking of is the Ember.js router, with Handlebars.js templates on top. Here is a good guide to it, it covers everything you'll need to get started. Reading through and understanding the tutorial might take some time.
Related
I'm creating an Ember application to display twitter feeds but I am having trouble with displaying individual tweets through embedded resources.
The code is as follows:
Templates
<script type="text/x-handlebars" data-template-name="tweets">
<div id="stream">
{{#each tweet in controller}}
<div class="tweet">
<p class="tweet_text">{{tweet.text}}</p>
<p> {{#linkTo "tweet" tweet}} {{tweet.id}} {{/linkTo}}</p>
</div>
{{/each}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="tweet">
<div id="detail">
{{text}}
</div>
</script>
Router
window.App = Ember.Application.create({
LOG_TRANSITIONS: true
});
App.Router.map(function(){
this.resource('tweets',function(){
this.resource('tweet',{path: ':tweet_id'})
});
});
// (1) App.Router.map(function(){
// this.resource('tweets')
// this.resource('tweet',{path: ':tweet_id'})
// });
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('tweets');
}
});
App.TweetsRoute = Ember.Route.extend({
model: function(){
var me = [];
$.getJSON("http://search.twitter.com/search.json?q=emberjs&rpp=200&count=200&callback=?",
{},
function (data) {
$.each(data.results,function(k,tweet){
var tweet = App.Tweet.create({
created_at: tweet.created_at,
from_user: tweet.from_user,
profile_image_url: tweet.profile_image_url,
text: tweet.text,
id: tweet.id
});
me.pushObject( tweet );
});
});
return me;
}
});
Objects & Controllers
App.TweetsController = Ember.ArrayController.extend({});
App.Tweet = Ember.Object.extend({
created_at: "",
from_user: "",
profile_image_url: "",
text: "",
id: 0
})
As you can see, I have a commented our router (1) which works in finding the correct tweet, and rendering it in the tweet template. However, I would like this route to be nested so that I can implement it as a Master-Detail application.
Using the LOG_TRANSITIONS, I can see that the correct routes are initialised, but I cannot get the nested resource path to render.
Any ideas would be hugely appreciated, thanks in advance.
I got this working. For anyone stuck on something similar, this is how I did it:
Templates - Changed the {{#linkTo}} "tweet"... to {{#linkTo}} "tweets.tweet"... AND added an {{outlet}}
<script type="text/x-handlebars" data-template-name="tweets">
<div id="stream">
{{#each tweet in controller}}
<div class="tweet">
<p class="tweet_text">{{tweet.text}}</p>
<p> {{#linkTo "tweets.tweet" tweet}} {{tweet.id}} {{/linkTo}}</p>
</div>
{{/each}}
</div>
{{ outlet }}
</script>
Router - Changed 'this.resource' to 'this.route'
App.Router.map(function(){
this.resource('tweets',function(){
this.route('tweet',{path: ':tweet_id'})
});
});
Caveat
I think this is a workaround and that the nested resource was the correct approach in this context. I understand that a nested route should be "a verb" or action route. I would still be grateful if anyone knows the correct approach to the question but hope the above helps others where relevant.
I tried this very basic ember router example following the ember-router-example. But when I run it, it shows me an empty page. I checked the console window for any errors, but seems to be fine. Not really sure why this is not working and where am missing.
I am just trying to create the first level links of Home, Sections, items only.
Can somebody help me?
index.html:
<body>
<script src="js/libs/jquery-1.7.1.js"></script>
<script src="js/libs/jquery.lorem.js"></script>
<script src="js/libs/bootstrap.min.js"></script>
<script src="js/libs/handlebars-1.0.0.beta.6.js"></script>
<script src="js/libs/ember.js"></script>
<script src="js/app.js"></script>
<script type="text/x-handlebars" data-template-name="application">
<div>
<ul>
<li><a {{action "doHome"}}>Home</a></li>
<li><a {{action "doSections"}}>Sections</a></li>
<li><a {{action "doItems"}}>Items</a></li>
</ul>
</div>
<div>
{{outlets}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="home">
<h1>yeah right Home</h1>
</script>
<script type="text/x-handlebars" data-template-name="sections">
<h1>Oh v in Sections index</h1>
</script>
<script type="text/x-handlebars" data-template-name="items">
<h1>correct in Items Index Page</h1>
</script>
</body>
app.js :
$(function() {
App = Ember.Application.create()
App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend({
templateName:'application'
});
App.HomeController = Ember.Controller.extend();
App.HomeView = Ember.View.extend({
templateName:'home'
});
App.SectionsController = Ember.Controller.extend();
App.SectionsView = Ember.View.extend({
templateName:'sections'
});
App.ItemsController = Ember.Controller.extend();
App.ItemsView = Ember.View.extend({
templateName:'items'
});
App.Route = Ember.Route.extend({
root: Ember.Route.extend({
doHome : function(router,event){
router.transitionTo('home');
},
doSections:function(router,event){
router.transitionTo('sections');
},
doitems:function(router,event){
router.transitionTo('items');
},
home : Ember.Route.extend({
route : '/',
connectOutlets:function(router,event){
router.get('applicationController').connectOutlet('home');
}
}),
sections : Ember.Route.extend({
route : '/sections',
connectOutlets:function(router,event){
router.get('applicationController').connectOutlet('sections');
}
}),
items : Ember.Route.extend({
route : '/items',
connectOutlets:function(router,event){
router.get('applicationController').connectOutlet('items');
}
})
})//root
}) //router
});
I created this fiddle with your code. It seems to be working, just use latest ember and handlebars. And maybe you should change {{outlets}} with {{outlet}}.
EDIT
The above fiddle is not working, see the updated fiddle.
I rewrote the routing code using the new routing API, now it is working as expected.
I believe you are supposed to be using "template" as opposed to templateName when you are defining your templates in your main html file. If you were to create those templates as separate handlebars files and use a build step, you would then use templateName to refer to them (by file name).
Steve
I'm building a front-end (on top of Ruby on Rails) using ember.js and the ember-rails gem.
My (ember) application consists of Models, Views, Controllers and an application.handlebars template which describes my UI.
Whats the best practice to break up this application.handlebars file so that I can manage the UI? For example, I'd like to have Navigation at the top of the page.
I've tried using the Ember.Router, a separate navigation.handlebars (with NavigationView and NavigationController) the {{outlet}} helper to no avail. Here's what the Router looks like:
App.Router = Ember.Router.extend(
enableLogging: true
root: Ember.Route.extend(
index:
route: '/'
connectOutlets: (router, context) =>
router.get('applicationController').connectOutlet('navigation')
)
and the application.handlebars
<h1>Lots of HTML that I want to break up</h1>
{{outlet}}
Let me know if you need more info...thanks.
As per my Understanding, Let's suppose you want 3 sections(can be any number) Header, Content & Footer, You can do something as follows
<script type="text/x-handlebars" data-template-name="application">
{{view MyApp.HeaderView}}
{{#view MyApp.ContentView}}
{{outlet}}
{{/view}}
{{view MyApp.FooterView}}
</script>
<script type="text/x-handlebars" data-template-name="app-header">
All your Header related HTML
</script>
<script type="text/x-handlebars" data-template-name="app-content">
HTML related to content
{{yield}} //this will be explained at the end
More HTML if you want
</script>
<script type="text/x-handlebars" data-template-name="app-footer">
HTML related to footer
</script>
MyApp.HeaderView = Ember.View.extend({
templateName: 'app-header'
})
MyApp.ContentView = Ember.View.extend({
templateName: 'app-content'
})
MyApp.FooterView = Ember.View.extend({
templateName: 'app-footer'
})
MyApp.ApplicationView = Ember.View.extend({
templateName: 'application'
})
explaining {{yield}} In a nutshell, whatever is between in the block helper of a given view goes in there, In the above example for the MyApp.ContentView, the {{outlet}} defined in the {{#view MyApp.ContentView}} handlebars gets inserted at the {{yield}}
On the similar lines let me show the difference between layoutName property & templateName property,
App.someView = Ember.View.extend({
tagName: 'a',
templateName: 'a-template',
layoutName: 'a-container'
})
<script type="text/x-handlebars" data-template-name="a-template">
Hi There
</script>
<script type="text/x-handlebars" data-template-name="a-container">
<span class="container">
{{yield}}
</span>
</script>
Will result in following HTML
<a class="ember-view" id="ember235">
<span class="container ember-view" id="ember234">
Hi There
</span>
</a>
Use these concepts to split the application handlebars in your case it would be something like
{{view App.NavigationView}}
{{outlet}}
Update as per latest ember
The new ember supports partials similar to rails, now we can modify the above to use {{partial}} as follows:
{{partial "header"}}
{{outlet}}
{{partial "footer"}}
Ember when encountered this template will look for the template whose name is _header(similar to rails) and inserts the template(same goes for footer)
And If want to associate a controller we can use {{render}} helper
{{render "sidebar"}}
inserts the template whose name is sidebar at specified location in handlebars besides it also associates App.SidebarController to it,
Note: we cannot use {{render 'sidebar'}} more than once in same handlebars file.
But again if you want to use a widget like view multiple places in a given page then use {{view}} helper
For this problem, what you need to do is think about what views change and where that changes happen. If for example you have a navigation section and a main section, then think about how each of these sections change with the state of your application. Be sure to only create an {{outlet}} for dynamic content, otherwise things will get messy and the application will be slower. Then setup your templates and your router similar to the example below.
Templates:
<script type="text/x-handlebars" data-template-name="application">
<!--Your application template goes here-->
{{outlet navigation}}
{{outlet body}}
</script>
<script type="text/x-handlebars" data-template-name="navigation">
<!--Your navigation template goes here-->
</script>
<script type="text/x-handlebars" data-template-name="main-one">
<!--Your mainOne template goes here-->
</script>
<script type="text/x-handlebars" data-template-name="main-two">
<!--Your mainTwo template goes here-->
</script>
Note: You can have {{outlet}} in any of your view templates to change in more sub-states
Javascript:
window.App = Em.Application.create({
ApplicationView: Em.View.extend({
templateName: "application"
}),
ApplicationController: Em.Controller.extend({
}),
NavView: Em.View.extend({
templateName: "navigation"
}),
NavController: Em.Controller.extend({
}),
MainOneView: Em.View.extend({
templateName: "main-one"
}),
MainOneController: Em.Controller.extend({
}),
MainTwoView: Em.View.extend({
templateName: "main-two"
}),
MainTwoController: Em.Controller.extend({
})
Router: Em.Router.extend({
root: Em.Route.extend({
index: Em.Route.extend({
route: '/',
connectOutlets: function(router,context) {
router.get("applicationController").connectOutlet("navigation","nav");
router.get("applicationController").connectOutlet("body","mainOne");
}
}),
otherState: Em.Route.extend({
route: '/other-state',
connectOutlets: function(router,context) {
router.get("applicationController").connectOutlet("navigation","nav");
router.get("applicationController").connectOutlet("body","mainTwo");
}
}),
})
})
});
App.initialize();
Note: The applicationController must extend Controller and not ObjectController or ArrayController
I made some tests with ember-0.9.8.1.js and the following code works as expected.
After that I read about the router and that the router - code is only available in the current ember-latest.js (16.06.2012).
I test the code below with this version.
The problem is the list is rendered:
<div id="ember143" class="ember-view">
<ul id="PersonList" class="ember-view ListBox">
<li id="ember179" class="ember-view">
<script id="metamorph-0-start" type="text/x-placeholder"></script>
<script id="metamorph-0-end" type="text/x-placeholder"></script>
</li>
<li id="ember183" class="ember-view">
<script id="metamorph-1-start" type="text/x-placeholder"></script>
<script id="metamorph-1-end" type="text/x-placeholder"></script>
</li>
<li id="ember187" class="ember-view">
<script id="metamorph-2-start" type="text/x-placeholder"></script>
<script id="metamorph-2-end" type="text/x-placeholder"></script>
</li>
<li id="ember191" class="ember-view">
<script id="metamorph-3-start" type="text/x-placeholder"></script>
<script id="metamorph-3-end" type="text/x-placeholder"></script>
</li>
</ul>
</div>
but is empty.
Something with the
template: Ember.Handlebars.compile("{{content.name}}"),
is not working correctly or some syntax aspects has changed.
The code line
console.log("content:",this.get('content'));
in the click handler shows, that the right content is there, but
Ember.Handlebars.compile("{{content.name}}"),
will not render the content.
Is this a bug ???
Javascript Code:
var App = Em.Application.create({
ready: function(){
App.personListController.getData();
}
});
// Model Objects
App.Person = Ember.Object.extend({
name: null,
myTickets: null,
selected: false
});
// Liste von Personen anlegen
App.personListController = Ember.ArrayController.create({
getData: function(){
$.get('json/person.json', function(data) {
var personList = Ember.A([]);
data.forEach(function(item) {
var p = App.Person.create({
'name': item.name,
'myTickets': null,
'selected': false
});
personList.pushObject(p);
});
App.personListController.set('content', personList);
})
},
resetSelection: function(){
App.personListController.content.forEach(function(item){
item.set('selected',false);
})
},
selectedPerson: null
});
App.PersonList = Ember.CollectionView.extend({
tagName: 'ul',
contentBinding: 'App.personListController.content',
classNames: ['ListBox'],
mouseenter: function(event){
console.log("PersonList.content:",this.get('content'));
},
itemViewClass: Ember.View.extend({
template: Ember.Handlebars.compile("{{content.name}}"),
classNameBindings: ['selected:selected'],
selectedBinding: 'content.selected',
click:
function(event){
App.personListController.resetSelection() ;
this.setPath('content.selected',true);
App.personListController.set('selectedPerson',this.get('content'));
console.log("ItemViewInfo selected:",this.getPath('content.selected'));
console.log("content:",this.get('content'));
//this.set('isSelected',true);
}
})
});
HTML:
<script type="text/x-handlebars">
{{#view App.PersonList id="PersonList"}}
{{/view}}
</script>
That's because the lookup context for a view changed in the latest commits. Now you have to prepend view if you want to lookup a property on the view. See documentation updates in commit 8a6c6.
The template therefore changes to
template: Ember.Handlebars.compile("{{view.content.name}}")
see http://jsfiddle.net/pangratz666/DsdHU/.
Tom Dale has a Gist which explains the changes further.
The latest-ember.js (aswell as ember-1.0.pre.js) does not include handlebars anymore, you have to include it by your own.
You also have to start the event-loop yourself now:
!! -> seems like you don't need that anymore.. !!
App.initialize();
..the associated jsfiddle: http://jsfiddle.net/aGMzD/
i have 3 tabs navigation and the content of each tab is different obviously.
i'm thinking about using StateManager in Emberjs to manager my tab views.
http://docs.emberjs.com/#doc=Ember.StateManager&src=false
is that a good idea? or is there a better router out there? i've looked at
sproutcore-routing
ember-routemanager
are those better than the statemanager? what's the reason not to use statemanager?
You can use something along this lines, see http://jsfiddle.net/pangratz666/e3wM7/:
Handlebars:
<script type="text/x-handlebars" >
<ul>
<li {{action "showFirst" target="App.stateManager"}} >First tab</li>
<li {{action "showSecond" target="App.stateManager"}} >Second tab</li>
</ul>
<div class="tab-content" ></div>
</script>
<script type="text/x-handlebars" data-template-name="first" >
first
</script>
<script type="text/x-handlebars" data-template-name="second" >
second
</script>
JavaScript:
App.stateManager = Ember.StateManager.create({
rootElement: '.tab-content',
initialState: 'firstTab',
showFirst: function(manager) {
manager.goToState('firstTab');
},
showSecond: function(manager) {
manager.goToState('secondTab');
},
firstTab: Ember.ViewState.create({
view: Ember.View.extend({ templateName: 'first' })
}),
secondTab: Ember.ViewState.create({
view: Ember.View.extend({ templateName: 'second' })
})
});
Also take a look at the blog post Anatomy of an Ember.js App Part I Redux: Routing and Outlets.