欢迎光临
我的个人博客网站

体验一个前端视图层的mvvm的框架Knockoutjs(双向绑定,模板..)..解放您的双手,不再些那么多的dom操作..快速实现视图层数据与UI的交互处理

笔者之前对于类似前端展示的,可能都是自己开发js对象,集合外加dom事件进行处理..  近期看到相关资料,了解了Knockoutjs这个框架,下面来段代码:

 

<script type="text/javascript" src="~/js/knockout-3.5.1.debug.js"></script>      <script type="text/javascript">          var viewModel;         window.onload = function () {              viewModel = {                 //初始化值,可以被Viewmodel监测到                 userName: ko.observable('user1'),                 linkTel: ko.observable('15900010002'),                 userTypeitems: ko.observableArray([{ name: "新手", value: "100" }, { name: "老手", value: "101" }]),                 userTypeSelected: ko.observable("101")             };             ko.applyBindings(viewModel);//完成绑定          };         function showData() {
//模拟获取值,用于提交后台等处理 alert(viewModel.userName()
+ "," + viewModel.linkTel() + "," + viewModel.userTypeSelected()); } </script> <div> <label>用户名</label> <input type="text" data-bind="value:userName" /><br /> <label>联系电话</label> <input type="text" data-bind="value:linkTel" /> <label>类型</label> <select data-bind="options:userTypeitems, optionsText: 'name', optionsValue: 'value',value:userTypeSelected"></select> <p data-bind="text:'您的账户信息为:'+userName()+',联系电话是:'+linkTel()+' .'"></p> </div> <input type="button" value="查看元素的值" onclick="showData();" />

 

得到的效果如下:

体验一个前端视图层的mvvm的框架Knockoutjs(双向绑定,模板..)..解放您的双手,不再些那么多的dom操作..快速实现视图层数据与UI的交互处理

赞(0) 打赏
未经允许不得转载:张拓的天空 » 体验一个前端视图层的mvvm的框架Knockoutjs(双向绑定,模板..)..解放您的双手,不再些那么多的dom操作..快速实现视图层数据与UI的交互处理
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