san数组操作&事件处理

[sqliang]

数据操作

merge

merge 方法用于将目标数据对象（target）和传入数据对象（source）的键进行合并，作用类似于 JavaScript 中的 Object.assign(target, source)

apply

apply 方法接受一个函数作为参数，传入当前的值到函数，然后用新返回的值更新它。其行为类似 Array.prototype.map 方法。

san.defineComponent({
    attached: function () {
        this.data.set('number', {
            value: 1
        });
        this.updateNumber();
    },

    updateNumber: function (data) {
        this.data.apply('number', function (number) {
            return {
                value: number.value * 2
            };
        })
    }
});

虚拟元素（template）

template元素在渲染时只渲染其内容，不包含自身。对template元素应用if指令可以根据条件将多个元素渲染到视图，能够省掉一层不必要的父元素

<div>
    <template s-if="num > 10000">
        <h2>biiig</h2>
        <p>{{num}}</p>
    </template>
    <template s-elif="num > 1000">
        <h3>biig</h3>
        <p>{{num}}</p>
    </template>
    <template s-elif="num > 100">
        <h4>big</h4>
        <p>{{num}}</p>
    </template>
    <template s-else>
        <h5>small</h5>
        <p>{{num}}</p>
    </template>
</div>

对template元素应用for指令，能够让多个元素同时根据遍历渲染，可以省掉一层不必要的父元素

<dl>
    <template s-for="p in persons">
        <dt>{{p.name}}</dt>
        <dd>{{p.email}}</dd>
    </template>
</dl>

事件处理

提示： 在san中，无论是DOM事件还是组件的自定义事件，都通过on-前缀来绑定。

DOM事件

on-eventName 将DOM元素的事件绑定到组件方法上，DOM事件被触发时，组件方法将被调用，this指向组件实例
绑定事件时，可以指定参数，引用当前渲染环境的数据（参数可以是任何类型的表达式）

<template>
<ul>
    <li s-for="item, index in todos">
        <h3>{{ item.title }}</h3>
        <p>{{ item.desc }}</p>
        <i class="fa fa-trash-o" on-click="rmTodo(item)"></i>
    </li>
</ul>
</template>
<script>
export default {
	rmTodo(todo) {
		rmTodoService(todo.id).then(res => {
			if (res.data.status === 0) {
				this.data.remove('todos', todo);
			}
		});
	}
}
</script>

指定参数时 $event 是san保留的一个特殊变量，指定 $event 将引用到DOM Event对象。

<template>
	<button type="button" on-click="clicker($event)">click here</button>
</template>
<script>
export default {
	clicker(e) {
		console.log(e.target.tagName); // BUTTON
	}
}
</script>

自定义事件

在组件上可以通过on- 前缀来绑定组件的自定义事件。san的组件体系提供了事件功能，在组件内部实现过程中，通过调用fire方法能方便地派发一个事件

// Label Component
<template>
<span class="ui-label" title="{{ text }}">{{ text }}</span>
</template>
<script>
export default {
	attached() {
		this.fire('attached', this.data.get('text') + ' attached');
	}
}
</script>
// =====================
// MyComponent
<template>
<div>
	<ui-label bind-text="name" on-attached="labelAttached($event)" ></ui-label>
</div>
</template>
<script>
export default {
	components: {
		'ui-label': Label
	},
	labelAttached(msg) {
		console.log(msg);
	}
}
</script>

具体参考文档

san文档地址：https://ecomfe.github.io/san/