本篇使用Knockout在MVC下实现"Hello World"，对应的官网实例在这里。

View视图

Knockout的一个特点是：声明式绑定，即Declarative bindings。暂且不管业务逻辑，先把关注点放在界面UI上,即"MVVM"模式中的第二个"V", 也就是View视图。根据Knockout的语法，创建如下界面：

<div>

        <p>First name:<input data-bind="value: firstName" /></p>

        <p>Last name:<input data-bind="value: lastName" /></p>

        <h2>Hello, <span data-bind="text: fullName"></span>!</h2>

    </div>

Model领域模型

对于MVC来说，应该有一个与之对应的领域模型，即"MVVM"模式中的第一个"M"：

namespace MyMVCKnockout.Models

{

    public class HelloWorldModel

    {

        public string FirstName { get; set; }

        public string LastName { get; set; }

        public string FullName

        {

            get { return FirstName + " " + LastName; }

        }

    }

}

接下来，让HelloWorld控制器的GetHelloWorld方法提供Json格式的返回数据：

using System.Web.Mvc;

using MyMVCKnockout.Models;

namespace MyMVCKnockout.Controllers

{

    public class HelloWorldController : Controller

    {

        public ActionResult Index()

        {

            return View();

        }

        public JsonResult GetHelloWorld()

        {

            var model = new HelloWorldModel() { FirstName = "darren", LastName = "ji" };

            return Json(model, JsonRequestBehavior.AllowGet);

        }

    }

}

View Model视图模型

现在，领域模型有了，视图UI也具备了，接下来，需要让View Model与视图UI绑定起来。绑定的目的是：当视图UI有变化的时候，View Model也会变化，反之亦然。也就是Knockout宣称的"Elegant dependency tracking",优雅的依赖追踪。如何做到呢？

大致二步。首先，Knockout通过使用ko.observable()、ko.observableArray()方法让View Model的属性、集合属性具有"Observable"特点。然后，使用ko.applyBindings()把View Model和视图UI绑定起来。最终做到了"Elegant dependency tracking"。

第一步：创建View Model，并使相关属性具备"Observable"特点。

function ViewModel() {

            var self = this;

            self.firstName = ko.observable("");

            self.lastName = ko.observable("");

            self.fullName = ko.computed(function () {

                return self.firstName() + " " + self.lastName();

            });

        }

以上，firstName和lastName具备了"Observable"特点，fullName值通过ko.computed()方法计算而得。

第二步：使用ko.applyBindings()绑定View Model和视图UI。

$(function () {

            var myViewModel = new ViewModel();

            ko.applyBindings(myViewModel);

            $.getJSON('@Url.Action("GetHelloWorld","HelloWorld")', function (data) {

                myViewModel.firstName(data.FirstName);

                myViewModel.lastName(data.LastName);

            });

        });

以上，通过ko.applyBindings(myViewModel)，实现了View Model和视图UI的绑定。如果想把不同的View Model绑定到不同的视图UI，应使用ko.applyBindings(myViewModel, document.getElementById(‘someElementId’))方法。

ViewModel中，fristName，lastName的初始值为空，以上通过$.getJSON()的回调函数，给fristName，lastName重新赋了值。从最终显示的界面效果来看，通过Knockout的绑定机制，随着View Model的变化，其对应的UI内容也确实发生了改变。

HelloWorld/Index.cshtml视图完整如下：

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

    <script src="~/Scripts/jquery-1.8.2.js"></script>

    <script src="~/Scripts/knockout-3.1.0.js"></script>

    <script type="text/javascript">

        $(function () {

            var myViewModel = new ViewModel();

            ko.applyBindings(myViewModel);

            $.getJSON('@Url.Action("GetHelloWorld","HelloWorld")', function (data) {

                myViewModel.firstName(data.FirstName);

                myViewModel.lastName(data.LastName);

            });

        });

        function ViewModel() {

            var self = this;

            self.firstName = ko.observable("");

            self.lastName = ko.observable("");

            self.fullName = ko.computed(function () {

                return self.firstName() + " " + self.lastName();

            });

        }

    </script>

</head>

<body>

    <div>

        <p>First name:<input data-bind="value: firstName" /></p>

        <p>Last name:<input data-bind="value: lastName" /></p>

        <h2>Hello, <span data-bind="text: fullName"></span>!</h2>

    </div>

</body>

</html>

“Knockout官网实例在MVC下的实现”系列包括：

Knockout官网实例在MVC下的实现-01,实现Hello world

