Knockout 模版绑定

来源：互联网发布：java怎样创建接口对象编辑：程序博客网时间：2024/06/05 16:53

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模版，后面再研究！

0 0