Inline模式
对于一些简单的控件,我们只要直接在DOM中借助c-widget指令就可以快速的将其声明成控件。
c-widget内容形式类似于DOM中style属性的写法,是以";"相隔的多段内容,其中的每一段是一个属性/值对,用于声明一个控件属性。 其中的第一段是特殊的,可以是一个简单的字符串,用于表示控件的类型。控件类型的首字母可以大小写混用,Cola会自动转换。 例如button和Button和等效的。
控件的类型在部分场景中是可以省略的,例如在声明Menu中的Item时,具体哪些可省略请参考各个控件的API说明。
部分控件支持解析DOM的内容,并将其转换成控件的属性。例如在本例中的第二个Button,Cola会自动将其中的文字解析出来并渲染成Button的caption。 关于哪些控件可支持此类解析,以及可以解析哪些结构的内容请参考各个控件的API说明。
JSON模式
当控件的属性开始趋于复杂之后,如果仍然使用前面的Inline模式定义开始变得不那么方便甚至受到制约了。 这情况下,利用JSON来定义控件会是一个更好的选择。
上面这个例子中,我们在DOM中只放了一个最基本的带有id的div。所有的控件声明都以移到了model.widgetConfig()中。
model.widgetConfig()用于声明一套或多套命名的控件属性配置。默认情况下,这个名称会被理解成是DOM的id, Cola会自动尝试查找同id的DOM,并利用相应的控件属性配置将其渲染成一个控件。
混合模式
有些时候我们会希望让一组控件拥有相同的一套属性配置,同时每一个控件还拥有额外的,与众不同的属性值。 这时,我们可以在c-widget中利用一个特殊的以"#"开头的配置项,从widgetConfig中引用一套配置。
下面的三个按钮引入了同一套属性配置,通知每个按钮又定义的各自的caption。
Cola并不限定您只能引入一套属性配置,你完全可以根据实际情况的需要为某个控件同时引入多套属性配置。
动态创建
控件可以完全通过Javascript来创建和渲染。
利用配置创建
在上一个例子中利用 new cola.Button() 来创建控件可能已经不是我们最熟悉的方式。 既然我们之前都是用 $type 来声明控件类型,我们当然也可以利用类似的方法来创建控件。
上面使用的cola.widget()并不是一个专门用于创建控件的方法。该方法具有很多功能,更多时候我们用到它都是用来获取控件的实例。 关于cola.widget()的详细说明请参考API文档。
xRender渲染
前面的两种创建控件的方法在实际应用的场景中可能都不能最高效的选择,用他们来创建单一的控件是很简单。 可是大多数情况下,我们往往需要的是创建一批混合在HTML中的控件。这时再用上面的方法就会变得非常痛苦了。 Cola中提供cola.xRender()方法可以很好的为我们解决这个问题。
cola.xRender()是一个功能非常强大的方法,并不仅仅限于传入例子中这种String型的HTML片段。 在实际的应用中我们更加推荐使用一种以JSON形式表达的HTML,具体用法请参考cola.xRender()的API文档。
属性表达式
只要为某个属性赋以"{{...}}"形式的属性值,就会被Cola处理为绑定表达式。可以方便的在控件属性和Model中的数据间建立起双向数据绑定。
绑定Action
前面的例子中我们已经看到了如何为一个控件绑定事件方法。 假设我们希望某个事件调用一个Model中的Action,你当然可以直接在事件的方法中再去调用Action,但是你也可以尝试更加简单的方法。
如果我们为某个事件绑定一个字符串,那么Cola会认为这是一个Action的名字,自动建立事件与Action之间的绑定。
事件上下文数据
对于那些通过c-repeat或者类似的其他方式生成的控件,要在其事件中获得相应的上下文数据是需要一些额外的技巧的。 例如下面的例子,我们通过c-repeat产生了5个按钮,如何在按钮的事件获得与当前的按钮对应的skill呢? 直接通过model.get()肯定是不行的,因为skill只存在于迭代循环中。
在下面的例子中,我们利用了click事件的arg传入参数。在所有的Cola事件中都会提供一个arg参数,通过arg.model我们就可以得到这个控件真正对应的上下文Model。 对于迭代过程中产生的控件,这里所说的上下文Model也就是主Model的某个子Model,这个子Model中保存着当前的迭代变量,即例子中的skill。
关于子Model的具体概念请进一步阅读Model(视图模型)
事件表达式
不但属性中可以使用表达式,事件也可以如此。 如果我们将一个表达式与一个事件绑定,那么每当这个事件触发时Cola都会自动的执行这个表达式。 我们可以利用这个表达式调用Action,或者利用表达式方便的向Action中传递上下文数据。
获得控件实例
cola.widget()不但可以用于创建控件,更多时候我们用来它来获得控件的实例。 传入DOM的id,cola.widget()就可以为我们返回相应的控件实例。