学习汤姆大叔的knockout教程笔记
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学习汤姆大叔的knockout教程笔记相关的知识,希望对你有一定的参考价值。
模板绑定The template binding
目的
template绑定通过模板将数据render到页面。模板绑定对于构建嵌套结构的页面非常方便。默认情况, Knockout用的是流行的jquery.tmpl模板引擎。使用它的话,需要在安装页面下载和引用jquery.tmpl和jQuery框架。或者你也可以集成其它的模板引擎(虽然需要了解Knockout 内部知识才行)。
<!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript" src="libs/jquery-1.12.2.min.js"></script> <script type="text/javascript" src="libs/jquery.tmpl.min.js"></script> <script type="text/javascript" src="libs/knockout-3.4.0.js"></script> <meta charset="UTF-8"> </head> <body> <div data-bind=‘template: "personTemplate"‘> </div> <script id=‘personTemplate‘ type=‘text/html‘> ${ name } is ${ age } years old <button data-bind=‘click: makeOlder‘>Make older</button> </script> <script type=‘text/javascript‘> var viewModel = { name: ko.observable(‘Bert‘), age: ko.observable(78), makeOlder: function () { this.age(this.age() +1); } }; ko.applyBindings(viewModel); </script> </body> </html>
当引用的observable(dependent observable)数据改变的时候,Knockout会自动重新render模板。在这个例子里,每次点击button的时候都会重新render模板。
以上是关于学习汤姆大叔的knockout教程笔记的主要内容,如果未能解决你的问题,请参考以下文章