【IT168 技术】 Knowckout – 当MVC遭遇MVVM
Knockout (或者Knockout.js ，KnockoutJS)是一个开源的JavaScript库，网址为www.knockoutjs.com。Knockout语法简洁、可读性好，能轻松实现与DOM元素的关联。一旦数据模型的状态发生改变，则立即自动刷新UI。Knockout采用Model-View-View-Model (MVVM)的设计模式来简化动态JavaScript UI。Knockout有效实现了JavaScript与UI HTML呈现的分离。有了Knockout，在写JavaScript时，就不需要在页面中引用UI元素或DOM。
Knockout设计目标是把任何JavaScript对象当成View Model来使用。只要View Model的属性具有可监听性，就可以使用Knockout将其与UI绑定。一旦属性值发生变化时，UI会被自动刷新。
Order Entry Header – 编辑模式与显示模式
Order Header页面的关键功能是，在不重复提交整个页面的前提下，自由切换编辑模式与显示模式。ASP.NET post-back模式通常表现为：用户点击Edit按钮，post提交至服务器，返回后，整个页面被重新刷新。使用Knockout与MVVM数据绑定技术，则可以避免页面重新刷新。这里，我们需要做的仅仅是将Order Header页面去绑定JavaScript创建的View Model。
数据绑定标签
为创建一个MVC View来回切换只读与编辑模式，我们为页面的每一个元素都创建单独的DIV与SPAN标签。一个(编辑模式)包含INPUT HTML控件，另一个(只读)只显示文本。添加Knockout数据绑定标签可以灵活控制HTML元素何时被显示，何时被隐藏。下例中，ShipName 包含一个两个数据绑定标签，前者关联Ship Name的值，后者是一个布尔标签，控制只读或编辑模式。
class="field-label">Ship To Name:
</div>
<div style="float:left; width:300px; height:25px;">
<span data-bind="visible:EditFields">
@Html.TextBox("ShipName", @Model.Order.ShipName, new Dictionary<string, object> {
{ "data-bind", "value: ShipName" }, { "style", "width:300px" } })
</span>
<span data-bind="visible: ReadOnlyMode, text: OriginalShipName"></span>
</div>
