mardi 19 avril 2016

Ember: Locking a form on page load without hard-coding "disabled"

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