Knockout简单用法

在最近做的一个项目中,页面数据全部通过js ajax调用webapi接口获取,也就是说页面的数据全部使用javascript脚本填充,这就想到了使用一个MVVM模式的js框架来做这件事,在该项目中选择了Knockout.js。下面简单介绍一下Knockout的基本用法,作为备忘。

1 Knockout简介

Knockout是一个轻量级的UI类库,通过应用MVVM模式使JavaScript前端UI简单化。

Knockout是一个以数据模型(data model)为基础的能够帮助你创建富文本,响应显示和编辑用户界面的JavaScript类库。任何时候如果你的UI需要自动更新(比如:更新依赖于用户的行为或者外部数据源的改变),KO能够很简单的帮你实现并且很容易维护。

Knockout有如下4大重要概念:

1、声明式绑定 (Declarative Bindings):使用简明易读的语法很容易地将模型(model)数据关联到DOM元素上。

2、UI界面自动刷新 (Automatic UI Refresh):当您的模型状态(model state)改变时,您的UI界面将自动更新。

3、依赖跟踪 (Dependency Tracking):为转变和联合数据,在你的模型数据之间隐式建立关系。

4、模板 (Templating):为您的模型数据快速编写复杂的可嵌套的UI。

简称:KO

官方网站:http://knockoutjs.com

2 入门介绍

1、  创建不带有监控属性的ViewModel

创建一个view model,只需要声明任意的JavaScript object。例如:

var myViewModel = {
    personName: ‘Bob‘,
    personAge: 123
};

把该ViewModel绑定到HTMl代码中,例如:下面的代码显示personName 值

The name is <span data-bind="text: personName"></span>
激活Knockout,需要添加如下的 <script> 代码块:
ko.applyBindings(myViewModel);
 

2、创建带有监控属性的view model

监控属性Observables
现在已经知道如何创建一个简单的view model并且通过binding显示它的属性了。但是KO一个重要的功能是当你的view model改变的时候能自动更新你的界面。当你的view model部分改变的时候KO是如何知道的呢?答案是:你需要将你的model属性声明成observable的, 因为它是非常特殊的JavaScript objects,能够通知订阅者它的改变以及自动探测到相关的依赖。
例如:将上述例子的view model改成如下代码:

var myViewModel = {
    personName: ko.observable(‘Bob‘),
    personAge: ko.observable(123)
};

你根本不需要修改view – 所有的data-bind语法依然工作,不同的是他能监控到变化,当值改变时,view会自动更新。

3 使用Knockout

在我们的系统中,每一个页面都会定义一个ViewModel,该ViewModel存储页面所有的数据,并通过ajax读取数据并填写ViewModel。

假如我们有一个班级的页面,定义如下一个ViewModel:

//定义视图
var ClassViewModel = {
    ClassID:ko.observable(),//班级ID
    ClassName: ko.observable(),//班级名称
    ClassMasterName: ko.observable(),//班主任
    Students: ko.observableArray(),//班级学生列表  绑定数组
};

$(document).ready(function () {
    //绑定
    ko.applyBindings(ClassViewModel);
    //添加学生信息
    $("#AddStudent").on("click", function () {
        var obj = new Object();
        obj.StuName = "杨过";
        obj.StuSex = "猛男";
        obj.StuAge = "100";
        ClassViewModel.Students.push(obj);
    });
});

//ajax获取班级信息,并给ViewModel赋值
$.post("/home/GetClassInfo", function (data) {

    ClassViewModel.ClassID(data.ClassID);//班级ID赋值,会直接映射到界面
    ClassViewModel.ClassName(data.ClassName);
    ClassViewModel.ClassMasterName(data.ClassMasterName);

    //获取学生信息
    for (var i = 0; i < data.StuList.length; i++) {
        var obj = new Object();
        obj.StuName=data.StuList[i].StuName;
        obj.StuSex=data.StuList[i].StuSex;
        obj.StuAge = data.StuList[i].StuAge;

        ClassViewModel.Students.push(obj);
    }
})

对应的Html代码:

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/knockout-3.2.0.js"></script>
<script src="~/Scripts/ViewModel/MyClassViewModel.js"></script>
<h2>MyClass</h2>

<!-- attr属性绑定 -->
班级名称:<span data-bind="text:ClassID,attr:{‘ID‘:ClassID}"></span><br/>
班主任:<span data-bind="text:ClassName"></span><br/>

<table>
    <tr>
        <th>
            名字
        </th>
         <th>
            性别
        </th>
         <th>
            年龄
        </th>
    </tr>
    <!--循环绑定 Students -->
    <tbody data-bind="foreach:Students">
        <tr>
            <td data-bind="text:StuName">

            </td>
            <td data-bind="text:StuSex">

            </td>
            <td data-bind="text:StuAge">

            </td>
        </tr>
    </tbody>
</table>
<br/>
<input type="button" id="AddStudent" value="添加学生" />

