从Ember中的组件发送动作

Question

I'm trying to figure out how to handle in a single place a "login" action, that must be activated from a button click and "enter" keypress;

in my template I've wrapped everything inside a "login-functions" component

//template home.hbs
{{#login-functions}}     
    <input id="email" type="email" class="validate">
    <input id="password" type="password" class="validate">

    <div id="login" {{action "login"}}>     
{{/login-functions}}


//component components/login-functions.js
export default Ember.Component.extend({
    actions: {
        login: function() {
            var email = $('#email').val();
            var password = $('#password').val();
            var self = this;

            Utils.login(email, password).done(function(res) {
                localStorage.setItem('Access-Token', res.data.token);
                localStorage.setItem('userId', res.data.user_id);
                self.transitionToRoute('feed');
            })
            .error(function(error) {
                //handle error
            });
        }
    },

    keyPress: function(event) {
        if (event.charCode === 13) {
            console.log('login attempt');
            this.send('login');            
        }
    }
});

But this doesn't work because the action is not sent from the template button to the component's action and also because from the component I can't perform the transition.

Can someone tell the best way to handle this?

Answer 1

I think it's because your button is part of your home template. Maybe the form should be moved in your login-functions template and be called from your home template by doing {{login-functions}} .

And for the redirection, components can't do them, I'd suggest to call an action using this.sendAction('didLogin') and handle the redirection in your HomeController .

Answer 2

Move the keyPress functions out of the actions.

Updated --- Here is a working demo