Chico UI 5——使用回调函数

8 使用回调函数

12月13日更新

内容

1 概述

2 定义回调函数

3 内部作用域

4 复杂行为

5 延迟回调

概述

在本教程中，我们将学习当一个组件的状态发生改变时如何使用回调函数。

定义回调函数

几乎每一个组件都有不同的状态，当事件发生时，你可以通过回调函数知道它们的状态。

可以方便地使用UI组件提供的on方法指定一个回调函数。

On方法接收的两个参数是：

· 回调函数名字

· 将要被执行的句柄

让我们来看一个关于Modal组件的例子：

var myModal = $("#my-modal").modal("Some content.");

myModal.on("show", function () {

//回调函数内部

});

每个组件可以使用的回调函数都在API Documentation中写出。

内部作用域

为了使事情变得简单，每一次回调在函数上下文中都有一个特殊的作用域。

通过使用this关键字，你可以继续使用组件实例。

var myModal = $("#my-modal").modal("Some content.");

myModal.on("show", function () {

    this.content("New content for 'this', the Modal.").widht(500).heigth(300);

 });

复杂行为

通过使用回调函数组合使用一些组件，你可以很容易地创建更为复杂的行为。

例如：首先创建一个空的Modal

var myModal = $("#my-modal").modal();

然后，创建一个 Form 控制器

var myForm = $("#my-form").form();

定义一个“submit”回调

myForm.on("submit", function () {

    //改变Modal内容并显示它

    myModal.content("Are you sure?").show();

});

延迟调用

另一个有用的模式是指定回调的延迟句柄。通过这种方式，你可以通过用户行为或者你应用的配置指定组件的行为。为了使所有的Object都有这一功能，它们具有公用方法on，通过on，你可以定义延迟回调，与此对应，有另外一个叫做off的方法，可以删除回调。

例如，创建一个有一些内容的Modal

var myModal = $("#my-modal").modal("/some/content.html");

你可以为已登录的用户做一些不同的操作

if (user.isLogged) {

    myModal.on("show", function(){

   //执行一些内容

    });

 }

正如你在之前的例子中所看到的，on方法通过使用一种简单易用的方法为已登录用户指定一些特殊的行为。