2013-12-04 2 views
13

Я новичок в магистрали, и я ищу способ запуска моей кнопки, когда я нажимаю . Введите, а также нажмите. В настоящее время showPrompt выполняется только щелчком. Какой самый чистый DRYest способ выполнить его при нажатии Введите, предпочтительно, только для этого поля ввода.Магическое событие стрельбы по клику ИЛИ нажмите ввод

(function() { 

    var Friend = Backbone.Model.extend({ 
    name: null 
    }); 

    var Friends = Backbone.Collection.extend({ 
    initialize: function (models, options) { 
     this.bind("add", options.view.addFriendLi); 
    } 
    }); 

    var AppView = Backbone.View.extend({ 
    el: $("body"), 
    initialize: function() { 
     this.friends = new Friends(null, {view: this}); 
    }, 
    events: { 
     "click #add-friend": "showPrompt", 
    }, 
    showPrompt: function() { 
     var friend_name = $("#friend-name").val() 
     var friend_model = new Friend({ name:friend_name }); 
     this.friends.add(friend_model); 
    }, 
    addFriendLi: function (model) { 
     $("#friends-list").append("<li>" + model.get('name') + "</li>"); 
    } 
    }); 

    var appView = new AppView; 

}()); 

Также где я могу узнать больше об этом виде привязки событий? Разнообразные события отличаются от событий JS или jQuery в том, как они определены?

ответ

15

Вы можете добавить еще один event в ваш events хэш в AppView.

events: { 
    "click #add-friend": "showPrompt", 
    "keyup #input-field-id" : "keyPressEventHandler" 
} 

Где #input-field-id - это то, на которое вы хотите добавить мероприятие.

Затем добавьте eventHandler в AppView.

keyPressEventHandler : function(event){ 
    if(event.keyCode == 13){ 
     this.$("#add-friend").click(); 
    } 
} 

ПРИМЕЧАНИЕ. Этот код не проверен, но вы можете подумать над этим.

Посмотрите на this, чтобы понять, как Backbone ручками events в View.

+0

Так что мне нужно иметь две разные функции? Keypress evennt handler и подсказка show .. hm думаю, что все в порядке, не кажется очень сухим, хотя – Melbourne2991

+0

Вы можете думать о вызове 'showPrompt' снова на' keyup' с проверкой на 'keyCode'. –

+0

Вместо того, чтобы запускать событие 'click' на' # add-friend', просто вызвать 'this.showPrompt()' будет достаточно. –

17

Предполагая, что вы используете jQuery для манипуляций с DOM. Создайте «крошечный» плагин, который запускает . Введите событие на входах. Положите его на ваш plugins.js или любой другой файл сценариев установки, которые у вас есть:

$('input').keyup(function(e){ 
    if(e.keyCode == 13){ 
     $(this).trigger('enter'); 
    } 
}); 

Имея ввести плагин, Backbone.js должен быть как-то просто, как это:

events: { 
    "click #add-friend": "showPrompt", 
    "enter #friend-name" : "showPrompt" 
} 
+0

Или, если вы хотите, чтобы он работал с любым элементом (а не только с вводом), вы можете сделать что-то вроде следующего для фрагмента jQuery: $ (document) .keyup (function (e) { if (e.keyCode == 13) { $ (': focus'). Trigger ('enter'); } }); –

Смежные вопросы