2

私は backbone.js を学んでいて、まったく新しいです。ボタンとして機能するビューがあります。

simpleButton = Backbone.View.extend({
     template: "<button class='${classes}'>${text}</button>",

     el: $("body"),

     events: {
         "click": "onClick",
         "focus": "onFocus",
         "blur": "onBlur"
     },

     initialize: function (args) {

         _.bindAll(this, 'render');
         this.rendered = false;
         this.text = args.text || 'button';
         this.classes = args.classes || [];
         this.classes.push('ui-button');
         //console.debug("Wh.views.simpleButton.initialize classes ",this.classes);
         if (args.autoRender === true) this.render();

     },

     render: function () {
         //console.debug("Wh.views.simpleButton.render classes ",this.classes);
         if (this.rendered === false) {
             $.tmpl(
                 this.template, {
                     classes: this.classes.join(' '),
                     text: this.text
                 }
             ).appendTo(this.el);
             this.rendered = true;
         }

     },

     //event handlers
     onClick: function (ev) {
         console.debug(this);
         alert("click on ", ev, this);
     },

     onFocus: function (ev) {
         ////console.debug(ev);
     },

     onBlur: function (ev) {

     }

 });

私の問題は、2 つのボタンを作成し、そのうちの 1 つだけをクリックすると、アラート ボックスが 2 回表示され、「これ」を示すデバッグで最初のボタンが最初に表示され、次に 2 番目のボタンが表示されることです。

何か不足していますか？

4

4 に答える 4

4

定義したイベントは、ビューの「el」プロパティにバインドされます。あなたの場合、それは「ボディ」であるため、インスタンス化された2つのsimpleButtonビューでクリックを起動すると、2つが同じイベントをリッスンします。

インスタンス化する各ビューは、el プロパティで定義された DOM 要素を 1 つだけ表す必要があります。したがって、ボタン ビューを作成する場合 (これが実際のプログラムでの「ベスト プラクティス」であるかどうかはわかりません)、次のようにすることができます。

SimpleButton =  Backbone.View.extend({
        template : "<button class='${classes}'>${text}</button>",

        tagName : "div", // defines the html tag that will wrap your template
        className: ".buttonbox", 
        ...
});

mybtn = new SimpleButton();
mybtn.render().appendTo('body')

そうすれば、クリック イベントは、ボタンが存在する 1 つの div.buttonbox のみに関係します。

注意 : render 関数のバックボーンの考え方は、後で DOM の prepend などに追加するために使用する html 文字列を作成することです。そうすれば、多数作成する場合に、DOM を 1 回だけ更新するだけで済みます (DOM の更新にはコストがかかります)。

于 2011-08-23T10:10:07.220 に答える
3

ビューでこれを使用します。クリックイベントのバインドが解除されます

initialize : function() {
    $(this.el).unbind("click");
}
于 2012-11-27T14:54:42.197 に答える
1

アプリのすべてのボタンにBackbone.Viewを作成すると、パフォーマンスが過剰になる可能性があり、jQueryの「委任」機能を活用できないと考えてください。代わりに、これらのボタンの親要素のBackbone.Viewを作成します。

もちろん、複雑なロジックを持ついくつかの特別なボタンがある場合、それらはおそらく独自のViewクラスに値します。:)

于 2011-11-03T05:46:24.323 に答える
0

ボタンに一意の ID を指定します (例: <button id="button1">and <button id="button2">)。次に、イベント ハッシュで、クリック イベントと、そのイベントを処理するボタンの IDを指定する必要があります。次に例を示します。

events : {
        "click #button1" : "onClick",
        "click #button2" : "doSomethingElse"
    }

これで、id=button1 のボタンをクリックしたときにのみ onClick() が呼び出され、id=button2 のボタンをクリックしたときに doSomethingElse() が呼び出されます。

于 2011-08-24T07:51:58.313 に答える