Knockout官网实例在MVC下的实现-02,实现计次

Knockout官网实例在MVC下的实现-01,实现Hello world的更多相关文章

  1. Knockout官网实例在MVC下的实现-02,实现计次

    本篇使用Knockout在MVC下实现"Hello World",对应的官网实例在这里. 当次数达到3: View视图 页面包含三个部分:1.显示点击按钮的次数2.button按钮 ...

  2. activiti官网实例项目activiti-explorer之扩展流程节点属性2

    情景需求:需要查找activiti-explorer项目中获取流程id的方法,然后根据流程id获取相应字段在节点属性中添加内容. 大致流程:拿取整个流程id获取对应表单属性,在页面节点属性中展示对应表 ...

  3. 官网实例详解-目录和实例简介-keras学习笔记四

    官网实例详解-目录和实例简介-keras学习笔记四 2018-06-11 10:36:18 wyx100 阅读数 4193更多 分类专栏: 人工智能 python 深度学习 keras   版权声明: ...

  4. [ActionScript 3.0] Away3D 官网实例

    /* Dynamic tree generation and placement in a night-time scene Demonstrates: How to create a height ...

  5. Knockout 官网学习文档目录

    官网:https://knockoutjs.com/documentation/introduction.html Knockout-Validation: https://github.com/Kn ...

  6. Android自动化学习笔记之Robotium:学习官网实例

    ---------------------------------------------------------------------------------------------------- ...

  7. vue框架muse-ui官网文档主题错误毕竟【01】

    在使用了element-ui后,总觉得不尽兴,再学一个响应式的muse-ui发现是个小众框架,但是我很喜欢. 指出官网文档里的主题使用描述错误. 首先,在vue-cli里安装raw-loader:np ...

  8. Knockout 官网翻译

    Knockout 新版应用开发教程之创建view models与监控属性 章节导航 最近抽出点时间研究MVVM,包括司徒正美的avalon,google的angular,以及Knockout,博客园T ...

  9. knockout——官网demo

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 快速php日志，写内容到文件，把日志写到log文件

    php 写内容到文件,把日志写到log文件 //记录日志:要写入文件的文件名(可以是任意文件名),如果文件不存在,将会创建一个.log.txt位置在项目的根目录下. $file = 'log.txt' ...

  2. bms_output.put_line使用方法

    https://blog.csdn.net/sxww321/article/details/4020300

  3. jquery validate不用submit提交，用js提交的

    jquery validate控件 默认是使用submit提交的, 要想改成使用button的click事件处理函数中手工提交, 可以按照如下方式操作: 1 绑定form的validate, 2 然后 ...

  4. Python全栈开发之12、html

    从今天开始,本系列的文章会开始讲前端,从htnl,css,js等,关于python基础的知识可以看我前面的博文,至于python web框架的知识会在前端学习完后开始更新. 一.html相关概念 ht ...

  5. ECshop 迁移到 PHP7版本时遇到的兼容性问题，ecshopphp7

    ECshop 迁移到 PHP7版本时遇到的兼容性问题,ecshopphp7 在 PHP7 上安装 ECShop V2.7.3时,报错! Deprecated: Methods with the sam ...

  6. PIL 学习

    参考资料:Python图像处理库:pillow Image 类 Pillow 中最重要的类就是 Image,该类存在于同名的模块中.可以通过以下几种方式实例化:从文件中读取图片,处理其他图片得到,或者 ...

  7. Spring单例 和 Scope注解

    关键字  @Scope  @Qualifier  Singleton 单例 Spring是单例模式.结合Springboot的例子. Controller @Autowired private Tes ...

  8. JAVAEE——宜立方商城09：Activemq整合spring的应用场景、添加商品同步索引库、商品详情页面动态展示与使用缓存

    1. 学习计划 1.Activemq整合spring的应用场景 2.添加商品同步索引库 3.商品详情页面动态展示 4.展示详情页面使用缓存 2. Activemq整合spring 2.1. 使用方法 ...

  9. Bomb HDU 3555 dp状态转移

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=3555 题意: 给出一个正整数N,求出1~N中含有数字“49”的数的个数 思路: 采用数位dp的状态转移方程 ...

  10. redis 主要数据类型及使用

    1.类型 redis 的主要数据类型: 1.1 string 字符串类型<*是其它4种类型的基础> 1.2 hash 散列类型 1.3 list 列表类型 1.4 set 集合类型 1.5 ...