本篇使用Knockout在MVC下实现"Hello World",对应的官网实例在这里。
当次数达到3:
View视图
页面包含三个部分:
1、显示点击按钮的次数
2、button按钮,每点击一次,显示的次数加1,并且,当次数达到3次,button禁用
3、最下面的div只有在次数达到3的时候才显示,并提供"重置"按钮
<div>You've clicked <span data-bind='text: numberOfClicks()'> </span> times</div> <button data-bind='click: registerClick, disable: hasClickedTooManyTimes'>Click me</button> <div data-bind='visible: hasClickedTooManyTimes'>
That's too many clicks! Please stop before you wear out your fingers.
<button data-bind='click: resetClicks'>Reset clicks</button>
</div>
Model领域模型
namespace MyMVCKnockout.Models
{
public class ClickCounterModel
{
public int NumberOfClicks { get; set; } public void RegisterClick()
{
NumberOfClicks++;
}
}
}
以上,NumberOfClicks属性用来记录当前的次数,当点击视图的button,就执行这里的RegisterClick()方法,使当前次数加一。
创建ClickCounterController:
using System.Web.Mvc;
using MyMVCKnockout.Models; namespace MyMVCKnockout.Controllers
{
public class ClickCounterController : Controller
{
public ActionResult Index()
{
return View();
} public JsonResult GetIntitial()
{
var model = new ClickCounterModel() {NumberOfClicks = 0};
Session["c"] = model;
return Json(model, JsonRequestBehavior.AllowGet);
} //每点击一次
public JsonResult RegisterClick()
{
var model = (ClickCounterModel) Session["c"];
model.RegisterClick();
return Json(model);
} //重置
public JsonResult ResetClick()
{
var model = new ClickCounterModel() { NumberOfClicks = 0 };
Session["c"] = model;
return Json(model);
}
}
}
以上,初始状态时,给ClickCounterModel的计次属性NumberOfClicks赋值为0次。通过Session维持ClickCounterModel上次的状态。当次数达到3次,点击前台视图的"重置"按钮,把ClickCounterModel的计次属性NumberOfClicks重新赋值为0次。
View Model视图模型
View Model中包括:
1、提供一个比如叫numberOfClicks的属性,通过ko.observable()方法,让它变得"observable"
2、提供一个当点击button按钮的一个函数,向控制器方法发出一个异步请求,回调函数得到的数据重新赋值给numberOfClicks的属性
3、提供一个当点击"重置"按钮的一个函数,向控制器方法发出一个异步请求,回调函数得到的数据重新赋值给numberOfClicks的属性
4、提供一个计算属性hasClickedTooManyTimes,以numberOfClicks为判断依据,当次数达到3次,就返回false
当然,这个View Model需要通过ko.applyBindings(viewModel)方法,与视图UI绑定起来。
ClickCounter/Index.cshtml完整如下:
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
} <div>You've clicked <span data-bind='text: numberOfClicks()'> </span> times</div> <button data-bind='click: registerClick, disable: hasClickedTooManyTimes'>Click me</button> <div data-bind='visible: hasClickedTooManyTimes'>
That's too many clicks! Please stop before you wear out your fingers.
<button data-bind='click: resetClicks'>Reset clicks</button>
</div> @section scripts
{
<script src="~/Scripts/knockout-3.1.0.js"></script>
<script type="text/javascript">
$(function () {
var viewModel = new ClickCounterViewModel();
ko.applyBindings(viewModel); $.getJSON('@Url.Action("GetIntitial","ClickCounter")', function (data) {
viewModel.numberOfClicks(data.NumberOfClicks);
});
}); var ClickCounterViewModel = function () {
var self = this;
self.numberOfClicks = ko.observable(0); self.registerClick = function () {
$.ajax({
url: '@Url.Action("RegisterClick","ClickCounter")',
cache: false,
type: 'POST',
contentType: 'application/json; charset=utf-8',
//data: ko.toJSON(model),
data: {},
success: function(data) {
self.numberOfClicks(data.NumberOfClicks);
}
});
}; self.resetClicks = function () {
$.ajax({
url: '@Url.Action("ResetClick","ClickCounter")',
cache: false,
type: 'POST',
contentType: 'application/json; charset=utf-8',
//data: ko.toJSON(model),
data: {},
success: function (data) {
self.numberOfClicks(data.NumberOfClicks);
}
});
}; self.hasClickedTooManyTimes = ko.computed(function () {
return self.numberOfClicks() >= 3;
});
};
</script>
}
“Knockout官网实例在MVC下的实现”系列包括:
Knockout官网实例在MVC下的实现-01,实现Hello world
Knockout官网实例在MVC下的实现-02,实现计次
Knockout官网实例在MVC下的实现-02,实现计次的更多相关文章
-
Knockout官网实例在MVC下的实现-01,实现Hello world
本篇使用Knockout在MVC下实现"Hello World",对应的官网实例在这里. View视图 Knockout的一个特点是:声明式绑定,即Declarative bind ...
-
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:学习官网实例
---------------------------------------------------------------------------------------------------- ...
-
Knockout 官网翻译
Knockout 新版应用开发教程之创建view models与监控属性 章节导航 最近抽出点时间研究MVVM,包括司徒正美的avalon,google的angular,以及Knockout,博客园T ...
-
knockout——官网demo
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
-
angular官网实例(综合)
第一部分: (应用的“外壳”) 1.新建项目: ng new mytest 2.进入项目目录,并启动这个应用. cd mytest ng serve --open 3.添加一个标题 打开 app.co ...
随机推荐
-
hdu 2034 - 集合操作
题意:集合A,B,计算集合差A-B(求只在集合A内的数) 解法: 选用STL内的集合set 1.建立set 1: #include<set> 2: 3: set<int> ...
-
autoresizingMask的用法
UIViewAutoresizingNone = , UIViewAutoresizingFlexibleLeftMargin = << , UIViewAutoresizingFlexi ...
-
SqlSever基础 cast 将getdate返回的时间转换成字符串
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
-
poj 3069 Saruman&#39;s Army (贪心)
简单贪心. 从左边开始,找 r 以内最大距离的点,再在该点的右侧找到该点能覆盖的点.如图. 自己的逻辑有些混乱,最后还是参考书上代码.(<挑战程序设计> P46) /*********** ...
-
Dice Notation(模拟)
Dice Notation Time Limit:2000MS Memory Limit:65536KB 64bit IO Format:%lld & %llu Submit ...
-
Java单链表实现
/** * * 单链表基本操作 * * @author John * */ class LinkList { private Node first; private int pos = 0; publ ...
-
javascript之键盘事件
键盘事件包含onkeydown.onkeypress和onkeyup这三个事件 事件初始化 function keyDown(){} document.onkeydown = keyDown; ...
-
C# Html格式内容转Csv内容包括table(重点在rowspan和colspan合并),p,div元素
Html格式内容转Csv内容,包括table(重点在rowspan和colspan合并),p,div元素,table不能包含嵌套功能. /// <summary> /// Html格式内容 ...
-
python多线程采集
import requests import json import threading Default_Header = { #具体请求头自己去弄 } _session=requests.sessi ...
-
ASP.NET Web API 中的返回数据格式以及依赖注入
本篇涉及ASP.NET Web API中的返回数据合适和依赖注入. 获取数据 public IEnumerable<Food> Get() { var results = reop.Get ...