学习KnockOut第一篇之Hello World
笔者刚开始学习KnockOut。写的内容就相当于一个学习笔记。且在此处向官网致敬,比较喜欢他们家的Live Example版块,里面有jsFiddle。至于文档,辅导章节,也是有的。附上地址:KnockOut。感兴趣的话可以看一下的。
那么,开始。
先写一个连Hello World级别都算不上的。看了文档,貌似很简单的样子。 第一步引进ko的js脚本。第二步创建一个ViewModel。第三步创建一个简单的View,用data-bind绑定。 一个非常简单的text绑定。1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <!--下面这行代码就是一个简单的view了--> 8 <p>My English Name is <span data-bind="text:name"></span></p> 9 </body>10 </html>11 <script src="knockout-2.3.0.js"></script>12 <!--下面这四行代码就是ViewModel了,一个javaScript 的Object.-->13 <script type="text/Javascript">14 var myViewModel = {15 name: "Ando"16 };17 </script>第一次写KO
看下运行结果:
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
新闻热点
疑难解答