本篇使用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下的实现”系列包括：