Iron router dynamic template rendering - templates

In my meteor project, I have added iron:layout, iron:dynamic-template along with iron:router.
My question is, how can you prevent the dynamic template from rendering if there is no data available in the Session? The reason is, the dynamic template is currently being rendered with all html content within it except for data context. This is the problem when the user initially arrives onto the page.
I have a list of names on 'postlist' template. These are 'usernames' of the person who created the post. When a user clicks on the name, the template 'viewpost' is rendered with the relevant data passed...that is fine. But as stated earlier, there is no data context when the user first arrives onto the page. So the see all the content except for the dynamic content.
The following is my current code, with help received from my previous post. Meteor: Render template inside a template
HTML:
<template name="postlist">
<div class="container">
<div class="col-sm-3">
{{#each post}}
<li>{{fullname}}</li>
{{/each}}
</div>
</div>
{{> Template.dynamic template='viewpost' data=currentPost}}
</template>
Click event to capture post _id / helper file:
Template.postlist.helpers({
currentPost: function(){
return Posts.findOne(Session.get('currentPost'));
}
});
Template.postlist.events({
'click li': function(e){
e.preventDefault();
Session.set("currentPost", this._id);
}
});

This is one alternative hack method but understand is not good practice. This is what I am effectively wanting to achieve so you get an idea. But I would like non-hack suggestions for this issue. Thank you.
html:
<template name="viewpost">
{{#if hasData}}
<div class="container">
Post creator is : {{username}} - Info: {{body_text}}
</div>
{{/if}}
</template>
js:
Template.viewpost.helpers({
"hasData":function(){
return Session.get("currentPost");
}
});

Related

iron:router render multiple templates inside main yield

Good Afternoon,
I am trying to crate a page, where i keep the navigation and the footer template always on, and in the main yield, i load the data refering to the page i am accessing.
my problem is, in the routes.js file i used the following
Router.configure({
layoutTemplate:'mainLayout',
//notFoundTemplate:"notFoundTemplate",
//loadingTemplate:"loadingTemplate",
});
Router.route('/', function () {
this.render('navigation', {to: 'navigation'});
this.render('footer', {to: 'footer'});
this.render('carousel');
this.render('oper_areas');
this.render('partners');
});
and my mainLayout template goes like this
<template name="mainLayout">
<header>
{{> yield 'navigation'}}
</header>
{{> yield }}
<footer class="full-width">
{{> yield 'footer'}}
</footer>
</template>
so i am sending the navigation template to the navigation yield, the footer to the footer yield and this is working fine, and then i am trying to fill the {{> yield }} with the content of 'carousel', 'oper_areas' and 'partners', this will assemble all the information i need to create my main page, but only the last one is showing.
is there anyway i can put the 3 templates inside the same {{> yield }} at the same time?
thanks for the help in advance.

Ember.Component (block form): more than one outlet {{yield}}

I see that ember has a very nice mechanism for wrapping content in a component using the {{yield}} mechanism documented here.
So, to use the example in the documentation, I can have a blog-post component template defined like so:
<script type="text/x-handlebars" id="components/blog-post">
<h1>{{title}}</h1>
<div class="body">{{yield}}</div>
</script>
I can then embed blog-post into any other template using the form:
{{#blog-post title=title}}
<p class="author">by {{author}}</p>
{{body}}
{{/blog-post}}
My question is, can I specify two different {{yield}} outlets in the components template?
Something like this is possible via Named Outlets in Ember.Route#renderTemplate like so:
Handlebars:
<div class="toolbar">{{outlet toolbar}}</div>
<div class="sidebar">{{outlet sidebar}}</div>
JavaScript:
App.PostsRoute = Ember.Route.extend({
renderTemplate: function() {
this.render({ outlet: 'sidebar' });
}
});
I'm not sure I can take this path for a component which will not know what route's template would be rendering it.
EDIT 1:
For the sake of clarity, I'm trying to implement the Android Swipe for Action Pattern as an Ember component.
So, I'd like users of this component to be able to specify two different templates:
A template for the normal list item, and
A template for the actions that are revealed when a swipe on (1) is detected.
I want to make this into a component, because quite a lot of javascript goes into handling the touch(start/move/end) events, while still managing smooth touch based scrolling of the list. Users would supply the two templates and this component would manage handling of touch events and necessary animations.
I've managed to get the component working in the block form, where the block's contents are treated like (1). The second template (2) is specified through a parameter (actionPartial below) which is the name of a partial template for the actions:
Component Handlebars Template: sfa-item.handlebars
<div {{bind-attr class=":sfa-item-actions shouldRevealActions:show" }}>
{{partial actionPartial}}
</div>
<div {{bind-attr class=":sfa-item-details isDragging:dragging shouldRevealActions:moveout"}}>
{{yield}}
</div>
Calling Handlebars Template:
{{#each response in controller}}
<div class="list-group-item sf-mr-item">
{{#sfa-item actionPartial="mr-item-action"}}
<h5>{{response.name}}</h5>
{{/sfa-item}}
</div>
{{/each}}
Where the mr-item-action handlebars is defined like so:
mr-item-action.handlebars:
<div class="sf-mr-item-action">
<button class="btn btn-lg btn-primary" {{action 'sfaClickedAction'}}>Edit</button>
<button class="btn btn-lg btn-primary">Delete</button>
</div>
Problem is, actions from the user supplied partial, sfaClickedAction above, are not bubbled up from the component. A fact which is mentioned in the docs in para 4.
So, now I do not know how a user could capture actions that he defined in the supplied actions template. A component cannot catch those actions because it doesn't know about them either.
EDIT 2
I sprung a follow up question here
This blog post describes the most elegant solution for Ember 1.10+: https://coderwall.com/p/qkk2zq/components-with-structured-markup-in-ember-js-v1-10
In your component you pass yield names into {{yield}}s:
<header>
{{yield "header"}}
</header>
<div class="body">
{{yield "body"}}
</div>
<footer>
{{yield "footer"}}
</footer>
When you invoke your component, you accept the yield name as a block param... and use an esleif chain!
{{#my-comp as |section|}}
{{#if (eq section "header")}}
My header
{{else if (eq section "body")}}
My body
{{else if (eq section "footer")}}
My footer
{{/if}}
{{/my-comp}}
PS eq is a subexpression helper from the must-have ember-truth-helpers addon.
PPS Relevant RFC: proposal, discussion.
Since it is not possible to have two {{yield}} helpers within one component (how would the component know where one {{yield}}'s markup stops and the next one begins?) you may be able to approach this problem from a different direction.
Consider the pattern of nested components. Browsers do this already with great success. Take, for example, the <ul> and <li> components. A <ul> wants to take many bits of markup and render each one like a member of a list. In order to accomplish this, it forces you to separate your itemized markup into <li> tags. There are many other examples of this. <table>, <tbody>, <tr>, <td> is another good case.
I think you may have stumbled upon a case where you can implement this pattern. For example:
{{#sfa-item}}
{{#first-thing}}
... some markup
{{/first-thing}}
{{#second-thing}}
... some other markup
{{/second-thing}}
{{/sfa-item}}
Obviously first-thing and second-thing are terrible names for your specialized components that represent the things you'd want to wrap with your first and second templates. You get the idea.
Do be careful since the nested components won't have access to properties within the outer component. You'll have to bind values with both outer and inner components if they are needed in both.

Emberjs 1.0.0-RC: Parent-child controller relationships using itemcontroller and without using routes

I want to use itemcontroller to a render a list of comments as well as perfom CRUD on the comment. The CRUD aspect works fine. But there are two things not working wekll and they are described below. Here is the jsfiddle.
Just click on the add Comment button to see it add an additional edit form underneath the existing one.
When I click on the button to create newComment which uses the CommentNewController, it automatically also renders EmBlog.CommentEditController and comment edit form along side the form for new comment. Both forms are independent of each and use different controllers and templates, so I don't understand why rendering the form for newComment automatically adds an empty form for editComment.
The second issue is that I have an edit button which is surrounded by an #if helper. If the #if helper is true then the edit form should be displayed. To toggle the #if helper to true, I created a button that contains the {{action editComment }}. When I click the button, the edit form is not rendered. But note that, when the template first renders, it automatically displays an edit form, even when the edit button has not been clicked.
Relevant template and controllers ares pasted below.
It is when the post/show template renders that an edit form is automatically displayed without waiting for an edit button to be clicked, which sets the #if helper to true
<script type="text/x-handlebars" data-template-name="posts/show">
//displays the add button link
{{render 'comment.New' }}
<br/>
**render the comments and use CommentEdit as itemController**
{{render 'comments' comments}}
</script>
Comments Template
<script type='text/x-handlebars' data-template-name='comments'>
<ul>
{{#each controller itemController="CommentEdit"}}
<li>{{body}}</li><br/>
{{partial 'comment/edit'}}
{{/each}}
</ul>
</script>
It seems this #if helper is bye-passed as the form is rendered without clicking edit button and when you click edit button, it does nothing
<script type='text/x-handlebars' data-template-name='comment/_edit'>
{{#if controller.editComment}}
{{#if model}}
<form {{action save content on='submit'}}>
{{view Ember.TextArea valueBinding="content.body" placeholder="body"}}
<button type="submit"> save comment </button>
<button {{action cancel content}}> Cancel</button>
</form>
{{/if}}
{{/if}}
<br/>
<div>
<button {{action editComment }} {{bindAttr disabled="isEditingComment"}}> Edit Comment</button>
When you click on the addComment button, it adds a new empty edit form but it shouldn't even be calling the edit form
<script type='text/x-handlebars' data-template-name='comment/new'>
{{#if controller.isAddingNew}}
{{partial 'comment'}}
{{/if}}
<div>
<button {{action addComment}} {{bindAttr disabled="isAddingNew"}}>Add Comment</button>
</div>
</script>
The comment partial for adding new comment
<script type='text/x-handlebars' data-template-name='_comment'>
<form {{action save content on='submit'}}>
<button {{action cancel content}}> Cancel</button>
</form>
</script>
The controllers
EmBlog.CommentNewController = Em.ObjectController.extend({
needs: ['postsShow'],
isAddingNew: false,
addComment: function(){
this.set('isAddingNew', true);
}
});
EmBlog.CommentEditController = Em.ObjectController.extend({
isEditingComment: false,
editComment: function() {
this.set('isEditingComment', true);
}
});
EmBlog.CommentsController = Em.ArrayController.extend({
needs: ['postsShow'],
itemController: 'CommentEdit'
});
Thanks.
working jsfiddle based on mike's answer. Update the ember-data implementation to use Emberjs1.0Rc-6 and the CommentNewController now using Kris Seldon's buffered save as explained here, to avoid error: Attempted to handle event willSetProperty rootState.loaded.updated.inFlight. Thesame code but using ember-model as datastore instead of ember-data: http://jsfiddle.net/TVe4X/4/ and updated to use Emberjs 1.0.0-RC6 and current ember-model : http://jsfiddle.net/tHWM4/5/
When I click on the button to create newComment which uses the CommentNewController, it automatically also renders EmBlog.CommentEditController and comment edit form along side the form for new comment. Both forms are independent of each and use different controllers and templates, so I don't understand why rendering the form for newComment automatically adds an empty form for editComment.
When you click newComment, a new (unsaved) comment is created. Since your comments template uses the each helper to loop over all comments, it is updated to have a new entry. You could get around this by filtering the list based on model state (ie show if isNew), hiding new comments via css or better yet refactor to show the new-comment-form inline. Of course the comment body is blank so you normally would just see a new bullet. But the edit form shows up as well, because of the issue below.
The second issue is that I have an edit button which is surrounded by an #if helper. If the #if helper is true then the edit form should be displayed. To toggle the #if helper to true, I created a button that contains the {{action editComment }}. When I click the button, the edit form is not rendered. But note that, when the template first renders, it automatically displays an edit form, even when the edit button has not been clicked.
Agreed the {{#if editComment}} helper is not working - it always evaluates to true. This is because editComment is a function not a property. Instead you probably want to reference the property isEditingComment.
Updated jsfiddle here: http://jsfiddle.net/mgrassotti/TVe4X/1/

Ember.js: Complex view layout, what's the proper approach?

We're building app that allows users to post messages to various social media outlets. Our designer has created a series of interactions which allow users to change various settings in their application by use of sliding panels. I've done a quick screen cap to illustrate:
http://screencast.com/t/tDlyMud7Yb7e
The question I have is one of architecture. I'm not sure whether I should be using a View or a Controller (or both) to store some of the methods these panels will contain. Here's the HTML for the panels. They're not currently in a script tag or view:
<div id="panel-account-settings" class="panel closed">
<div class="panel-inner">
<i class="icon-cancel"></i>close
<h3>Account Settings</h3>
Google Analytics
Link Shortening
Disconnect Account
</div>
<div id="panel-google-analytics" class="panel-inner">
<i class="icon-arrow-right"></i>back
<h3>Google Analytics</h3>
<div class="toggle">
<label>Off</label>
</div>
<p>We <strong>won't</strong> append stuff to your links, so they <strong>won't</strong> be trackable in your Google Analytics account.</p>
<img src="{{ STATIC_URL }}images/ga-addressbar.png" />
</div>
<div id="panel-disconnect" class="panel-inner">
<i class="icon-arrow-right"></i>back
<h3>Disconnect This Account</h3>
<p>If you disconnect this account you will lose all the metrics we tracked for each message. Are you absolute sure you want to get rid of them?</p>
<div class="button-group">
Disconnect
</div>
</div>
</div>
The gear icon shown in the video is contained with the accounts template
<script type="text/x-handlebars" data-template-name="accounts">
{{#each account in controller}}
<div class="avatar-name">
<p>{{account.name}}</p>
<p>#{{account.username}}</p>
<i class="icon-cog" {{action "openPanel" Social.SettingsView account }}></i>
</div>
{{/each}}
</script>
which has a bare bones controller
Social.AccountsController = Ember.ArrayController.extend({
openPanel: function(view,account){
console.log(view,account);
$(this).parents(".item-account").addClass("active");
$("#panel-account-settings").prepareTransition().removeClass("closed");
}
});
as well as a Route and a Model. Given the interaction I'm looking to accomplish, my question is where should I be putting the pieces and parts? At a minimum I need to pass in the current Account model so that I know which account I'll be applying changes to. I thought about creating a mainPanel view which would contain the other view...something like this:
<script type="text/x-handlebars" data-template-name="panelView">
<div id="panel-account-settings" class="panel closed">
{{ partial "panelSettingsView" }}
{{ partial "panelAnalyticsView" }}
{{ partial "panelDisconnectView" }}
</div>
</script>
and then the action helper on the gear icon could pass in the account AND the required view. But I'm not sure if that's the right approach. I'd appreciate some input or suggestions. Thanks.
UPDATE 1
Ideally I'd like to eventually load in the content of each panel via AJAX but that's a want to, not a need to.
UPDATE 2
I tried creating a PanelView which would contain the logic on which panels to load:
Social.PanelView = Ember.View.extend({
tagName: 'div',
classNames: ['panel-inner'],
openPanel: function(view,account){
console.log(view,account);
}
});
But when I tried to call it from the gear icon I got an error. This:
<i class="icon-cog" {{action openPanel target="Social.PanelView" }}></i>
Threw this error:
Uncaught Error: assertion failed: The action 'openPanel' did not exist on Social.PanelView
Isn't that the correct syntax?
UPDATE 3
Adding version information:
DEBUG: Ember.VERSION : 1.0.0-rc.1
DEBUG: Handlebars.VERSION : 1.0.0-rc.3
DEBUG: jQuery.VERSION : 1.9.1
The best practice is to always put any DOM- or UI-related logic into your view, and leave data representation to the controller (i.e., a reference to a 'selected' item in the controller is a common example).
Your Social.AccountsController.openPanel method has logic that touches the DOM, which is entirely a view concern. A good start would be to move that logic into the view (Social. SettingsView ?).
It'd be a bit easier to understand your goals and offer more suggestions if you had a jsfiddle of what you have so far.
EDIT: Another good practice is to decompose things into very small objects. So you could explore having a selectedAccount ObjectController whose content is the currently chosen Account (and a corresponding View for it).

Selected item in a template, is there any solution for a context aware bindAttr?

The problem is as follows:
In our application we have several buttons, navigation icons etc., which we want to be 'selected' when they have been clicked. We can have multiple elements marked at the same time.
The secondary reason for me wanting to do this is that when I read the new Guides on emberjs.com I get the feeling that templates should be used more than stated before and that templates should have the responsibility of rendering the DOM, while the views should be used to handle sophisticated events (if any) or to create common/shared components to be reused in the application.
Currently the view is handling this:
app.NavView = Ember.CollectionView.extend({
...
itemViewClass: Ember.View.extend({
...
classNameBindings: ['isSelected:selected']
isSelected: function () {
return this.get('controller.selected') === this.get('content');
}.property('controller.selected')
})
});
But that is all the View basically is doing, I would like to drop the entire View and just use a template for this
I have tried with a template approach, and dropped the entire View concept.
<div id="main-menu">
{{#each content}}
<div {{bindAttr class="controller.isSelected:selected"}}>
{{{iconsvg}}}
{{name}}
</div>
{{/each}}
</div>
But my problem here of course is that bindAttr doesn't know about the context it’s in, and cannot 'send' this to the isSelected property on the controller to evaluate if it is this element that is selected or not.
Is there a good solution to do this without a view, or am I forced to use a view?
Or am I thinking the design part and responsibility of Templates/views/controllers wrong?
Any response is appreciated!
In the current documentation: http://emberjs.com/guides/templates/displaying-a-list-of-items/ there is a mention explaining how to use the {{each}} helper which doesn't override the current context.
In your case, this would be something like:
<div id="main-menu">
{{#each item in controller}}
<div {{bindAttr class="isSelected:selected"}}>
{{{item.iconsvg}}}
{{item.name}}
</div>
{{/each}}
</div>
Note I have remove the reference to 'controller' in the {{bindAttr}} since I assume it's an ember controller, then it's the current context, so basically isSelected is equivalent to controller.isSelected