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.
Related
first time poster! I'm still fairly new to coding and Django...
I'm looking to create a django if statement to see if a certain button is pressed. I have a toast set up to show an error warning if a search returns no results, but it also pops up if the user clears the search.
Here's the button(s)
<div class="input-group-append">
<button class="form-control rounded-circle btn form-button ml-2" type="submit">
<span>
<i class="fas fa-search"></i>
</span>
</button>
<button class="form-control rounded-circle btn form-button ml-2 closebutton" type="clear" name="clear">
<span>
<i class="fas fa-times"></i>
</span>
</button>
</div>
I'd like it to spot if the button with the name/type "clear" is clicked, then it won't run the toast. Toast is below:
{% if button == 'clear' %}
<div class="toast custom-toast rounded-0 border-top-0" data-autohide="false">
<div class="arrow-up arrow-danger"></div>
<div class="w-100 toast-capper bg-danger"></div>
<div class="toast-header bg-white text-dark">
<strong class="mr-auto">Error!</strong>
<button type="button" class="ml-2 mb-1 close text-dark" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body bg-white">
{{ message }}
</div>
</div>
{% endif %}
I'd like it to spot if the button with the name/type "clear" is clicked, then it won't run the toast.
This if statement is only run on the server when it renders the HTML for the web page. It is checking if a variable named button has the string value "clear". This has nothing to do with any HTML elements in the page, let alone the name of a particular <button>. Instead, the value of the variable button comes from the "context" when your Python calls one of the render functions.
I'm looking to create a django if statement to see if a certain button is pressed.
There are two different ways to handle button clicks:
Submit a form to the server which then returns a response with a new page. This can be the same Django template rendered with different values in the context in order to get the behavior that you want.
Add an onclick handler to the button. This should be a JavaScript function that peforms the action you want. It can manipulate the elements in the page to add a toast or anything else.
The first option is very slow because it will require a new network request. The second option is probably preferred here since it will be very responsive to the user's actions.
I want to know how we can make modals which have routes.
In Trello, whenever you click on a card, the route changes from abc.com/b/personal to abc.com/c/some-random-string and the card opens in a modal. Also, when you close the modal, you get redirected to the previous url (abc.com/b/personal).
I want to know how can we achieve this using Emberjs.
Example: https://trello.com/b/ezWgKsol/sales-enterprise-feature-requests-sample
Here is my modal (using foundation) where we delete a record:
<div class="reveal" id="deleteLocationModal" data-reveal>
<div class="row">
<div class="columns">
Are you sure you want to delete this location?
</div>
</div>
<div class="row">
</div>
<div class="row">
<div class="columns">
<button id="cancelButton" class="secondary button" data-close type="button">Cancel</button>
<button id="deleteButton" class="button" {{action "deleteLocation" model}} data-close type="button">Delete</button>
</div>
</div>
</div>
The router has the falling in the actions hash:
actions: {
deleteLocation(model) {
Ember.assert("Params must be provided", model);
model.save().then(( /* response */ ) => {
this.transitionTo('locations'); //locations is my index page.
//flash message to inform the user of success.
});
}, (error) => {
//handle error.
// display flash message
// rollback any dirty attributes
});
}
I hope this helps,
Jeff
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}}
Is there a way to refactor the following code to make it cleaner or is a {{#if}} the cleanest way to solve this?
{{#if isDirty}}
<button {{action 'save' this}} class="btn">Save</button>
<button {{action 'discard' this}} class="btn">Discard</button>
{{else}}
<button class="btn disabled">Save</button>
<button class="btn disabled">Discard</button>
{{/if}}
I prefer to solve this with CSS:
<button {{bindAttr class=":btn content.isDirty:enabled:disabled"}}>Save</button>
You could use CSS to prevent the clicks when disabled (if your target browsers support it). Or just let the clicks go through and only call commit/rollback if content.isDirty.
Another option would be to bind the disabled property of the button:
<button {{bindAttr disabled="content.isDirty:enabled:disabled"}}>Save</button>
Hi there i have a small question that belonging to my small ember application.
JSFiddle upload is here. I used bootstrap accordion to visualize my tickets. When i click on the "click" it adds another accordion into my view. But sadly it cannot be opened or used. Every accordion i dynamically created cannot be opened or closed. There is no error or exception thrown and from my point of view everything should work fine. My click-function looks like this:
click: function() {
this.counter++,
name = this.name+this.counter.toString(),
tre = App.Ticket.create({
Text: "try",
id: name
});
this.pushObject(tre);
}});
The belonging html is here:
<div class="accordion-group">
{{#each content}}
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" {{bindAttr href="id"}}>
Ticket ID/Störfall
</a>
</div>
<div {{bindAttr id="id"}} class="accordion-body collapse in ">
<div class="accordion-inner">
{{Text}}
</div>
</div>
{{/each}}
</div>
I hope you can help me.
You can add an action helper to the accordion link title
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordion2"
{{bindAttr href="item.id"}}
{{action "click" item target="view"}}>
Ticket ID/Störfall
</a>
Then implement a click handler event in your view
App.TicketView = Em.View.extend({
click:function(context) {
var el = this.$('a[href='+context.get('id')+']');
el.toggleClass('collapsed');
this.$('#'+el.attr('href')).toggleClass('in');
}
});
Here's a working fiddle