從Ember中的組件發送動作

Question

我試圖弄清楚如何在一個地方處理“登錄”操作，該操作必須通過單擊按鈕和“輸入”按鍵來激活。

在我的模板中，我將所有內容包裝在“登錄功能”組件中

//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');            
        }
    }
});

但這是行不通的，因為操作沒有從模板按鈕發送到組件的操作，也因為我無法從組件執行轉換。

有人可以告訴最好的方法來解決這個問題嗎？

Answer 1

我認為這是因為您的按鈕是home模板的一部分。 也許應該將表單移至login-functions模板中，並通過執行{{login-functions}}從home模板中調用該表單。

對於重定向，組件無法執行重定向，我建議使用this.sendAction('didLogin')調用操作並在HomeController處理重定向。

Answer 2

將keyPress功能移出動作。

更新---這是一個有效的演示