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

本篇使用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

时间: 2024-10-04 19:28:02

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

[ActionScript 3.0] Away3D 官网实例

1 /* 2 3 Dynamic tree generation and placement in a night-time scene 4 5 Demonstrates: 6 7 How to create a height map and splat map from scratch to use for realistic terrain 8 How to use fratacl algorithms to create a custom tree-generating geometry

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

---------------------------------------------------------------------------------------------------------------------------- 小记:MonkeyRunner暂时告一段落,今天起学习一下Robotium. ********************** 2014-11-18:初版 ********************** --------------------------

.net的建站步骤(官网实例)

代码特色: Entity Framework Code First CodeFirst是EntityFramework 4.1后新增的一种映射方式 ,在这种方式下,开发人员只需要编写代码,由ORM框架自动动创建模型和数据库 数据库则可看作类似于XML一样序列化的方式,非常简洁(由于开发人员可以无需关心数据库的具体结构,最初也有叫做CodeOnly的). Entity Framework Code First 试了下安装不成功: 提示针对的解决方案框架不符合. 而在2011四月发布的Entity

ECharts官网实例

简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘.整合的能力. 支持折线图(区域图).柱状图(条状图

【甘道夫】官网MapReduce实例代码详细批注

引言 1.本文不描述MapReduce入门知识,这类知识网上很多,请自行查阅 2.本文的实例代码来自官网 http://hadoop.apache.org/docs/current/hadoop-mapreduce-client/hadoop-mapreduce-client-core/MapReduceTutorial.html 最后的WordCount v2.0,该代码相比源码中的org.apache.hadoop.examples.WordCount要复杂和完整,更适合作为MapReduc

Bootstrap--模仿官网写一个页面

本文参考Bootstrap官方文档写了简单页面来熟悉Bootstrap的栅格系统.常用CSS样.Javascript插件和部分组件. 以下html代码可以直接复制本地运行: BootstrapPage1:常见的一种页面类型,页面导航,左侧分类.右侧新闻列表: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8&q

1.Knockout.Js官网学习(简介)

前言 最近一段时间在网上经常看到关于Knockout.js文章,于是自己就到官网看了下,不过是英文的,自己果断搞不来,借用google翻译了一下.然后刚刚发现在建立asp.net mvc4.0的应用程序的时候,建完之后我直接在项目的Scripts中看到了这两个js类库,用谷歌翻译看了下官网,Ko的实现原理是MVVM,比MVC高级一些. 简介MVVM模式 MVVM是Model-View-ViewModel的简写. WPF的数据绑定与Presentation Model相结合是非常好的做法,使得开发

4.Knockout.Js官网学习(事件绑定)

前言 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数.大部分是用在button,input和连接a上,但是可以在任意元素上使用. 简单示例 <h2>ClickBind</h2> <div> You've clicked <span data-bind="text: numberOfClicks"></span> times <button data-bind="

oracle官网下载老版本jdk + 如何命令行下wget下载jdk

一.文章由来 1.前天有人再去你咨询如何下载jdk的老版本,在oracle官网上找了老半天,找不到相应的选项~ 2.等待问题解决了之后,又抛出来一个新的问题,如何wget直接下载,毕竟百十来兆的文件,下载下来再上传对于我们这种蜗牛带宽来说也是一件苦逼的事情~ 二.如何下载jdk的历史版本 1.访问http://www.oracle.com 2.点击Downloads---->Java for Developers 3.在弹出的的页面中,下拉页面到最下面,点击历史归档 4.点击进去,同意协议,然后