后台数据:

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "修改此模板以快速启动你的 ASP.NET MVC 应用程序。";

            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "你的应用程序说明页。";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "你的联系方式页。";

            return View();
        }

        public ActionResult MyClass()
        {
            return View();
        }

        public JsonResult GetClassInfo()
        {
            MyClass myClass = new MyClass();
            myClass.ClassID = "jsj001";
            myClass.ClassName = "计算机一班";
            myClass.ClassMasterName = "龙龙";
            myClass.StuList = new List<Students>();
            myClass.StuList.Add(new Students() { StuAge = "10", StuName = "张三", StuSex = "暖男" });
            myClass.StuList.Add(new Students() { StuAge = "20", StuName = "李四", StuSex = "暖男" });
            myClass.StuList.Add(new Students() { StuAge = "30", StuName = "王五", StuSex = "暖男" });
            return Json(myClass);
        }

    }

    public class MyClass
    {
        /// <summary>
        /// 班级ID
        /// </summary>
        public string ClassID { get; set; }
        /// <summary>
        /// 班级名称
        /// </summary>
        public string ClassName { get; set; }
        /// <summary>
        /// 班主任名称
        /// </summary>
        public string ClassMasterName { get; set; }
        public List<Students> StuList { get; set; }
    }

    public class Students
    {
        public string StuName { get; set; }
        public string StuSex { get; set; }
        public string StuAge { get; set; }
    }

其他博文:MVC3.0+knockout.js+Ajax 实现简单的增删改查

本文参考:http://www.cnblogs.com/TomXu/archive/2011/11/21/2256749.html  

 

时间: 2024-11-01 11:53:15

Knockout简单用法的相关文章

iOS block-base 动画简单用法+关键帧动画设置线性变化速度的问题

本文转载至 http://www.tuicool.com/articles/aANBF3m 时间 2014-12-07 20:13:37  segmentfault-博客原文  http://segmentfault.com/blog/alan/1190000002411296 iOS的各种动画相漂亮,相信这是吸引很多人买iPhone的原因之一.不仅如此,这还是吸引我做iOS开发的一大原因,因为在iOS上给界面实现一些像样的动画实在是太轻松了! 这里就介绍一下iOS的block-based an

Android WIFI 简单用法

随着Wifi的普及,在开发App的时候对wifi的考虑越来越多了.例如程序的升级在wifi下可以省很多流量,在通信软件中的视频通话.可以实现高画质的传输等等,Android提供了WifiManager类来帮助开发者们管理Wifi.下面就简单来说一下WifiManager的简单用法把. 权限: 为了使用WfiManager 我们需要在Androidmanifest.xml 加入权限: //本例中使用了前两个.具体请按照需要添加权限. <uses-permission android:name=&quo

Android中资源文件中的字符串数组string-array简单用法

在Android中,用string-array是一种简单的提取XML资源文件数据的方法. 例子如下: 把相应的数据放到values文件夹的strings.xml文件里,或是其他自定义的xml中都可以,以下操作方法相同. <?xml version="1.0" encoding="utf-8"?> <resources> <string-array name="sports"> <item>足球<

expect简单用法

1 #!/usr/expect/bin/expect -f 2 3 4 set loginuser [lrange $argv 0 0] 5 set loginpass [lrange $argv 1 1] 6 set ipaddr [lrange $argv 2 2] 7 set port [lrange $argv 3 3] 8 set timeout [lrange $argv 4 4] 9 set from [lrange $argv 5 5] 10 set to [lrange $ar

Tcpdump 的简单用法

Tcpdump 的简单用法 tcpdump是Linux命令行下使用最广泛的网络分析工具,运行的时候会将网卡运行在混杂模式下,需要root权限才能执行 下面是几个比较常见的参数: -w  保持到指定的文件 -i  指定监听的网卡,缺省显示第一块网卡 -nn 以IP方式显示host -v  显示详细信息 -s  指定数据包大小,缺省是65535 -t  不显示时间 ,缺省是显示时间戳 -c  获取数据包数量,缺省不限制,需要用Ctrl+c来终止 下面是关于命令关键字的说明 1.主要包括host,ne

C++ double转string类型以及MFC控件简单用法

这两天项目需要,测试c++库里面内容.生成jar再给Android调用.我没有学过C++,现在开始记录C++简单用法.测试时候一般都是使用mfc程序来测试,要输入值,显示结果吗.我用的编译环境vs2008. 一.double 转string #include <string> CString strResultx; strResultx.Format(_T("x:%.4f\n"), 89.7887878); 转换结果还是放在strResultx 2.两个字符串相连 CStr

vB SendMessage API 简单用法

vB SendMessage API 简单用法 1. 在Windows编程中,向文本框控件.列表控件.按钮控件等是我们最常接触的控件了.但是在VB中这些控件有时无法实现我们的需要.在这时,我们只要简单的利用Windows API函数就可以扩充这些控件的功能了.顾名思义,SendMessage函数就是向窗口(这里的窗口指的是向按钮.列表框.编辑框等具有hWnd属性的控件)发送消息的函数,该函数的定义如下:Declare Function SendMessage Lib "user32"

java中Object.equals()简单用法

/* equals()方法默认的比较两个对象的引用! */ class Child { int num; public Child(int x){ num = x; } //人文的抛出运行时异常的好处是:可以自定义错误信息! /*public boolean equals(Object o) throws ClassCastException{ if(!(o instanceof Child)) throw new ClassCastException("中文提示:类型错误"); Ch

UIDatePicker的简单用法

// 初始化UIDatePickerUIDatePicker *datePicker = [[UIDatePicker alloc] initWithFrame:CGRectMake(0, 200, 320, 216)];// 设置时区[datePicker setTimeZone:[NSTimeZone timeZoneWithName:@"GMT"]];// 设置当前显示时间[datePicker setDate:tempDate animated:YES];// 设置显示最大时间