骨幹jquery-ui對話框按鈕外部功能

Question

對於渲染函數中的jquery-ui對話框，我可以使用指向另一個函數而不是內聯它的按鈕嗎？

var MyView = Backbone.View.extend({ 
    submit: function(event) { /* foo */ }, 
    buttons: [{ 
    'text' : 'SUBMIT', 
    'click' : this.submit // <== like this 
    }], 

    render: function() { 
    this.$el.append("I'm a dialog with a button").dialog({ buttons: this.buttons }); 
    return this; 
    } 
}); 

我跑上面的代碼是我們的，似乎是引擎無法找到submit：

Uncaught TypeError: Cannot call method 'apply' of undefined jquery-ui.js:10018 
$.widget._createButtons.$.each.props.click jquery-ui.js:10018 
jQuery.event.dispatch jquery-1.9.1.js:3074 
jQuery.event.add.elemData.handle jquery-1.9.1.js:2750 

Answer 1

當你宣佈你的看法，並在該點this是該buttons數組被解釋設置爲根對象（可能爲window）。您可以通過分配window.submit來演示此行爲。例如，

window.submit = function() { 
    console.log('window submit'); 
} 

在您點擊按鈕時被觸發。演示請參見http://jsfiddle.net/nikoshr/AmRkp/。

解決您的問題的方法是將您的定義作爲模板爲每個實例構建自定義按鈕數組。事情是這樣的：

var MyView = Backbone.View.extend({ 
    submit: function(event) { 
     console.log(this, 'submit'); 
    }, 
    buttons: [{ 
     'text' : 'SUBMIT', 
     'click' : 'submit' 
    }], 

    render: function() { 
     var mybuttons; 

     //extract the buttons from an array or function, 
     mybuttons = _.result(this, 'buttons'); 

     //build the array 
     mybuttons = _.map(mybuttons, function(obj) { 
      // for each object describing a button 

      //create a clone to avoid problems 
      obj = _.clone(obj); 
      //set the callback, bound to the view 
      obj.click = _.bind(this[obj.click], this); 
      return obj; 
     }, this); 

     this.$el.append("I'm a dialog with a button").dialog({ 
      buttons: mybuttons 
     }); 
     return this; 
    } 
}); 

見http://jsfiddle.net/nikoshr/AmRkp/3/與