5. 模版、样式、JavaScript

第5篇模版、样式、JavaScript
一、template
- 模版概述
- 模版逻辑
二、样式
- 1. Weex支持哪些样式？
- 2. 样式是否支持数据绑定
三、JavaScript
四、组件的范畴和需要关注的点

第5篇模版、样式、JavaScript

模版的概念，应该是前端借鉴了后端，不仅可以做到逻辑与视图分离，进行数据绑定，还可以提高开发效率，减少维护成本。Weex的模板语法也是极简的。

一、template

模版概述

在.we文件中，template里面的内容就是视图模版。例如：

1. <template>
2. <!-- (required) the structure of page -->
3. </template>

有几点需要注意的： 1）不建议template的内容层次太深 2）template内必须包含唯一的根节点作为父容器, div就是一个很好的选择

1. <template>
2. <div>
3. <div>子组件</div>
4. <div>子组件</div>
5. </div>
6. </template>

3）template内部组件必须是weex官方提供的组件。例如：div、text、input、web等。这里的组件就不是单纯的html标签了，更加丰富的含义应该是三端一致的基础组件。

模版逻辑

一般情况，我们可以在模版中进行逻辑判断和表达式运算。Weex也做了基础的逻辑运算工作。

1. <template>
2. <div>
3. <div if="{{shown}}">子组件</div>
4. <div>子组件</div>
5. </div>
6. </template>

shown为bool类型的变量。如果为true，则显示该组件，否则移除该组件。

repeat

1. <template>
2. <container>
3. <container repeat="{{list}}">
4. <image src="{{avatar}}"></image>
5. <text>{{nickname}}</text>
6. </container>
7. </container>
8. </template>

repeat接受循环的数组变量。repeat内部组件引用数组中某一元素的属性，例如list[i].avatar。

$index

1. <div repeat="{{list}}">
2. <text>No. {{$index + 1}}</text>
3. <div>

可以通过$index 拿到数组遍历的索引。

key and value

1. <div repeat="{% raw %}{{v in list}}{% endraw %}">
2. <text>No. {{$index + 1}}, {{v.nickname}}</text>
3. </div>

5. <div repeat="{% raw %}{{(k, v) in list}}{% endraw %}">
6. <text>No. {{k + 1}}, {{v.nickname}}</text>
7. </div>

二、样式

Weex的样式基本上是web标准样式的子集。Weex样式分为内联样式和类样式。

1. <div style="width:100;height:100;margin-left:10;"></div>

1. <template>
2. <div class="header_container border"></div>
3. </template>
4. <style>
5. .header_container{
6. width:100;
7. height:100;
8. margin-left:10;
9. }
10. .border{
11. border-width:1;
12. }
13. </style>

我们可以看到内联样式基本上和Web标准一样。但是这里不要使用px，因为默认的宽度和高度单位就是px。类样式，我们写在<style>里面，基本和Web标准一致。但是我们需要注意几个问题：

1. Weex支持哪些样式？

1）样式的形式：内联style属性、style标签内部类样式 2）基础样式：包括盒子模型和Flexbox Weex支持的公共样式在这里都基本说明了：<http://alibaba.github.io/weex/doc/references/common-style.html> 3) 文本的样式：因为text组件是一个相对特殊的组件，有着自己的特有属性。例如font-size设置字体的大小。lines设置文本的行数。可以参考： <http://alibaba.github.io/weex/doc/references/text-style.html> <http://alibaba.github.io/weex/doc/components/text.html>

2. 样式是否支持数据绑定

答案：支持。

1. <template>
2. <container>
3. <text style="font-size: {{fontSize}};">Alibaba</text>
4. <text class="large {{textClass}}">Weex Team</text>
5. </container>
6. </template>
7. <style>
8. .large {font-size: 32;}
9. .highlight {color: #ff0000;}
10. </style>
11. <script>
12. module.exports = {
13. data: {
14. fontSize: 32,
15. textClass: 'highlight'
16. }
17. }
18. </script>

例如fontSize、textClass就是数据绑定。如果不了解数据绑定，可以移步到下一节。

三、JavaScript

首先，这里我们需要明确JavaScript的范围以及JavaScript如何使用。在Weex中，我们使用 mustache的语法形式{{}}来进行数据绑定。我们在script中的data属性上进行的数据绑定，都会自动的映射到视图，从而进行视图的更新。例如：

1. <template>
2. <container>
3. <text style="font-size: {{size}}">{{title}}</text>
4. </container>
5. </template>

7. <script>
8. module.exports = {
9. data: {
10. size: 48,
11. title: 'Alibaba Weex Team'
12. }
13. }
14. </script>

这里，我们不仅对样式进行了数据绑定，同样对text组件中的文本进行了数据绑定。

当然，weex也支持，简单的表达式，例如：

1. <template>
2. <container style="flex-direction: row;">
3. <text>{{firstName + ' ' + lastName}}</text>
4. </container>
5. </template>

7. <script>
8. module.exports = {
9. data: {
10. firstName: 'John',
11. lastName: 'Smith'
12. }
13. }
14. </script>

我们将firstName + ' ' + lastName进行了运算。那么，如果我们的模板中有大量的逻辑。我们怎么办？

1. <template>
2. <container style="flex-direction: row;">
3. <text>{{fullName}}</text>
4. <text onclick="changeName" style="margin-left:10px;">CHANGE NAME</text>
5. </container>
6. </template>

8. <script>
9. module.exports = {
10. data: {
11. firstName: 'John',
12. lastName: 'Smith'
13. },
14. computed: {
15. fullName: {
16. get: function() {
17. return this.firstName + ' ' + this.lastName
18. },

20. set: function(v) {
21. var s = v.split(' ')
22. this.firstName = s[0]
23. this.lastName = s[1]
24. }
25. }
26. },
27. methods: {
28. changeName: function() {
29. this.fullName = 'Terry King'
30. }
31. }
32. }
33. </script>

我们可以使用computed对字段进行相关的逻辑运算。

那么，我们又如何给一个元素绑定事件？直接onclick就好，注意是全部小写。例如：

1. <template>
2. <text onclick="toggle">Toggle</text>
3. </template>

5. <script>
6. module.exports = {
7. methods: {
8. toggle: function () {
9. // todo
10. }
11. }
12. }
13. </script>

每个组件有各自的事件，因此，可以通过 <http://alibaba.github.io/weex/doc> 多多阅读和了解。

四、组件的范畴和需要关注的点

在HTML中，我们称div这些为标签。但是，这里，我们建议text、div、input、a、web等等这些称之为组件。因为他们是跨三端协作一致的结果。那么作为一个组件，我们需要关注什么呢？

组件都是成对出现

1. //good case
2. <list></list>
3. //bad case
4. <list/>

组件的内容或者子组件是什么？例如text组件：This component supports no child components but a text content. 因此，在使用text组件时不要有子组件，但是可以有文本内容。
组件支持的属性有哪些？比如list组件是否支持纵向／横向滚动，这些都是需要阅读文档时需要注意的。
组件支持什么样的样式
组件支持什么样的事件比如input组件是不允许子组件的，同时不支持click事件，支持input/change事件。这些是需要我们关注的点。
Weex文档中未出现的组件能否使用？可以，自己把他扩展成三端一致的组件呗，:)

第5篇 模版、样式、JavaScript