I have several forms with several inputs. My boss has asked me to find a way to disable the forms and have a lock/unlock button. So the user will go to the form, click unlock to make changes, then lock and/or save the form. The main problem is trying to find out how to do this without hardcoding "disabled=true" into all of the inputs (probably several hundred).
I'm 90% of the way. I have the toggleLock action working, and I even have it so the form will lock even when you transition within the same route to a different model. The problem is that the form doesn't lock the first time the page is loaded or if the page is refreshed.
Here's the code: Available at: http://ift.tt/1XGWFSA
app/templates/meals/view.hbs
<form class="edit-form">
<div class="form-group">
<label for="exampleInputEmail1">Meal Name</label>
</div>
...
<button id="toggle-lock" type="button" class="btn btn-default" >Unlock</button>
</form>
app/routes/meals/view.js
import Ember from 'ember';
export default Ember.Route.extend({
beforeModel(controller) {
if (!this.get('isLocked')) {
controller.send('toggleLock');
}
},
model(params, controller) {
if (!this.get('isLocked')) {
console.log('attempting to lock due to transition');
controller.send('toggleLock');
}
return this.modelFor('meals').findBy('id', parseInt(params.meal_id));
},
isLocked: false,
lockForm: function() {
if (this.get('isLocked')) {
Ember.$('.edit-form').find('input').prop('disabled', true);
Ember.$('#toggle-lock').text('Unlock');
} else {
Ember.$('.edit-form').find('input').prop('disabled', false);
Ember.$('#toggle-lock').text('Lock');
}
}.observes('isLocked'),
actions: {
toggleLock: function() {
if (this.get('isLocked')) {
console.log('unlocking');
this.set('isLocked', false);
} else {
console.log('locking');
this.set('isLocked', true);
}
}
}
});
Aucun commentaire:
Enregistrer un commentaire