Hi I have the following Component Template:
test-component.hbs: (produces img tag per model)
{{#each titleModels}}
<div class="item">
<img {{action "owlItemClicked" id index on="click" }} {{bind-attr src=img}}></img>
</div>
{{/each}}
Its used in parent template
parent.hbs:
{{test-component action="titleClicked" parentController=controller titleModels=model}}
On titleClicked action it is suppose to remove the clickedModel and refresh the template to show the removed view.
parent-controller.js:
modelChanged: false,
actions: {
titleClicked: function(){
self.get('model').removeObject(aSelectedModel);
self.set('modelChanged',true);
}
}
The test-component observes changes to titlesModel and rerenders the template:
test-component.js:
titleModelsChanged: function(){
this.rerender();
}.observes('parentController.modelChanged'),
this.rerender methos is called successfully and the specific html tag (e.g the one defined below) for the removed model is no longer present in the DOM for html page generated from test-component.hbs as expected.
<img {{action "owlItemClicked" id index on="click" }} {{bind-attr src=img}}></img>
The img tags for the remaining models are present when inspecting the dom. However they are not displayed out the actual html page ( i dont see the actual imgs), even though the are present in the DOM when I inspect the elements.
How do I display the img tags of the remaining models after rerender on the html page ?
First, two small notes. The <img> tag must not have a closing tag. So no <img></img> but simply <img> (or <img /> alternatively).
The context-changing {{each}} as you use it is deprecated in current and future versions of Ember.js. So you should rewrite your component as
{{#each titleModels as |titleModel|}}
<div class="item">
<img {{action "owlItemClicked" titleModel.id titleModel.index on="click" }} {{bind-attr src=titleModel.img}}>
</div>
{{/each}}
Now to your question. Given that the <img> tags are in the DOM but the actual image is not visible, the problem must be in the src attribute of the images. If you open the URL in the src in a separate tab, do you see the image you're supposed to see?
The JSBin http://emberjs.jsbin.com/mitadovero/edit?html,js,output solves the problem.
Related
If I declare a component like this:
<p>
{{#x-autosuggest source=model destination=tags minChars=0}}
<img src="img/small_avatar.png" title="{{name}}" class="avatar"/>
{{/x-autosuggest}}
</p>
I want the name that field to come from a context I pass using the new block params syntax. I've tried the code sample below but the context is still the context of the controller and not the argument I pass using yield in the component's hbs file.
<ul class='selections'>
{{#each destination as |selection|}}
<li class="selection">
<a class="as-close" {{action "removeSelection" selection}}>x</a>
{{yield selection}}
{{displayHelper selection searchPath}}
</li>
{{/each}}
</ul>
How can pass the selection argument so I can set the name attribute in the original code snippet?
I've recreated a basic example with this jsbin
You need to add as |name| where you're using your component to get the yielded value.
<p>
{{#x-autosuggest source=model destination=tags minChars=0 as |name|}}
<img src="img/small_avatar.png" title="{{name}}" class="avatar"/>
{{/x-autosuggest}}
</p>
I have quite many templates that I render into the application template. The application template, however, has only the {{outlet}} and nothing else.
The home template, must render directly into the application template. But all other templates must be rendered along with the navbar and sidebar.
Currently, I am using partial to render the common data in all the other templates (except 'home')
How can I solve this scenario? All I need is that home should render directly in the body, while all the other templates must render along with the navbar and sidebar.
I might be missing something very obvious here. What should I do to render home in one template and the rest in another?
UPDATE 1
Application Template
{{#unless renderNav}}
{{outlet home}}
{{else}}
{{partial 'navbar'}}
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">
{{outlet}}
</div>
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
Link
Link
</div>
</div><!--/span-->
</div><!--/row-->
</div><!--/.container-->
{{/unless}}
UPDATE 2
The above code causes rendering problems. Navigating to the home template causes no issue. But in all other templates, the first page rendered stays on the top while the next pages are rendered below it.
For example, if after 'home', I transition to 'first', 'first' renders two elements A and B.
If I next transition to 'second', which renders C, what I get is A and B and C, instead of C.
UPDATE 3
Solved the error in the previous UPDATE by observing the currentPath property in the application controller. But now in the 'home' route, the 'home' template is not displayed. Instead the navbar is rendered with an empty outlet.
I renamed my outlets and forced HomeRoute to render into outlet 'home'. But still there is no change. All other templates are rendered seamlessly, but 'home' is not rendered at all.
I confirmed that the boolean was false in the HomeRoute, but still the navbar template is being rendered.
You can create a template where navbar and sidebar can be rendered in and all templates except home are nested routes of this new template.
This of course can give you trouble with url, so another way to go is to use a boolean computed property in the application controller based on currentPath that renders or not your partials
e.g.
App.ApplicationController = Ember.Controller.extend({
showPartials: (function() {
this.get('currentPath') != 'home'
}).property('currentPath')
});
Then in your application template do something like
{{#if showPartials}}
{{partial "navbar"}}
{{partial "sidebar"}}
{{/if}}
I have a jsfiddle with a route as shown below, which is exactly thesame as the one in emberjs guides and when I click on the #linkTo helper attached to {{post.title}}, it ought to show me the individual post but it does not and instead the console shows this errors:
Uncaught Error: assertion failed: Cannot call get with 'id' on an undefined object.
Also when I click the posts link on the home page, it displays all the titles but in the console, it also shows this error:
Uncaught Error: Something you did caused a view to re-render after it rendered but before it was inserted into the DOM.
EmBlog.Router.map(function() {
this.resource("posts", function(){
this.route('show', {path: '/:post_id'}) ;
});
});
The template which is thesame as the emberjs guides
<script type="text/x-handlebars" data-template-name="posts/index">
{{#each post in content}}
<p>{{#linkTo 'posts.show' post}} {{post.title}} {{/linkTo}}</p>
{{/each}}
</script>
I looked at this commit that added support for string literals as param for {{linkTo}} and in particular the suggestions below from that commit:
Now, Ember allows you to specify string literals as arguments. {{#linkTo post popular}} would look up the "popular" property on the current context and generate a URL pointing to the model with that ID. While {#linkTo post "popular"}} would treat the string literal "popular" as the model.
It seems like the only issue was you forget to pass the context to the linkTo posts.edit helper in the posts/show template.
<script type="text/x-handlebars" data-template-name="posts/show">
<h1>Post</h1>
<p>Your content here.</p>
<h3> {{title}} </h3>
<h3> {{body}} </h3>
<br/>
<p> {{#linkTo 'posts.index'}} back {{/linkTo}}</p>
<p> {{#linkTo 'posts.edit' content}} Edit the post {{/linkTo}}</p>
</script>
Here is a working fiddle, BTW I've cleaned up a bit, some things seemed useless for me.
http://jsfiddle.net/rxWzu/9/
I have the following code in a ember.js template. userController is an ArrayController, with multipe "users" within.
{{#each CollaborativeEditor.userController}}
{{#view CollaborativeEditor.OnlineUserView userBinding="this"}}
<div class="avatar">
<div class="avatar_name">{{name}}</div>
<div class="avatar_status">{{status}}</div>
</div>
<div id="dropdown-1">
<ul>
<li><a href="#" {{action startChat target="onlineUser"}}>Talk to </a></li>
</ul>
</div>
{{/view}}
{{/each}}
This is the code of the respective view:
CollaborativeEditor.OnlineUserView = Ember.View.extend({
tagName: 'li',
startChat : function() {
console.log(this.get('user'));
}
});
Although, the name and status is set correctly for each user, the startChat action attached to the link always prints the first user of the array to the console.
What is wrong with the binding ?
Thanks a lot for your request, to put it in a jsfiddle !
While I was trying to reproduce the error there, I realized the problem, and it has nothing to do with ember.
The div with id="dropdown-1" was called from another link and it was always the same id, therefore always the same action with its user-binding.
Now I've bound the Id to the user-object and it works perfectly.
I'm triyng to use the view helper inside my {{#each}} template blocks without using global paths (my controllers create and destroy their own views).
Examples. Given a view with a myList array property, and an itemButton child view:
This will work
<script type="text/x-handlebars" name="my-list-view">
{{#each myList}} <!-- App.myListView.myList -->
{{view App.myListView.itemButton}} {{title}}
{{/each}}
</script>
This will not:
<script type="text/x-handlebars" name="my-list-view">
{{itemButton}} <!-- works fine outside the each -->
{{#each myList}}
{{view itemButton}} {{title}} <!-- itemButton view not found -->
{{/each}}
</script>
I do not appear to be able to access the parent view from the each view helper (or in fact access anything other than the properties of the objects being iterated).
The hacky workarounds I've come up with are:
Add the view I want to use to the items I'm iterating over.
or
Creating a collectionView in App.myListView
Create an itemViewClass view in that collection view class
Move the itemButton view inside the itemViewClass
Replace {{#each}} with {{#collection}}
or
Create a custom handlebars helper for iteration.
Both of these options seem horrible.
Surely there's a better alternative than creating 2 new classes (and nesting 4 views deep) just to iterate over a list, though. Is there a replacement handlebars helper I can use instead?
Workaround implementations
Option #1 : Modifing the content array
http://jsfiddle.net/FQEZq/3/
Disadvantages: Having to add the view to each model instance just for iteration.
Option #2 : Custom collection view
http://jsfiddle.net/ST24Y/1/
Disadvantages: Now you have two additional views that you do not need / want, and less control of markup. References from the child view to the parent instance now requires parentView.parentView.parentView.
#each is too limited for your requirements. You can make it work if you're willing to use a global path to the view you want to nest within the #each. Otherwise, your collection view approach is best. Adding the view to the model instance is likely to muddy your app design something fierce, so I would avoid that.
One idea to keep your templates clean is to take advantage of Ember.View properties like:
collectionView - Return the nearest ancestor that is an Ember.CollectionView
itemView - Return the nearest ancestor that is a direct child of an Ember.CollectionView
contentView - Return the nearest ancestor that has the property content.
The big thing here - options.
Hooks for how you wish to use a template are available. These are:
<-- render templates/name.js -->
{{partial 'name'}}
<-- render views/name.js -->
{{view 'name'}}
<-- render views/name1.js with controllers/name2.js -->
{{render 'name1' 'name2'}}
<!-- see also: -->
{{output}}
{{output 'named'}}
{{yield}}
An example variant of your initial template showing 4 different options:
<script type='text/x-handlebars' data-template-name='my-list-view'>
<h2>Option 1</h2>
{{#each myList}}
{{! the 2nd parameter will look for itemButtonController }}
{{render 'itembutton' itemButton}}
{{/each}}
<h2>Option 2</h2>
{{#each myList}}
{{! using an Ember Component }}
{{#item-button }}
some static text OR {{dynamic}}
{{/item-button}}
<!-- in component/item-button.hbs add {{yield}} for where you want the static content to output -->
{{/each}}
<h2>Option 3</h2>
{{#each myList}}
{{! if the button is to be a link }}
{{#link-to 'route' parameter tagName='button' classNames='btn'}}
{{title}}
{{/link-to}}
{{/each}}
<h2>Option 4</h2>
<p>Ludicrous example showing almost every reference option!</p>
{{! focus the context on subview data }}
{{#with someArrayOrCollectionOfView}}
{{! prepend type to add context - here returning back up to this view's properties }}
{{#each view.myList}}
{{! this is equivalent to someArrayOrCollectionOfView[x].name }}
{{name}}
{{! a button that hooks in route, model, and 2 controllers, and applies a target for the output when clicked }}
{{#link-to 'page' controllers.page.nextPage target='outlet' tagName='button' disabledWhen=controller.disableNext }}
{{model.buttonName}}
{{/link-to}}
{{/each}}
{{/with}}
{{! generic default target (automatic) }}
{{outlet}}
{{! example of a named target }}
{{outlet 'footerlinks'}}
</script>
Mmmm... reference for further reading:
Ember.Handlebars.helpers