dimanche 26 juin 2016

Emberjs data binding model to controller

New to EmberJS and trying to follow this tutorial here: http://ift.tt/28Y3fFe

This tutorial has a "Contact" page which lets user send a feedback using email and message box.

I have completed the exercise using Option 1 for Lesson 3 but I am not sure I am doing it right. It fulfils the requirements, I can submit message and I can see a list of messages in my Contact Messages page (not Contact page, notice 's').

My contact.js controller looks like this:

import Ember from 'ember';

export default Ember.Controller.extend({

  emailAddress: '',
  message: '',

  emailValid: Ember.computed.match('emailAddress', /^.+@.+\..+$/),
  hasMessage: Ember.computed.gte('message.length', 5),
  formValid: Ember.computed.and('emailValid', 'hasMessage'),
  isDisabled: Ember.computed.not('formValid'),

  actions: {
    sendFeedback() {
      // alert(`Submitting your feedback\n\nFrom: ${this.get('emailAddress')}\n\nMessage: ${this.get('message')}`);

      let newContact = this.store.createRecord('contact');
      newContact.email = this.get('emailAddress');
      newContact.message = this.get('message');
      newContact.save();

      this.set('responseMessage', 'Feedback sent!');
    }
  },

  willTransition() {
    this.get('model').rollbackAttributes();
  }
});

If I do it like this, this is me just telling Ember to get the value from the HTML form manually using this.get('emailAddress'); and this.get('message');, constructing a new Contact instance, set its respective values and then call save() method.

My question is, what happened all to the data bindings ?

Is the way I'm doing it even right ?

Lesson 3 was about creating Library model, and its routes index and new. The model is data bound to the UI. Updating the UI also update the model associated with the UI, without me needing to manually tell it to get the value from UI and set it into the model.

I was expecting something similar for my Contact page but the way I am doing it doesn't feel right...I am manually setting the value for the model...




Aucun commentaire:

Enregistrer un commentaire