Dorado 9 : 09. Javascript Controller

avascript Controller是一种新的代码管理方式。可能您已经发现了,要看懂一个view.xml文件中究竟定义了哪些事件声明是一件十分麻烦的事情,你必须不断的点击各个控件去查看各个事件下的代码。这种零散的代码组织形式给视图的维护带来了很多不便。

Javascript Controller的做法是把所有的事件代码集中到一个和view.xml同名同位置的js文件中,同时利用Javascript中的"Annotation"来完成事件的挂接。见下例:

/** @Bind #buttonOK.onClick */
function buttonOK() {
    alert("buttonOK Clicked.");
}
  
/** @Bind #dsPeople.onReady */
function dsPeopleReady(dsPeople) {
    dsPeople.insert();
}

@Bind后面的表达式与View.get()方法中的表达式高度相似,所以我们也可以利用这种"Annotation"批量的为一组控件定义事件:

/** @Bind ^readOnlyEditor.onCreate */
function setReadOnly(self) {
    self.set("readOnly", true);
}

并不是只有与View同名的js文件可以成为Javascript Controller,所有通过View的javaScriptFile属性装载的js文件都支持这种声明。

另外,在Dorado中View附带的js和css文件都将可以支持EL表达式,例如:

 

/** @Bind view.onReady */
function onReady(self) {
    alert("${request.getRequestURI()}");
}

匿名事件监听器

image.png

很多时候我们可能会觉得为每一个事件监听器命名是一件费心又麻烦的事情。而且,在大部分情况下这个方法的名称是没有任何实际作用的。出于这种考虑,Javascript Controller提供了对匿名事件监听器特别支持,上面的几个绑定的示例,我们都可以简化成下面的形式:

/** @Bind #buttonOK.onClick */
!function() {
    alert("buttonOK Clicked.");
}
  
/** @Bind ^readOnlyEditor.onCreate */
!function(self) {
    self.set("readOnly", true);
}
  
/** @Bind view.onReady */
!function() {
    alert("${request.getRequestURI()}");
}

声明式公用方法

image.png


有些时候,我们可能会在Javascript Controller文件中定义一些公用的方法。例如:

function showMessage(text) {
    dorado.MessageBox.alert(text);
}
  
/** @Bind #buttonOK.onClick */
!function() {
    showMessage("buttonOK Clicked.");
}

这看起来很简单,但是我们能否在view.xml里的某个事件声明中使用showMessage()呢?答案是可以,不过你必须要在showMessage()上添加额外的标注。

默认情况下Javascript Controller中的所有方法都是私有的,外部不可见的。同时Dorado提供了两个"Annotation"用于声明方法的可见性——@View和@Global。@View用于标注某个方法在View中可见,@Global用于标注某个方法全局可见。例如:

/** @View */
function showMessage(text) {
    dorado.MessageBox.alert(text);
}

此时showMessage()已被注册成了当前View对象的一个方法,我们可以在其他地方(包括view.xml中或其他js文件中)通过 view.showMessage() 来调用它了。

@Global的作用的是把方法标注成全局方法,我们可以在其他地方直接通过 showMessage() 来调用它。不过由于Dorado支持在单页面中出现多个View实例,为了避免可能出现的方法被相互覆盖的风险,我们强烈推荐首先考虑使用@View,@View可以在几乎所有场景下替代@Global。