之前在项目中有个功能,是根据数据模型生成页面,然后页面变动之后,再同步到数据模型之中。

当时用的jquery写的,一点一点的控制,整个功能写下来、测试,花了很长时间,而且还担心出bug。

现在用mvvm思想的类库knockoutjs重构下,发现是如此的轻松,完全不用考虑dom变化的细节。

下面贴出关键代码:

<div data-bind="foreach:groups">
<label>
<input type="checkbox" data-bind="attr:{checked:isCheck},value:groupId" /><span data-bind="text:groupName"></span>
</label>
</div>
<script>
var viewModel = function () {
groups = ko.observableArray([
{ groupId: 1, groupName: '.net', isCheck: true },
{ groupId: 2, groupName: '.ef', isCheck: false },
{ groupId: 3, groupName: '.mvc', isCheck: true }
])
};
ko.applyBindings(new viewModel());
</script>

好的工具真的是事半功倍。

mvvm的优势的更多相关文章

  1. iOS——MVVM设计模式

    一.典型的iOS构架——MVC 在典型的MVC设置中,Model呈现数据,Vie呈现用户界面,而ViewController调节它两者之间的交互. 虽然View和View Controller是技术上 ...

  2. 前端MVVM学习之KnockOut(一)

    MVVM理解 MVVM即Model-View-viewModel,是微软WPF和MVP(Model-View-Presenter)结合发展演变过来的一种新型架构框架. MVVM设计模式有以下优点: ( ...

  3. 谈MVVM

    什么是MVVM? MVVM(模型-视图-视图模型,Model-View-ViewModal)是一种架构模式,并非一种框架,它是一种思想,一种组织与管理代码的艺术.它利用数据绑定,属性依赖,路由事件,命 ...

  4. WPF自学入门(十)WPF MVVM简单介绍

     前面文章中,我们已经知道,WPF技术的主要特点是数据驱动UI,所以在使用WPF技术开发的过程中是以数据为核心的,WPF提供了数据绑定机制,当数据发生变化时,WPF会自动发出通知去更新UI. 我们不管 ...

  5. 如何构建Android MVVM 应用框架

    概述 说到Android MVVM,相信大家都会想到Google 2015年推出的DataBinding框架.然而两者的概念是不一样的,不能混为一谈.MVVM是一种架构模式,而DataBinding是 ...

  6. iOS 关于MVC和MVVM设计模式的那些事

    一.概述 在 iOS 开发中,MVC(Model View Controller)是构建iOS App的标准模式,是苹果推荐的一个用来组织代码的权威范式.Apple甚至是这么说的.在MVC下,所有的对 ...

  7. [干货分享]一篇可能会让你爱上MVVM与ReactiveCocoa的文章

    概要 在此工程中,本文将讨论将MVC改造为MVVM需要的一些基本方法,同时会适当穿插部分关于MVVM概念性的讨论!本文最大的意义在于,提供了一种读者可以复现的方式,逐步引出从MVC向MVVM尽可能平滑 ...

  8. WPF自学入门(十一)WPF MVVM模式Command命令 WPF自学入门(十)WPF MVVM简单介绍

    WPF自学入门(十一)WPF MVVM模式Command命令   在WPF自学入门(十)WPF MVVM简单介绍中的示例似乎运行起来没有什么问题,也可以进行更新.但是这并不是我们使用MVVM的正确方式 ...

  9. 36 (OC)* MVC和MVVM

    1:MVC (Modal View Controller)(模型 视图 控制器)  一.MVC 从字面意思来理解,MVC 即 Modal View Controller(模型 视图 控制器),是 Xe ...

随机推荐

  1. 期许伟大-基于CMMI的过程改进之道探索

    原文作者:上海科维安信息技术顾问有限公司QAI China 何丹博士 CMMI主任评估师   一.引子     近年来,由美国SEI  (软件工程研究所)开发的SW-CMM  (软件过程能力成熟度模型 ...

  2. 强大的Spring缓存技术(上)

    缓存是实际工作中非常常用的一种提高性能的方法, 我们会在许多场景下来使用缓存. 本文通过一个简单的例子进行展开,通过对比我们原来的自定义缓存和 spring 的基于注释的 cache 配置方法,展现了 ...

  3. tkinter 在 x window 下的字体设置格式

    X Font Descriptors # X Font Descriptors are strings having the following format (the asterisks repre ...

  4. C# 序列化反序列化

      序列化,就是格式化,是把一个对象以某种格式进行呈现.主要有三种,1.二进制序列化,2.XML序列化,3.JavaScript序列化. 下面讲一下二进制序列化的过程 1.在需要序列化的类的前面,标记 ...

  5. Powerdesigner 设置唯一约束

  6. Xilinx的约束文件

    FPGA中有三种约束文件,分别是用户设计文件(.ucf文件),网表约束文件(.NCF文件)与物理约束文件(.PCF文件). 在设计阶段,需要硬件描述文件与UCF文件,经过综合后生成NCF文件,最后得到 ...

  7. idea 从github下载项目提示 file name too long 的解决方案

    1.找到git shell命令行 2运行如下命令 git config --global core.longpaths true 附地址https://github.com/Strider-CD/st ...

  8. 判断Window在哪个屏幕

    最近在做窗口最大化时需要一个功能,如果是多个显示器的话,需要在当前显示器最大化,由于是根据屏幕长宽进行设置Window大小,没有使用WindowState.Maximized,window.Left不 ...

  9. mac 日式键盘反斜线\

    日式键盘 没有反斜线\, 但是有快捷键可以输入:alt+¥  (英文模式下)

  10. 慕课网Java高并发秒杀学习

    课程地址:http://www.imooc.com/learn/587 一个很好:spring,springMVC,mybatis,bootstrap,jQuery,mysql,Restful学习案例 ...