技术开发 频道

微软MVC框架实战:开源的JS库Knockout

        【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的值,后者是一个布尔标签,控制只读或编辑模式。

  

<div style="float:left; width:150px; height:25px; text-align:right;"
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>
1
相关文章