笔者之前对于类似前端展示的,可能都是自己开发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();" />

得到的效果如下:

最新文章

  1. 微信后台开发第一步:nodeJS+express接入微信后台详细教程
  2. 3到6年的.NETer应该掌握哪些知识?
  3. android中的提示信息显示方法(toast应用)
  4. 深度优先搜索 codevs 1031 质数环
  5. C# Inject
  6. Java 按字节获得字符串(中文)长度
  7. linux 定时任务调度Cron的用法详解
  8. uva 10817 Headmaster&amp;#39;s Headache 出发dp 位计算
  9. Android开发之自己主动登录功能的实现
  10. Linux C 多线程
  11. PHP垃圾回收机制理解
  12. Java IO(二)
  13. UNIX环境高级编程——epoll函数使用详解
  14. gdb调试若干问题
  15. HDU1730 Northcott Game 尼姆博弈
  16. Oracle中如何添加和修改包含日期的数据
  17. C++中的指针与引用的区别与联系
  18. spring boot 2 内嵌Tomcat Stopping service [Tomcat]
  19. 多线程-interrupt(),isInterrupted(),interrupted()
  20. Normalize.css与CSS reset区别

热门文章

  1. Oh My Life~
  2. windows C++ call ADB command
  3. day01-4-订座功能
  4. Bootstrap‘s JavaScript requires jQuery
  5. CUDA/CUDNN下载安装以及适配pytorch和tensorflow
  6. NAS数据存储之NFS搭建和使用
  7. 第一阶段:linux运维基础&#183;1
  8. C# String.IsNullOrEmpty()方法的使用
  9. 常用Linux命令(常年更新)
  10. ES6 学习笔记(十三)promise的简单使用