web-dev-qa-db-ja.com

バックボーンJSビューイベントが起動しませんか？

私はBackboneJSをいじってみようとしていますが、これまでのところ、すべてが理にかなっていてスムーズに機能しているようです。

ただし、以下のコードでは、カスタムイベントが発生していないようです。以下のコードの何かが、なぜそうなるのかについて際立っていますか？ビューで何かを「初期化」する必要がありますか？コード/構造上の他のポインタも同様にクールです。以下は私の完全なJS/HTMLです。

JS

var Todo = Backbone.Model.extend({});

var TodoCollection = Backbone.Collection.extend({

    model: Todo,
    url: '/Home/Todos'

});

var AppView = Backbone.View.extend({

    // where it should listen, required?
    el: $(".content"),

    events: {
        "keypress #new-todo": "enter"
    },

    initialize: function () {
        // _.bindAll(this, "render", "createOnEnter");
        // this.collection.bind("all", this.render);
    },

    hi: function () {
        alert('ohai');
    },

    render: function () {
        var lis = '';
        $.each(this.collection.models, function () {
            lis += '<li>' + this.get('Text') + '</li>';
        });
        $('#todo-list').append(lis);
        return this.el;
    },

    enter: function (e) {
        alert('hi');
    }

});


var TodoController = Backbone.Controller.extend({

    routes: {
        "": "todos"
    },

    initialize: function (options) { },

    todos: function () {
        var todolist = new TodoCollection();
        todolist.fetch({
            success: function (data) {
                var appview = new AppView({ collection: data });
                appview.render();
            }
        });
    }

});

$(function () {
    window.app = new TodoController();
    Backbone.history.start();
});

HTML

<div id="todoapp">
    <div class="content">
        <input id="new-todo" placeholder="What needs to be done?" type="text" />
        <div id="todos">
            <ul id="todo-list">
            </ul>
        </div>
        <a href="#">say hey</a>
    </div>
</div>
jquerybackbone.js
28
aherrick
el: $(".content")

これを試して：

var appview = new AppView({ el:$(".content"), collection: data });

DOMがまだ作成されていないため、そこでjQueryを呼び出すことはできません。私の例として、または初期化でビューがロードされるときに、これを行う必要があります。

37
Julien

さらに、イベントを機能させるには、レンダリング関数のコンテンツをthis.elにバインドする必要があります。イベントはすべて指定した要素にバインドされるため、イベント生成要素を子として、委任者として機能する要素にバインドする必要があります。

16
Jessica Jacobs

承認された回答には欠点があります。 {el：$（ "。content"）}を設定した場合、あまり動的にすることはできません。 DOM内の「.content」要素を再利用することはできません。このビューでremove（）を呼び出すとすぐに、$（ "。content"）もなくなります。

その情報を渡すために別のパラメーターを使用します。

{ renderTarget: $("#content") }.

レンダリングの開始時にビューをDOMに挿入します。

initialize: function (options) { 
    options = options || {}; 
    this.renderTarget = options.renderTarget || this.renderTarget;
},
render: function () {
    if (this.renderTarget) {
       $(this.renderTarget).html(this.el);
    }
    ... render stuff into $(this.el) ...
    return this;
}
1
user2032300