I am making an ember app and trying to add a log in | sign up to the upper right of the screen if the user is not logged in and a link to their profile | logout button if they are logged in. However, while I can get one or the other to display, when I add an if statement to the Handlebars template nothing shows up. Any ideas on why this is happening?
Here is my template:
<div class="row">
<div class="medium-2 columns">
<img src={{"http://placehold.it/200x200"}} alt="Logo">
</div>
<div class="medium-2 columns">
{{#if session.isAuthenticated}}
<p>{{#link-to 'profile'}}Joe Schmidt{{/link-to}} | <a {{action 'invalidateSession'}}>Logout</a></p>
{{else}}
<p>{{#link-to 'login'}}Login{{/link-to}} | {{#link-to 'signup'}}Sign Up{{/link-to}}</p>
{{/if}}
</div>
</div>
{{outlet}}
Related
I have a conditional statement which contains a link. If something is true, the I'd like it to link to a 'place a' if it is not true I'd like it to link to 'place b'. But I am getting a build error.
I removed the conditional statement, and just have a normal link (link-to) ...so just a link to one place my code builds fine. The build error is just when I try to have 2 links. See below:
<div class="card text-xs-center">
{{if isShowingModal}}
{{#link-to 'place-a'}}
{{else}}
{{#link-to 'place-b'}}
{{/if}}
<div class="card-block">
<i class="fa fa-cogs" aria-hidden="true"></i>
</div>
<div class="card-block">
<h4 class="card-title">The Place</h4>
</div>
{{/link-to}}
</div>
The error says: Error: link-to doesn't match if - 8:19
application.js
export default Ember.Controller.extend({
isShowingModal: false,
actions: {
showNavMenu: function() {
this.toggleProperty('isShowingModal');
}
}
});
actually you are not ending link-to helper properly. it should end with {{/link-to}}
so in your case it will be
{{#link-to 'place-a' }} Place A {{\link-to}
{{#link-to 'place-b' }} Place B {{\link-to}
In your case complete code will be
<div class="card text-xs-center">
{{if isShowingModal}}
{{#link-to 'place-a' class='card-block fa fa-cogs'}}
The Place
{{/link-to}}
{{else}}
{{#link-to 'place-b' class='card-block fa fa-cogs'}}
The Place
{{/link-to}}
{{/if}}
</div>
For your help check it http://emberjs.com/api/classes/Ember.Templates.helpers.html#method_link-to
Yes this is because you haven't closed the link-to correctly. This will help you without duplicating your link-to statement.
<div class="card text-xs-center">
{{#link-to (if showingModal "place-a" "place-b") class='card-block fa fa-cogs'}}
<div class="card-block">
<i class="fa fa-cogs" aria-hidden="true"></i>
</div>
<div class="card-block">
<h4 class="card-title">The Place</h4>
</div>
{{/link-to}}
</div>
I have a component app/components/offer-listing.js:
import Ember from 'ember';
export default Ember.Component.extend({
isOfferShowing: false,
actions: {
offerShow() {
if (this.get('isOfferShowing')) {
this.set('isOfferShowing', false);
} else {
this.set('isOfferShowing', true);
}
}
}
});
and his template app/templates/components/offer-listing.hbs:
<div class="offer__container">
<div class="row">
<div class="gr-3">
<div class="offer__avatar" style="background-image: url('{{ offer.avatar }}')"></div>
</div>
<div class="gr-9">
<div class="offer__name" {{action "offerShow"}}>{{ offer.firstname }} {{ offer.lastname }}</div>
<div class="offer__age" {{action "offerShow"}}>{{ offer.age }} ans</div>
{{#if isOfferShowing}}
<div class="offer__description" {{action "offerShow"}}>{{offer.description}}</div>
{{else}}
<div class="offer__description" {{action "offerShow"}}>{{word-limit offer.description 50}}</div>
{{/if}}
{{#if isOfferShowing}}
<div class="+spacer"></div>
<a class="offer__button"><i class="fa fa-envelope"></i> Contacter par email</a>
<a class="offer__button"><i class="fa fa-phone"></i> Voir le numéro de téléphone</a>
{{/if}}
</div>
</div>
</div>
which is rendered in app/templates/index.hbs:
{{#each model as |offerUnit|}}
{{offer-listing offer=offerUnit}}
{{/each}}
The example is working great, however I would like to hide every "more" content when a new one is showing.
A working solution for this is available here : Using Ember component's methods inside template
Basically, either you keep a reference to the selected element in your controller and pass it to each of your offer-listing components. This way they could compare themselves with this reference to known if they need to be displayed or not.
Or you set a flag in each of your offer model depending on whether is needs to be displayed or not.
I want to know how I could uncheck all checkboxes in this template, I tried using jquery but it messes up with my observer on isChecked :
<script type="text/x-handlebars" data-template-name="conversations">
{{#each conv in model itemController='singleconv'}}
<div class="conversation-content-wrapper" {{action "clickConv" conv preventDefault=false}}>
<div class="history-message-assigned in-progress-closed" style="display:none;"><p><i class="icon-x"></i>Conversation closed</p></div>
<div class="history-message-assigned in-progress-assignation" style="display:none;"><p><i class="icon-assign"></i>Conversation assigned</p></div>
<div class="history-message-assigned in-progress-reopen" style="display:none;"><p><i class="icon-re-opened"></i>Conversation re-opened</p></div>
<div class="conversation-history">
<div class="conversation-time-history">{{{conv.timeAgoElement}}}</div>
<div class="conversation-details">
<span class="unread-numbers"></span>
{{input type='checkbox' class='chk-conversation' checked=conv.isChecked}}
<span class="conversation-name">{{conv.customer.name}}</span>
<span class="phone-number">{{conv.customer.cellPhoneNumber}}</span>
<p class="conversation-text">{{conv.lastMessage}}</p>
</div>
</div>
</div>
{{/each}}
</script>
How can I retrieve all the instances of this model's checkboxes and uncheck them all in a function?
The check box is checked based on each models isChecked property.
If you loop through each model and change isChecked to false it will uncheck all the check boxes.
I have a Ember.js page that displays a table of items and shows details of one of the items when it is selected. The controller looks like this:
CV.IndexController = Ember.ArrayController.extend({
itemController: "CurrVitae",
selectedCurrVitae: false,
actions: {
selectCurrVitae: function(currVitae) {
this.set('selectedCurrVitae', currVitae)
}
}
});
And the index controller is used in a template like this:
<div class="container">
<div class="curr-vitae-list">
{{#each curr_vitae in controller}}
<div class="curr-vitae-item row">
<div class="col-sm-2" {{action selectCurrVitae curr_vitae}}>
{{curr_vitae.name}}
</div>
<div class="col-sm-2">
<!-- NOTE: This method is defined on the item
controller (not the model) so the itemController is
available at this point. -->
{{curr_vitae.createdAtDisplay}}
</div>
<div class="col-sm-7">
<div class="embedded-cell">
{{curr_vitae.summary}}
</div>
<div class="embedded-cell">
{{curr_vitae.objective}}
</div>
</div>
</div>
{{/each}}
</div>
<div class="curr-vitae-view">
<h2>Details</h2>
<!-- EDIT: I have tried setting this
as {{#if selectedCurrVitae itemController="currVitae" }}
to match the way the #each handles item controllers but that did
not seem to work -->
{{#if selectedCurrVitae }}
<!-- NOTE: Down here, however, the item controller is not available
so I can't use methods defined on the item controller for the
currently selected instance. -->
{{ partial "cv_index_details" }}
{{/if}}
</div>
</div>
Question: The problem I'm running in to is that the itemController I've set in the index controller is not available when rendering the selectedCurrVitae in the cv_index_details.
More details:
Specifically, in the partial I want to reuse a editor component (taken from Noel Rappin's Ember.js book). So if the cv_index_details partial looks like this:
<h3 class="selected_cv">{{selectedCurrVitae.name}}</h3>
<div class="row selected_cv_summary">
<h4>Summary</h4>
{{block-editor emberObject=selectedCurrVitae propName="summary" action="itemChanged"}}
</div>
<div class="row selected_cv_experiences">
<h4>Experiences</h4>
{{#each experience in selectedCurrVitae.experiences itemController="experience"}}
{{ partial "experience_detail" }}
{{/each}}
</div>
So in this template, the itemChanged action is not found for the selectedCurrVitae instance. However, I use the same block-editor component for the experience instance and that works correctly; the itemChanged action defined on the ExperienceController is found.
selectedCurrVitae is outside of the itemController, the itemController is only applied inside the each (on each item, hence the name).
Probably the easiest way to accomplish this will be to reuse the item controller and use render.
Template
{{#if selectedCurrVitae }}
{{ render "cv_index_details" }}
{{/if}}
Controller
CV.CvIndexDetailsController = CV.CurrVitaeController.extend();
Or
Template
{{#if selectedCurrVitae }}
{{ render "currVitae" }}
{{/if}}
View
CV.CurrVitaeView = Ember.View.extend({
templateName: 'cv_index_details'
});
I am using ember-data 0.13 with rails. I have a basicinfo controller to handle basicinfo model update. update action is:
update: ->
#content.save()
#content.on('becameInvalid', (response) ->
alert Em.inspect(response.errors)
)
basicinfo.hbs:
<aside class='basicinfo-aside'>
{{#if inEditModel}}
<div class='control-group'>
<label for='basicinfo_about_me'>{{t '.basicinfo.edit.about_me'}}</label>
<div class='controls'>
{{view Em.TextArea id='basicinfo_about_me'
class='basicinfo-about-me'
name='basicinfo[about_me]'
valueBinding='aboutMe'}}
</div>
</div>
<div class='action-group'>
<span {{bindAttr class=':about-me-length-remain
hasAboutMeLengthRemain:muted:text-error'}}>
{{aboutMeLengthRemain}}
</span>
<button class='btn-cancel btn' {{action cancel}}>
{{t '.basicinfo.edit.cancel'}}
</button>
<button class='btn-update btn btn-primary' {{action update}}>
{{t '.basicinfo.edit.update'}}
</button>
</div>
{{/if}}
</aside>
<div class='basicinfo-inner'>
{{#unless inEditModel}}
<h5>
{{t '.basicinfo.about_me'}}
{{#if canManage}}
<a class='lnk-edit' href='#' {{action edit}}>
<i class='icon-edit'></i>
</a>
{{/if}}
</h5>
<p class='about-me'>{{aboutMe}}</p>
{{/unless}}
</div>
when I click update button with invalid data first time the error shows properly, but if I dont fix error and press update button again Ember shows: "Uncaught Error: Attempted to handle event willCommit on while in state rootState.loaded.updated.invalid. Called with undefined " How to solve it Thanks!
Ember data seems to be a little buggy when handling errors.
I would suggest you'd the following:
update: ->
#content.rollback() if #content.get('isError')
#content.save().then ((success_responce)->
<handle success responce here>
), (failure)->
<handle failure here>
Still a better solution in my opinion would be to disable the update button , based on the record.isError flag.
Another thing to consider is what to do when the server returns errors and you want to transition to another route (like with a cancel button).
Ember data will forbid you to ,complaining the record has inFlightAtrributes.
In this case you can again call record.rollback() to return the flags to initial state and continue your transition.