web-dev-qa-db-ja.com

クリック時に発生するバックボーンイベントOR Enterキーを押す

私はバックボーンに不慣れで、押したときにボタンがトリガーされる方法を探しています Enter クリックするだけでなく。現在、showPromptはクリックでのみ実行されます。押すと実行する最もクリーンなDRYestの方法は何ですか Enter 同様に、できればその入力フィールドに対してのみ。

(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イベントと異なりますか？

javascriptbackbone.jsjavascript-eventsjquery
14
Melbourne2991

DOM manipulationにjQueryを使用していると仮定すると、独自の「小さな」プラグインを作成して、 Enter 入力のイベント。 plugins.jsまたはお持ちのセットアップスクリプトファイルに入れてください。

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

この「enter」プラグインを作成したので、次の方法でenterイベントを聞くことができます。

events: {
  "click #add-friend": "showPrompt",
  "enter #friend-name": "showPrompt"
}
19
Daniel Aranda

eventのeventsハッシュにもう1つ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をどのように処理するかを理解してください。

17
Niranjan Borawake