search

Narutocc / knockout

0 stars 0 forks source link

knockout 模板 #4

Open Narutocc opened 7 years ago

Narutocc commented 7 years ago

使用script标签自定义template

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo2</title>
</head>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<body>
    <div class="row">
        <div class="col-sm-2">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Add New Tag" aria-describedby="basic-addon2" data-bind="textInput:tagToAdd">
                <span class="input-group-addon" id="basic-addon2" data-bind="click:addTag">to Add</span>
            </div>
        </div>
    </div>
    <div class="row">
        <div data-bind="template:'tagDemo'" class="col-sm-2"></div>
    </div>
</body>

<script type="text/html" id="tagDemo">
    <ul class="list-group" data-bind="foreach:tags">
        <li class="list-group-item" data-bind="text:Name">      
        </li>
    </ul>   
</script>

<script src="node_modules/knockout/build/output/knockout-latest.js"></script>
<script>
    var data = [
        {Id:1,Name:'aaa'},
        {Id:2,Name:'bbb'},
        {Id:3,Name:'ccc'},
        {Id:4,Name:'ddd'},
        {Id:5,Name:'eee'},
        {Id:6,Name:'fff'},
        {Id:7,Name:'ggg'},
        {Id:8,Name:'hhh'},
    ];

    var viewModel = {
        tags:ko.observableArray(data),
        tagToAdd:ko.observable(""),

        addTag:function(){
            this.tags.push({Name:this.tagToAdd()});
            //input框默认清空
            this.tagToAdd("");
        }
    };

    ko.applyBindings(viewModel)
</script>
</html>

页面效果如下： aa