大佬教程收集整理的这篇文章主要介绍了jquery – 将KnockoutJS与多个页面一起使用,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我将编写一个纯html / jquery应用程序.所有数据都通过ajax作为json提供.应用程序顶部有一个公共导航标题,其中有多个标签和子标签由Twitter Bootstrap实现.
如果我将应用程序的每个页面构建为单独的html视图和js viewmodel,我该如何维护单个统一标头?如果这是服务器端的asp.net webforms,我会使用Master Pages.但这都是客户端.
我没有密切关注Twitter Bootstrap,但我设置了jsfiddle,它应该会让你失望:http://jsfiddle.net/JasonMore/ygT6v/10/
视图
<ul id="menu" data-bind="foreach:options"> <li data-bind="text:option"></li> </ul> <br/> <section id="person"> <p>Hey,<span data-bind="text:fullName"></span>,what are you doing?</p> <p><label>First: <input type="text" data-bind="value:firstName" /></label></p> <p><label>Last: <input type="text" data-bind="value:lastName" /></label></p> </section > <br /> <section id="address"> <p>You live at: <span data-bind="text:fullAddress "></span></p> </section >
使用Javascript
// main.js var menuviewmodel = { options: ko.observableArray([ { option: 'person'},{ option: 'address'} ]) }; ko.applyBindings( menuviewmodel,document.getElementById('menu') ); // person.js var personviewmodel = new function() { var self = this; this.firstName = ko.observable('John'); this.lastName = ko.observable('Doe'); this.fullName = ko.computed(function() { return self.firstName() + ' ' + self.lastName(); }); }; ko.applyBindings( personviewmodel,document.getElementById('person') ); // address.js var addressviewmodel = new function() { var self = this; this.address = ko.observable('123 main'); this.city = ko.observable('smallville'); this.state = ko.observable('TX'); this.zip = ko.observable('12345'); this.fullAddress = ko.computed(function() { return self.address() + ' ' + self.city() + ' ' + self.state() + ' ' + self.zip(); }); }; ko.applyBindings( addressviewmodel,document.getElementById('address') );
以上是大佬教程为你收集整理的jquery – 将KnockoutJS与多个页面一起使用全部内容,希望文章能够帮你解决jquery – 将KnockoutJS与多个页面一起使用所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。