天天日天天摸,尤物视频网站,日韩欧美亚洲国产一区

欧美日韩亚-欧美日韩亚州在线-欧美日韩亚洲-欧美日韩亚洲第一区-欧美日韩亚洲二区在线-欧美日韩亚洲高清精品

如何在Backbone.View中綁定Kendo UI組件

原創(chuàng)|使用教程|編輯：郝浩|2013-09-06 09:32:35.000|閱讀 622 次

概述：本文將為你展示如何在Backbone.View中綁定Kendo UI組件

# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>

將 Kendo UI 與 Backbone.View 結(jié)合使用并不困難，只要你知道如何初始化控件，其他基本上都比較簡(jiǎn)單。如果你想在Backbone.View中響應(yīng)標(biāo)準(zhǔn)的DOM事件，你只需要用events部署就可以了。但如果你想直接處理來(lái)自Kendo UI組件的事件，也就是將 Kendo UI 與 Backbone.View 綁定，那就必須再寫(xiě)一點(diǎn)代碼。

>>Kendo UI下載

kendo.Backbone.ViewEvents

隨著kendo UI Backbone集成項(xiàng)目 v0.0.6的發(fā)布，可以在Backbone.View中聲明一個(gè) kendoUIEvents對(duì)象和DOM事件。這樣，Kendo UI組件的初始化就完成了，你只需要調(diào)用 kendo.Backbone.ViewEvents.delegate 就可以了。

var View = Backbone.View.extend({
  template: "<div id='list'></div>",

  // declare the Kendo UI widget events
  // the same way you would declare the
  // Backbone.View "events"
  kendoUIEvents: {
    "change #list": "listChanged"
  },

  listChanged: function(e){
    console.log("THE LIST CHANGE EVENT FIRED!!!");
  },

  render: function(){
    // render the view however you want
    this.$el.html(this.template);

    // instantiate a Kendo UI widget in the view
    this.$("#list").kendoListView({
      dataSource: {
        data: [{name: "foo"}, {name: "bar"}]
      },
      template: "#= name #"
    });

    // tell the kendo.Backbone plugin to 
    // delegate the view events for 
    // the widgets in this view
    kendo.Backbone.ViewEvents.delegate(this);
  },

  remove: function(){
    // unbind the kendo ui events
    kendo.Backbone.ViewEvents.undelegate(this);
    Backbone.View.prototype.remove.call(this);
  }
});

現(xiàn)在，你的kendo UI的Backbone.View就有了一個(gè)回調(diào)方法。

解除刪除/關(guān)閉事件

除了綁定事件之外，你還需要在視圖實(shí)例從DOM中關(guān)閉或刪除時(shí)解除事件。注意到上面例子中的remove方法的重載沒(méi)有？它通過(guò)調(diào)用kendo.Backbone.ViewEvents對(duì)象中的undelegate 方法，所以非常容易實(shí)現(xiàn)。

remove: function(){
    // unbind the kendo ui events
    kendo.Backbone.ViewEvents.undelegate(this);

    Backbone.View.prototype.remove.call(this);
  }

若想獲取更多資料可參考>>

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn

文章轉(zhuǎn)載自：慧都控件

上一篇：JS圖表控件FusionCharts使用教程：使用JavaScript更新圖表數(shù)據(jù) 下一篇：LEADTOOLS v18多平臺(tái)條碼識(shí)別（代碼示例）