Knockout官网实例在MVC下的实现-02,实现计次
本篇使用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下的实现”系列包括：