技术开发 频道

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

  Order Entry显示模式

  当第一次选择一个Order编辑时,此时页面处于只读模式。要创建Knockout与HTML对象的自动绑定,我们必须创建一个JavaScript View Model对象,与Knockout绑定,这样Knockout可以监听View Model对象属性的变化,并自动更新UI。

// Overall viewmodel for this screen, along with initial state

  var viewModel
= {

  EditFields: ko.observable(
false),

  ReadOnlyMode: ko.observable(
false),

  DisplayCreateOrderButton: ko.observable(
false),

  DisplayEditOrderButton: ko.observable(
false),

  DisplayUpdateOrderButton: ko.observable(
false),

  DisplayOrderDetailsButton: ko.observable(
false),

  DisplayCancelChangesButton: ko.observable(
true),

  SelectedShipVia: ko.observable($(
"#OriginalShipVia").val()),

  Shippers: ko.observableArray(shippers),

  OrderID: ko.observable($(
"#OrderID").val()),

  ShipperName: ko.observable($(
"#ShipperName").val()),

  CustomerID: ko.observable($(
"#CustomerID").val()),

  OriginalShipName: ko.observable($(
"#OriginalShipName").val()),

  OriginalShipAddress: ko.observable($(
"#OriginalShipAddress").val()),

  OriginalShipCity: ko.observable($(
"#OriginalShipCity").val()),

  OriginalShipRegion: ko.observable($(
"#OriginalShipRegion").val()),

  OriginalShipPostalCode: ko.observable($(
"#OriginalShipPostalCode").val()),

  OriginalShipCountry: ko.observable($(
"#OriginalShipCountry").val()),

  OriginalRequiredDate: ko.observable($(
"#OriginalRequiredDate").val()),

  OriginalShipVia: ko.observable($(
"#OriginalShipVia").val()),

  ShipName: ko.observable($(
"#OriginalShipName").val()),

  ShipAddress: ko.observable($(
"#OriginalShipAddress").val()),

  ShipCity: ko.observable($(
"#OriginalShipCity").val()),

  ShipRegion: ko.observable($(
"#OriginalShipRegion").val()),

  ShipPostalCode: ko.observable($(
"#OriginalShipPostalCode").val()),

  ShipCountry: ko.observable($(
"#OriginalShipCountry").val()),

  RequiredDate: ko.observable($(
"#OriginalRequiredDate").val()),

  MessageBox: ko.observable(
"")

  }

  ko.applyBindings(viewModel);

 

  我们创建一个Edit Order点击事件函数,当用户点击Edit Order按钮,页面处于编辑模式。代码如下:

$("#btnEditOrder").click(function () {

  viewModel.DisplayEditOrderButton(
false);

  viewModel.DisplayUpdateOrderButton(
true);

  viewModel.DisplayOrderDetailsButton(
false);

  viewModel.DisplayCancelChangesButton(
true);

  viewModel.EditFields(
true);

  viewModel.ReadOnlyMode(
false);

  });

  上例中,我们使用Unobtrusive JavaScript这种方式来触发Edit按钮点击事件,实现两种显示与编辑模式的切换。Knockout会监听View Model,实现自动切换。Unobtrusive JavaScript是一项用于页面内容结构与页面呈现分离的新技术。

  用户点击Update Oder 按钮,则调用UpdateOrder 函数。UpdateOrder 函数的功能是抓取View Model的值,并创建一个表示物流信息的JavaScript对象。通过JQuery AJAX调用,该对象将提交给UpdateOrderController函数。

  

function UpdateOrder() {

  var shippingInformation
= new ShippingInformation();

  shippingInformation.OrderID
= viewModel.OrderID();

  shippingInformation.CustomerID
= viewModel.CustomerID();

  shippingInformation.ShipName
= viewModel.ShipName();

  shippingInformation.ShipAddress
= viewModel.ShipAddress();

  shippingInformation.ShipCity
= viewModel.ShipCity();

  shippingInformation.ShipRegion
= viewModel.ShipRegion();

  shippingInformation.ShipPostalCode
= viewModel.ShipPostalCode();

  shippingInformation.ShipCountry
= viewModel.ShipCountry();

  shippingInformation.RequiredDate
= viewModel.RequiredDate();

  shippingInformation.Shipper
= viewModel.SelectedShipVia();

  var url
= "/Orders/UpdateOrder";

  $(
':input').removeClass('validation-error');

  $.post(url, shippingInformation,
function (data, textStatus) {

  UpdateOrderComplete(data);

  });

  }

  
function UpdateOrderComplete(result) {

  
if (result.ReturnStatus == true) {

  viewModel.MessageBox(result.MessageBoxView);

  viewModel.OrderID(result.ViewModel.Order.OrderID);

  viewModel.ShipperName(result.ViewModel.Order.ShipperName);

  viewModel.DisplayEditOrderButton(
true);

  viewModel.DisplayUpdateOrderButton(
false);

  viewModel.DisplayOrderDetailsButton(
true);

  viewModel.DisplayCancelChangesButton(
false);

  viewModel.DisplayCreateOrderButton(
false);

  viewModel.EditFields(
false);

  viewModel.ReadOnlyMode(
true);

  viewModel.OriginalShipName(result.ViewModel.Order.ShipName);

  viewModel.OriginalShipAddress(result.ViewModel.Order.ShipAddress);

  viewModel.OriginalShipCity(result.ViewModel.Order.ShipCity);

  viewModel.OriginalShipRegion(result.ViewModel.Order.ShipRegion);

  viewModel.OriginalShipPostalCode(result.ViewModel.Order.ShipPostalCode);

  viewModel.OriginalShipCountry(result.ViewModel.Order.ShipCountry);

  viewModel.OriginalRequiredDate(result.ViewModel.Order.RequiredDateFormatted);

  viewModel.OriginalShipVia(viewModel.SelectedShipVia());

  }

  
else

  {

  viewModel.MessageBox(result.MessageBoxView);

  }

  
for (var val in result.ValidationErrors) {

  var element
= "#" + val;

  $(element).addClass(
'validation-error');

  }

  }
1
相关文章