KonckoutJS template用法

PHPABC JavaScript 729 次浏览 , 没有评论

KnockoutJS template用来定义模板,并将模版用在指定的DOM绑定中。template的用处显而易见,可以更加清晰的定义代码,并能够方便的复用这些代码。

示例代码:

<h2>Participants</h2>
Here are the participants:
<div data-bind="template: { name: 'person-template', data: buyer }"></div>
<div data-bind="template: { name: 'person-template', data: seller }"></div>
 
<script type="text/html" id="person-template">
    <h3 data-bind="text: name"></h3>
    <p>Credits: <span data-bind="text: credits"></span></p>
</script>
 
<script type="text/javascript">
    function MyViewModel() {
        this.buyer = { name: 'Franklin', credits: 250 };
        this.seller = { name: 'Mario', credits: 5800 };
    }
    ko.applyBindings(new MyViewModel());
</script>

在这段代码中,我们定义了模板person-template,它所对应的html代码写在script标签中。在使用的时候,需要在元素中添加template绑定,指定name和data等参数。

template绑定的参数有:

name:template的名称,与模板script标签的id相对
data:绑定模板时的数据
if:只有当表达式为true的时候才绘制DOM节点
foreach:对于数组进行循环绘制DOM节点
as:为数据属性指定一个易于理解的名称
afterRender, afterAdd, beforeRemove:一些事件,用来监控绘制的过程

来看一个foreach的例子:

<h2>Participants</h2>
Here are the participants:
<div data-bind="template: { name: 'person-template', foreach: people }"></div>
 
<script type="text/html" id="person-template">
    <h3 data-bind="text: name"></h3>
    <p>Credits: <span data-bind="text: credits"></span></p>
</script>
 
function MyViewModel() {
     this.people = [
         { name: 'Franklin', credits: 250 },
         { name: 'Mario', credits: 5800 }
     ]
 }
 ko.applyBindings(new MyViewModel());

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go