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的更多相关文章
- Knockout官网实例在MVC下的实现-02,实现计次
本篇使用Knockout在MVC下实现"Hello World",对应的官网实例在这里. 当次数达到3: View视图 页面包含三个部分:1.显示点击按钮的次数2.button按钮 ...
- activiti官网实例项目activiti-explorer之扩展流程节点属性2
情景需求:需要查找activiti-explorer项目中获取流程id的方法,然后根据流程id获取相应字段在节点属性中添加内容. 大致流程:拿取整个流程id获取对应表单属性,在页面节点属性中展示对应表 ...
- 官网实例详解-目录和实例简介-keras学习笔记四
官网实例详解-目录和实例简介-keras学习笔记四 2018-06-11 10:36:18 wyx100 阅读数 4193更多 分类专栏: 人工智能 python 深度学习 keras 版权声明: ...
- [ActionScript 3.0] Away3D 官网实例
/* Dynamic tree generation and placement in a night-time scene Demonstrates: How to create a height ...
- Knockout 官网学习文档目录
官网:https://knockoutjs.com/documentation/introduction.html Knockout-Validation: https://github.com/Kn ...
- Android自动化学习笔记之Robotium:学习官网实例
---------------------------------------------------------------------------------------------------- ...
- vue框架muse-ui官网文档主题错误毕竟【01】
在使用了element-ui后,总觉得不尽兴,再学一个响应式的muse-ui发现是个小众框架,但是我很喜欢. 指出官网文档里的主题使用描述错误. 首先,在vue-cli里安装raw-loader:np ...
- Knockout 官网翻译
Knockout 新版应用开发教程之创建view models与监控属性 章节导航 最近抽出点时间研究MVVM,包括司徒正美的avalon,google的angular,以及Knockout,博客园T ...
- knockout——官网demo
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- hdu 1085 有num1个 1 ，num2个 2 ，num3个 5 （母函数）
有num1个 1 ,num2个 2 ,num3个 5问它们不能组成的最小正整数是谁 样例的母函数 (1+X)(1+X2)(1+X5+X10+X15)展开后 X4的系数为0 Sample Input1 ...
- hdu 1398 整数划分变形 （母函数）
有1,4,9,16,25.....2^17这么多面值的硬币,问任意给定一个不大于300的正整数面额,用这些硬币来组成此面额总共有多少种组合种数 比如10全14 + 6个 14+4+1+19+1 求(1 ...
- window服务器上搭建git服务，window server git!!!
先给大家看一个高大上的,这是我给我公司配置的,小伙伴们都说好! 阿里云的2012server 基于这篇大神的教程,我把服务端搭建好了. 传送门,当然我还是自己做个笔记的好. 1.下载java,并安装 ...
- JavaScript对象参考手册
1.array 属性: constructor 返回原型函数: length 数组个数: prototype 向对象添加属性和方法 方法: concat() 连接两个或多个数组,并返回结果: fill ...
- Spring Boot使用Log4j Implemented Over SLF4J生成日志并在控制台打印
Spring Boot设置切面,执行方法的时候在控制台打印出来,并生成日志文件 引入依赖: <!--日志--> <dependency> <groupId>org. ...
- 四、redis系列之主从复制与哨兵机制
1. 绪言 在现实应用环境中,出于数据容量.容灾.性能等因素的考虑,往往不会只使用一台服务器,而是使用集群的方式.Redis 中也有类似的维持一主多从的方式提高 Redis 集群的高可用性的方案,而其 ...
- Keras/tensorflow出现‘Loaded runtime CuDNN library: 7.0.5 but source was compiled with: 7.1.14’错误的解决办法
从tensorflow1.10 升级到1.12版本后,对依赖的CuDNN不兼容产生的问题.鉴于一直使用的是Keras,未使用新版本tensorflow的功能,故果断回退到旧版本. 方法为:pip3 i ...
- 快递鸟电子面单打印功能基于java
之前的后天管理系统的电子面单打印使用的是灵通打单. 使用相对比较麻烦,需要到处Excel之后再导入,麻烦. 快递鸟有电子面单api,后台系统直接对接很是方便,不过也遇到了好些问题. 不难是不难,但是遇 ...
- Bzoj2164 采矿（线段树+树链剖分）
题面 Bzoj 题解 对于每个节点,我们可以用树链剖分和线段树维护以下信息: 单独在某个点分配\(i\)个人的最大收益(可以\(O(m)\)计算) 分配\(i\)的最大收益(可以\(O(m^2)\)计 ...
- 微服务：如何优雅的使用Mybatis
个人比较喜欢 jpa 这种极简的模式,但是为了项目保持统一性技术选型还是定了 mybatis.到网上找了一下关于 spring boot 和 mybatis 组合的相关资料,各种各样的形式都有,看的人 ...