Newbie question about datas in controller

Learning Team
1

Hello,

I’m quite a newbie in Ember, I first learn Vue.js and I friend told me to try Ember so I just try to do some things around Ember and I am stuck with a newbie problem.

I just generate a component A, for my login form and I don’t understand how to access the model of the template and pass is in an action for example.

I don’t figure how to attach my inputs to my model of my template. Here is my template and controllers.

import Ember from 'ember';

export default Ember.Component.extend({
  model : function() {
    return {
      email : '',
      password : ''
    }
  },
  session: Ember.inject.service(),
  beforeModel: function() {
    return this.get('session').fetch().catch(function() {});
  },
  actions : {
    signIn: function(email, password) {
      var datas = {
        provider : 'password',
        email : 'test',
        password : 'testest'
      };
      this.get('session').open('firebase', datas).then(function(data) {
        console.log(data);
      });
    }
  }
});


<div class="centered">
  <div class="logoLogin">
    <img src="img/logo3.png" alt="">
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="grid simple">
        <div class="grid-title no-border">
        </div>
        <div class="grid-body no-border">
          <div class="row">
            <div class="col-md-12">
              <div class="input-group transparent">
                <span class="input-group-addon">
                  <i class="fa fa-user"></i>
                </span>
                <input type='text' value={{email}} class='form-control' placeholder="Adresse mail">
              </div>
              <br>
              <div class="input-group transparent">
                <span class="input-group-addon">
                  <i class="fa fa-key"></i>
                </span>
                <input type="password" value={{password}} class="form-control" placeholder="Mot de passe">
              </div>
              <br>
              <div class="checkbox check-primary right">
                <input id="checkbox3" type="checkbox" value="1">
                <label for="checkbox3">Se souvenir de moi</label>
              </div>
              <button {{action "signIn" email password}} type="button" class="btn btn-block btn-primary btn-cons">Se connecter</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

If someone can explain to me how to do this …

Thank you <3

2

I think you’re just confusing Component with Route.

Vue’s approach starts from the bottom (with components), then work your way up to route. Ember, being a framework designed for ambitious large app, approach the problem from top down. You need to architect your application’s route system first, before you goes down to the template.

The component in Vue and the component in Ember, despite having the same name, is fairly different. Vue regards everything as a component. Ember’s components encapsulates state and native DOM interaction. Custom components in Ember, although not rare, is also not common. Especially in the case of trivial apps like TODO list.

Now for your specific case, instead of generating a component, you should be generating a route.

> ember g route form

This will give you a route template and a route js file. Move your template and js content to these new files and you should be good.

2 Likes
3

Oh tank you for your answer. It seems really different in some point, and I’ll need some time to get used to the new logic. I’ll try this and I’ll come to you if this doesn’t work.

See ya :smiley: