资讯专栏INFORMATION COLUMN

【Amaple教程】3. 模板指令与状态数据(state)

2shou / 860人阅读

摘要:指令在上使用元素没有设置属性时,自动设置绑定的状态属性名为属性。

一个模块的template模板、JavaScript和css之间的关系其实可以如下图表示:

如果你了解Angular、Vue动态模板,那你将会对Amaple的模板感到很熟悉,在Amaple中,template模板也是基于模板指令和状态数据的动态模板引擎,当一个状态数据改变时,在template模板中与它绑定的dom元素将自动作出相应的更新,所以此时你只需关心模块内的状态数据,而不需去理会视图层的更新。

指令类型

指令分为动态指令和静态指令,动态指令的值会被当作JavaScript代码被解析,所以它们可以获取并绑定状态属性的值,如:if:for等指令;而静态属性的值只会被当做普通的字符串处理,无法绑定状态属性,如:module:ref指令。

使用插值表达式输出文本

我们直接先看看在index.html模板中使用插值表达式输出文本和属性,你应该会很快明白是怎么回事了:


    

    

    
【注意】①.