I am developing a Cordova application with help from Ember. I have many dynamic elements in my application. These are Bootstrap thumbnails that link to other routes when clicked.
I want to make these thumbnails clickable. If I use Views, I will have to write unique views for all the thumbnails.
I have heard about mixins. Can a general View be defined that will :
Pass a model
Render a template for a route with the model
In other words, since each view semantically performs the same action, I want to be able to do something similar to
{{#each}}
{{#view App.AllView this}}
.
{{/view}}
{{/each}}
in the template and in the view :
App.AllView = Ember.View.extend({
click: function(evt, model){
this.controllerFor('route').set('content', model);
this.transitionTo('route');
}
});
UPDATE
Following #givanse's answer, I made the following component
<script type="text/x-handlebars" data-template-name="components/thumbnail-view">
<div {{bind-attr class=class}}>
<div class="thumbnail">
<div class="caption">
{{name}}
</div>
<img {{bind-attr src=image }}>
</div>
</div>
</script>
and used it in my template :
<script type="text/x-handlebars" data-template-name="types">
<div class="row">
{{#each model}}
{{thumbnail-view action="goToCategory" class="col-xs-12" param=this name=name image=image}}
{{/each}}
</div>
</script>
with an Ember component :
Pioneer.ThumbnailViewComponent = Ember.Component.extend({
click: function(){
this.sendAction('action', this.get('param'));
}
});
The action goToCategory is defined in my ApplicationRoute
Hope this helps someone!
What you need is Components, something like:
<script data-template-name="index">
{{#each}}
{{img-thumbnail imgId="id/path/name"}}
{{/each}}
</script>
<script data-template-name="components/img-thumbnail">
{{! whatever you need to make your thumbnail }}
</script>
App.ImgThumbnailComponent = Ember.Component.extend({
// handle events, classes, etc.
});
See:
http://emberjs.com/guides/components/
http://emberjs.com/api/classes/Ember.Component.html
Related
I'm trying to create a simple interface with a list of links on the left, retrieved from an AJAX call, that, when clicked, open in an {{outlet}} to the right with some data, retrieved as well from another AJAX call from that link. So these are my routes:
App.Router.map(function() {
this.resource('about');
this.resource('subreddit', { path: 'subreddit/:subreddit_name' }, function() {
this.resource('comments', { path: 'comments/:id' })
});
});
So I have a dynamic list of links, based on :subreddit_name with the following structure:
subreddit/:subreddit_name/comments/:id
To create the links I have the following codeblock:
<script type="text/x-handlebars" id="subreddit">
<div>
{{#each item in model}}
{{#linkTo 'comments' item.subreddit item.id classNames="list-group-item"}}
<img class="media-object" {{bindAttr src="item.thumbnail"}} class="img-rounded">
{{item.author}}
{{/linkTo}}
{{/each}}
</div>
<div>{{outlet}}</div>
</script>
The link is properly corrected, but, after I've inserted the :subreddit_name dynamic route to the Router, when I click the link it re-renders the whole template, instead of re-rendering only the template for the comments:
<script type="text/x-handlebars" id="comments">
{{#each item in model}}
<div class="panel panel-info mypanel">
<div class="panel-heading">{{item.author}}</div>
<div class="panel-body">
<p>{{{item.body}}}</p>
</div>
</div>
{{/each}}
</script>
I'm still pretty green on EmberJS, that's why I would like to ask for some suggestion/commment on out to correct this.
Thanks in advance!
Here is the jsbin working example:
http://jsbin.com/OlOJEwAX/4/edit?html,js,output
I've managed to get the links working but the undefined is also there rendered :S
I'm using the following Ember.js stack:
DEBUG: -------------------------------
DEBUG: Ember : 1.1.2
DEBUG: Handlebars : 1.0.0
DEBUG: jQuery : 2.0.2
DEBUG: -------------------------------
I declared an application.hbs Handlebars template which renders my App.ApplicationView
{{#view App.ApplicationView}}
{{outlet 'modal'}} {{outlet 'notificationCollection'}}
{{#if isUserAuthenticated}}
{{render sidemenu authenticationState=isAuthenticated}}
{{outlet 'upperNotification'}}
<div id="main" class="main">
{{outlet}}
</div>
{{else}}
{{outlet}}
{{/if}}
{{/view}}
and for debugging purposes I added the gotcha to the classNames array of App.ApplicationView. When I now inspect the DOM, I can see that App.ApplicationView is rendered twice (and also boxed):
...
<div id="appRoot" class="ember-application">
<div id="ember444" class="ember-view gotcha">
<div id="ember445" class="ember-view gotcha">
...more content..
</div>
</div>
</div>
...
EDIT:
I should have tried it first, before posting it here at stackoverflow... if I remove the {{#view App.ApplicationView}}{{/view}} declaration, it get's only rendered once, as expected ;)
So, the question which remains a miracle to me is is Ember.js really generating an enclosing <div id="ember666" class="ember-view"></div> for every {{outlet}}??
Why would Ember.js handle it this way? How can I prevent it from rendering App.ApplicationView twice? And, besides that, is Ember.js really generating an enclosing <div id="ember666" class="ember-view"></div> for every {{outlet}}? (I'm seeing this behaviour within my application)
By default, yes {{outlet}} will enclose your template in a <div>. However, you can change that behavior by specifying a view class on the outlet and defining the view class' tagName property to whatever you want.
For example, the outlet
{{outlet viewClass=App.HeaderContainer}}
With view
App.HeaderContainer = Ember.ContainerView.extend({
tagName: 'header'
});
will wrap the outlet in a <header> tag.
I am trying to render my application template, which is getting very complicated, so I want to split it up into separate <script type="text/x-handlebars">'s
I think I want to use the {{view}} helper, but I don't know. Let's say I have this:
<script type="text/x-handlebars" data-template-name="application">
<div id="wrapper" class="clearfix">
<hgroup>
<header>
<div class="logo"></div>
<h1 id="facilityName">{{facilityName}}</h1>
<div id="sessionInfo">
<a id="userName">{{user}}</a>
<a id="logOut" href="../logout">log out</a>
</div>
</header>
</hgroup>
{{view App.breadcrumbsView}}
</div>
</script>
And I want to load this next template inside of the one above:
<script type="text/x-handlebars" id="breadcrumbs">
<div id="breadcrumbs">
<p>
Network
{{#each breadcrumbObj}}
<span>></span><a {{bindAttr href="link"}}>{{name}}</a>
{{/each}}
</p>
</div>
</script>
Right now I am trying to do this with this code from my app.js
App.breadcrumbsView = Ember.View.create({
templateName: 'breadcrumbs',
breadcrumbObj: Util.breadcrumbs()
});
This is not working and I am getting Uncaught Error: assertion failed: Unable to find view at path 'App.breadcrumbsView'
Thanks
I think that you declared your App using var keyword. So it's not visible in handlebars template.
Change this
var App = Ember.Application.create();
To this
App = Ember.Application.create();
And you have to use extend instead of create when creating your views. Because ember will handle the object lifecycle like: create, destroy, add and remove binding etc.
#Marcio is right, you should .extend() and let the framework create it for you automatically by request. Furthermore when you extend the best practice is to use capitalized names like App.BreadcrumbsView.
See here a demo how it renders correctly doing it this way.
Hope it helps.
I'm using the {{render}} handlebars helper in one of my templates to (attempt to) render the template of another route on the same page. So for example:
<script type="text/x-handlebars" data-template-name="index">
{{#each model}}
{{name}}<br />
{{/each}}
{{render "people"}}
</script>
<script type="text/x-handlebars" data-template-name="people">
{{#each controller}}
{{name}}<br />
{{/each}}
</script>
In my people controller I set the model as usual:
App.PeopleRoute = Ember.Route.extend({
model: function() {
return App.People.find();
}
});
If I visit my people route directly (/people), I get a list of people. In my main template where the people template is being rendered into another template, the render helper doesn't call the PeopleRoute, so the model is never set (as far as I understand it).
Is there a way for me to set the content property on the PeopleController to the list of people objects?
I can't get any variation of this to work:
App.PeopleController = Ember.ArrayController.extend({
content: function() {
return App.People.find();
}
});
The render helper doesnt make any transitions and hence the model hook will not get called.. It just renders the template in the current context with the same-named controller... You can pass an optional model to the render helper which binds to the content of the same-named controller... Ember API
<script type="text/x-handlebars" data-template-name="index">
{{#each model}}
{{name}}<br />
{{/each}}
{{render "people" model}}
</script>
Sample fiddle here
Am new in emberjs and I am trying to copy a practice using solely jquery. I cannot seem to able to do it. Maybe I should approche the following in a different way?
I have a view:
{{#each clip}}
<div class="large-3 columns">
<div {{action panel_clicked uuid}} class="panel" style="overflow:hidden; height:200px;">
{{view Ember.TextField valueBinding="notes" type='hidden'}}
{{view Ember.TextField valueBinding="uuid" type='hidden'}}
{{{chunk}}}
</div>
</div>
{{/each}}
What I want to do is when I click on the class='panel' I get the uuid and use that to get the hidden text fields.
Usually I will just have a custom id for the hidden field such as id='notes_[uuid]' so in jquery I can just do something like $('#notes_' + uuid).val() However I haven't figure out a way to generate a dynamic id in the Ember.TextField.
So is there a way to dynamically generate id in Ember.TextField or I should think bout it differently?
Thanks
You could just pass in the object to the action.
{{#each clip}}
<div {{action panel_clicked this on="click"}} class"panel">
...
</div>
{{/each}}
Where this refers to the current object in the each loop.
Then your action would just take the object as a parameter:
panel_clicked: function(clip) {
alert(clip.get('someAttr')); // just to show it works
... // what you want to do
}
Check out the documentation as well.
Clicking on a view will generate a 'click' event on that view. The event.context will be the model bound to that view.
App.ActionPanelView = Ember.View.extend({
click: function(evt) {
var model = evt.context;
....
}
});
{{#each clip}}
{{view App.ActionPanelView valueBinding=clip}}
{{/each}}
Ember should maintain all the bindings. If you ever find yourself