如何在Backbone.View中绑定Kendo UI组件

原创|使用教程|编辑:郝浩|2013-09-06 09:32:35.000|阅读 304 次

概述:本文将为你展示如何在Backbone.View中绑定Kendo UI组件

Kendo UI Backbone.View 结合使用并不困难,只要你知道如何初始化控件,其他基本上都比较简单。如果你想在Backbone.View中响应标准的DOM事件,你只需要用events部署就可以了。但如果你想直接处理来自Kendo UI组件的事件,也就是将 Kendo UI 与 Backbone.View 绑定,那就必须再写一点代码。

>>Kendo UI下载

kendo.Backbone.ViewEvents

随着kendo UI Backbone集成项目 v0.0.6的发布,可以在Backbone.View中声明一个 kendoUIEvents对象和DOM事件。这样,Kendo UI组件的初始化就完成了,你只需要调用 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);
  }
});

现在,你的kendo UI的Backbone.View就有了一个回调方法

解除删除/关闭事件

除了绑定事件之外,你还需要在视图实例从DOM中关闭或删除时解除事件。注意到上面例子中的remove方法的重载没有?它通过调用kendo.Backbone.ViewEvents对象中的undelegate 方法,所以非常容易实现。

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

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

若想获取更多资料可参考ViewEvents文档>>



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI Web

运用JavaScript和HTML5就能快速创建性能最优的Web应用程序

Kendo UI Mobile

使用HTML5和JavaScript快速开发跨平台原生移动应用程序的移动应用程序框架

Kendo UI DataViz

跨平台跨设备的数据可视化组件

Kendo UI Server Wrappers

帮助你开发基于Kendo UI的出色的HTML5应用程序,并且无需亲自编写JavaScript。

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat