0

バックボーンに登録するためのボタンクリックイベントを取得するのに問題があります。その直前にリストしたイベント(入力でキーを押す)は正常に機能しています。

これが私の見解です:

App.Views.TaskAddForm = Backbone.View.extend({
    tagName: 'div',
    initialize: function(){


    },
    events: {
        'keypress #newTask': 'createNewTask',
        'click #newTaskBtn': 'createNewTask', 
    },
    template: App.Templates.TaskAddForm,
    render: function(){
        this.$el.html(this.template());
        this.$el.attr('id','taskAddForm');
        if (!this.newTask){
            this.newTask = this.$('#newTask');
            this.newPriority = this.$('#newPriority');
        }
        return this;
    },
    createNewTask: function(e){
        if (e.keyCode !== 13) {
            return;
        }
        var task = this.newTask.val();
        var priority = this.newPriority.val();
        if ($.trim(task).length > 0){
           this.collection.add({name: task, priority: priority});
        }
        this.clearForm();
    },
    clearForm: function(){
        this.newTask.val('');
        this.newPriority.val(1);
    }
});

これが私のテンプレートです:

<h2>Add Task</h2>
<div class="input-append">
    <select id="newPriority" class="input-medium" style="margin-right: 20px;">
        <option value="1">Now</option>
        <option value="2">Today</option>
        <option value="3">Tomorrow</option>
        <option value="4">Sooner</option>
        <option value="5">Later</option>
    </select>
    <input type="text" id="newTask" placeholder="New Task" class="input-xxlarge">
    <button class="btn" type="button" id="newTaskBtn">Add Task</button>
</div>

このテンプレートには実際には何も渡していないことがわかりますが、ユーザーが作業している内容に応じてこのフォームの追加ビューをページに追加および削除するため、引き続きテンプレートを使用したいと思いました。

入力のキー押下が機能します。そのすぐ隣のボタンをクリックしてください、そうではありません!レンダリング関数にthis.delegateEvents()を追加しようとしましたが、ボタンが機能するように何もしていません。私が見逃しているのは、比較的単純なものでなければならないような気がします。何か助けはありますか?ありがとう!

4

2 に答える 2

3

あなたのイベントはおそらく発火していますが、

if (e.keyCode !== 13) {
    return;
}

早期復帰の原因となっています。イベントのeventオブジェクトには がなく、確かに 13 ではありません。clickkeyCode

イベント ハンドラーを 2 つのメソッドに分けて、共通のメソッドを呼び出させるだけです。

events: {
    'keypress #newTask': 'taskNameChanged',
    'click #newTaskBtn': 'addButtonClicked',
},

taskNameChanged: function(e) {
  if(e.keyCode === 13) this.createTask();
},

addButtonClicked: function() {
  this.createTask();
}

createTask: function() {
  //...
}
于 2013-02-01T16:47:30.530 に答える
0

keyup代わりにを使用してみてください。問題が発生している可能性があります。jqueryのドキュメントには、これは公式のイベントではないため、ブラウザーなどによってサポートが異なる可能性があるkeypressと記載されています。

また、イベントが発生していないことを確信していますか? メソッドの開始時にアラートを貼り付けてみましたか? 昔ながらのアプローチが実際に役立つ場合もあります。

于 2013-02-01T17:17:48.557 に答える