Knockout 模版绑定

最新推荐文章于 2019-08-22 20:31:17 发布

feng1456

最新推荐文章于 2019-08-22 20:31:17 发布

阅读量1.5k

点赞数

分类专栏： KnockoutJs 文章标签： knockout 模版

本文链接：https://blog.csdn.net/afandaafandaafanda/article/details/45936253

版权

KnockoutJs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Knockout模版绑定是解决复杂的Html界面中数据绑定的问题，今天模仿者写了一些Demo.

1.基本的绑定形式

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Jquery/jquery-1.10.2.js"></script>
    <script src="Knockout/knockout-3.3.0.js"></script>
    <script type="text/javascript">
        $(function () {
            function MyViewModel() {
                this.buyer = { name: 'Franklin', credits: 250 };
                this.seller = { name: 'Mario', credits: 5800 };
                this.person = { name: 'Justin', credits: 5900 };
            }
            ko.applyBindings(new MyViewModel());
        })
    </script>
</head>
<body>
    <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>
    <div data-bind="template: { name: 'person-template', data: person }"></div>
    <script type="text/html" id="person-template">
        <h3 data-bind="text: name"></h3>
        <p>Credits: <span data-bind="text: credits"></span></p>
    </script> 
</body>
</html>

效果如下：

2.集合数据绑定

这类绑定是最常用的模版绑定形式

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Jquery/jquery-1.10.2.js"></script>
    <script src="Knockout/knockout-3.3.0.js"></script>
    <script type="text/javascript">
        $(function () {
            function MyViewModel() {
                this.people = [
                    { name: 'Franklin', credits: 250 },
                    { name: 'Mario', credits: 5800 },
                    { name: 'Person', credits: 5900 }
                ]
            }
            ko.applyBindings(new MyViewModel());
        })
    </script>
</head>
<body>
    <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>
</body>
</html>

效果：

3.动态模版

根据值动态选择使用的模版

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Jquery/jquery-1.10.2.js"></script>
    <script src="Knockout/knockout-3.3.0.js"></script>
    <script type="text/javascript">
        $(function () {
            var viewModel = {
                employees: ko.observableArray([
                    { name: "Kari", active: ko.observable(true) },
                    { name: "Brynn", active: ko.observable(false) },
                    { name: "Nora", active: ko.observable(false) }
                ]),
                displayMode: function (employee) {
                    return employee.active() ? "active" : "inactive";
                }
            };
            //viewModel.employees()[1].active(true);
            ko.applyBindings(viewModel);
        })
    </script>
</head>
<body>
    <h2>Participants</h2>
    Here are the participants:
    <div data-bind="template: { name: displayMode, foreach: employees }"></div>
    <script type="text/html" id="active">
        active:
        <span data-bind="text: name"></span>
    </script>
    <br />
    <script type="text/html" id="inactive">
        inactive:
        <span data-bind="text: name"></span>
    </script>
</body>
</html>

效果：

4.模版绑定中的事件绑定

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Jquery/jquery-1.10.2.js"></script>
    <script src="Knockout/knockout-3.3.0.js"></script>
    <script type="text/javascript">
    $(function () {
        var viewModel = {
            name: ko.observable('Bert'),
            age: ko.observable(78),
            makeOlder: function () {
                this.age(this.age() + 1);
            }
        };
        ko.applyBindings(viewModel);
    })
    </script>

</head>
<body>
    <div data-bind='template: "personTemplate"'> </div>
    <script id='personTemplate' type='text/html'>
        <h3 data-bind="text: name"></h3>
        <h3 data-bind="text: age"></h3>
        <button data-bind='click: makeOlder'>Make older</button>
    </script> 
</body>
</html>

效果：

Knockout模版绑定功能非常强大，其实可以使用jquery.tmpl模版，后面再研究！

feng1456

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Knockout 模版绑定

Knockout模版绑定是解决复杂的Html界面中数据绑定的问题，今天模仿者写了一些Demo.1.基本的绑定形式 $(function () { function MyViewModel() { this.buyer = { name: 'Franklin', credits
复制链接

扫一扫