12

この問題が何百万回も出てくることは知っていますが、私は答えを見てきましたが、どれも役に立ちません。

JS フィドル: http://jsfiddle.net/ZrYYy/

var LoginView = Backbone.View.extend({

    initialize: function () {

        console.log('Login View Intialized');
        this.el = $('#login-container');

    },

    // Setup the events (mainly the login)
    events: {

        // Login - function
        "click #login-btn" : "checkLogin"

    },

    // Actually authorization function
    checkLogin: function() {

        console.log("Authorizing login details with server...");

    }

});

// Get it all up and going
var newLogin = new Login();
var loginView = new LoginView({model: newLogin});

フィドルでは、通常の $('#login-btn').click(); をバインドすると、自分のセットアップ（クロムを使用）では機能しませんが、イベントは正常に機能します。バックボーン クリック イベントはまったく機能しません。

これは、ヘッダーが自分のコードでどのように見えるかです

<link href="assets/admin/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="assets/admin/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<link href="assets/admin/css/style.css" rel="stylesheet" type="text/css">
<script src="assets/admin/js/jquery-1.9.1.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="assets/admin/backbone/login.js"></script>
<script src="assets/admin/js/bootstrap.min.js"></script>

これらをフッターに含めるのがベスト プラクティスであることはわかっていますが、今のところ、この問題が存在する間は問題ありません (?)。

4

4 に答える 4

33

View 要素を次のように設定しています。

var LoginView = Backbone.View.extend({
  initialize: function() {
    this.el = $('#login-container');
  }
});

すべてのバックボーン ビューは、作成時に切り離された DOM ノードを取得しますel。このように設定するとthis.el、Backbone は要素が変更されたことを認識せず、元の切り離されたノードのイベントを引き続きリッスンします。

el代わりに、ビューでプロパティを宣言してみてください。これは、ビューを既存の要素にバインドする正しい方法です。

var LoginView = Backbone.View.extend({
  el: "#login-container",
});

elビューの有効期間中にビューを動的に設定する必要がある場合はview.setElement、 を使用する必要があります。これにより、Backbone が をevents新しい要素にバインドできるようになります。

var LoginView = Backbone.View.extend({
  initialize: function() {
    this.setElement($('#login-container'));
  }
});

コメントに基づいて編集:ページが完全に読み込まれる前にビューを初期化しようとしているようです。バックボーンは#login-container要素を見つけられないため、イベントをバインドしません。フィドルでもこれを確認できます。フィドル設定でonLoad設定を変更するNo wrap <in head>と、見よ、イベントは処理されません。

DOM の準備が整った後にのみ、アプリを初期化する必要があります。

$(document).on('ready', function() {
  var newLogin = new Login();
  var loginView = new LoginView({model: newLogin});      
});

または同じショートカット：

$(function() {
  var newLogin = new Login();
  var loginView = new LoginView({model: newLogin});      
});
于 2013-03-01T13:15:02.253 に答える
5

JSFiddle で動作させるには、jQuery なしでelを設定する必要がありました... el: 'body'

于 2013-10-08T16:08:53.060 に答える
1

他の回答で説明されeventsているように、機能するにはプロパティを使用する必要がありelます。elプロパティ内の要素を参照してイベントを登録するバックボーンには、プロパティが必要elです。ただし、html がまだ生成されていない場合もあります。そのような場合、tagName代わりに を使用できますel。tagNameのように要素を動的に生成するのに便利ですdocument.createElement。

于 2016-07-10T12:45:45.937 に答える
-1

Backbones el Node は、View Controller のワークスペースを定義します。el 内のノードのみが、Backbones render Method から影響を受けたり、リッスンされたり、変更されたりします。

View Controller で維持したい Area のできるだけ近くに el を設定して、他の View Controller との交差や不要なペアレンティングを回避します。

View1 に View2 の領域が含まれ、そのノードをレンダリングするとします。View2 がノードの参照を保持している場合、それらは View1 からのレンダリングによって破損する可能性があるため、これ以上機能しません。

そのため、View Intersections とそのリスクに注意してください。バックボーンはフレームワークではなくライブラリであり、愚かなことからあなたを守りません。

于 2016-11-23T07:55:20.360 に答える