clay-core
Version:
Provide a more friendly web-side drawing interface!
66 lines (62 loc) • 3.09 kB
HTML
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../../libs/easycss-1.3.1.min.css">
<link rel="stylesheet" href="../../libs/prettify.css">
<link rel="stylesheet" href="../../doc.css">
<script src="../../libs/prettify.js"></script>
</head>
<body onload="prettyPrint()">
<header>
数据绑定
</header>
<p>
在教程中的结点和数据操作一节已经说明了数据绑定的概念和意义，这里就简单的列出全部接口。
</p>
<h2>
datum
</h2>
<pre class='prettyprint lang-js'>clayObject.datum(data[, calcback]);</pre>
<p>
该方法用于把数据绑定到一组结点或返回第一个结点数据，不带任何参数表示获取数据，带一个参数表示设置clay对象维护的全部结点数据为data。带两个参数的写法参考如下：
</p>
<pre class='prettyprint lang-js'>clayObject.datum(data, function(temp, index){
// 应该返回一个数据，该数据就是最终设置的值
});</pre>
<p>
其中temp就是datum的第一个参数值，index表示当前设置的结点序号。
</p>
<h2>
data
</h2>
<pre class='prettyprint lang-js'>var update=clayObject.data(datas[, calcback]);</pre>
<p>
该方法用于把一组数据绑定到一组结点或返回一组结点数据，和datum一样，不带参数表示获取数据，带一个参数表示设置clay对象维护的全部结点数据为data，只不过第一个参数应该是一个数组。同样的，带两个参数的写法和上面的写法一样，就不赘述了。
</p>
<p>
不同的是，一组数据绑定到一组结点可能会存在一个问题：结点数目和数据数目不一致。因此后面还提供了两种方法来处理这种问题（事实上，这两种方法就是专门为data方法设计的）。
</p>
<h2>
enter
</h2>
<pre class='prettyprint lang-js'>var enter=update.enter(template);</pre>
<p>
update是clay对象调用data方法后返回的对象，其中记录着数据和结点个数差异信息，调用enter方法会返回一个新的clay对象，该对象记录着由多于结点的数据信息创建的结点集合。
</p>
<p>
参数template应该是一个字符串，表示新添加的结点是什么，可以有两种写法：
</p>
<pre class="prettyprint lang-js bingo">update.enter('div')、update.enter('line')</pre>
<pre class="prettyprint lang-js bingo">update.enter('<line></line>')、update.enter('<line class="enter"></line>')</pre>
<h2>
exit
</h2>
<pre class='prettyprint lang-js'>var exit=update.exit();</pre>
<p>
和enter方法相对应，会返回一个clay对象（该对象维护着多于数据部分的结点），一般调用remove方法删除就可以了。
</p>
</body>
</html>