Client-Side Chaos - Part II : The View

This is a continuation of Client-Side Chaos Part I which describes a generic ViewModel object that makes use of KnockJS databinding. Part I detailed design goals and the ViewModel API.

Before diving in deeper lets look at a brief vid demonstrating at the desired behavior that's being implemented :

  

Now let's look at the ASP.Net MVC4 View, Index.cshtml :

<h2>@ViewBag.Title</h2>
<table>
    <tbody class="todoList" data-bind="foreach: vm.HomeGetAllToDoItems.entityList" >
       <tr>
          <td>
             <input type="checkbox" data-bind="checked: IsDeleted, click:   

              onCheckboxClicked" />

          </td>
          <td>
             <span data-bind="text: Item, css: { 'deleted': $data['IsDeleted'] }"></span>
          </td>
       </tr>
    </tbody>
</table>
<h3>@ViewBag.Message</h3>
<div id="primary">
    <span><input id="itemEntry" type="text" placeholder="enter a ToDo..."/></span>
    <span class="pos_right">
       <input type="button" value="Save" onclick="saveItem()"/>
    </span>
    <br/>
    <span data-bind="text: vm.errorMessage"></span>
</div>

• A foreach binding is used for the ViewModel HomeGetAllToDoItems sub-View Model entityList property which happens to be an observableArray. Further binding of entityList array item properties is possible because the entire hierarchy of entitList has been mapped so that it consists only of observables and observableArrays
  
• Each row consists of a checkbox and text for a ToDo list item. There is a checked binding between the checkbox and the IsDeleted property as well as a clicked binding to trigger update of the IsDeleted property in the database
  .
• A text databinding is used between a span and the Item property. The span also uses a css binding so that strikethrough style tracks with the IsDeleted property state.
• Also that below the submit button a databinding exists between the span and an errorMessage property of the ViewModel
• The div having id="primary" contains a textbox used for entry of a new item and a submit button that triggers mapping then pushing the new item into the entityList observableArray.

There is minimal javascript in the view to support :

• ViewModel instantiation
// create the viewmodel object, then... var vm = new ViewModel(false, function onError(errorObject){ // if error when posting to AddToDoItem... if (errorObject.url.indexOf('AddToDoItem', errorObject.url.length - 'AddToDoItem'.length) !== -1) // we need to reverse effects of an update failure lastUpdatedItem.IsDeleted = !lastUpdatedItem.IsDeleted; }); The ViewModel constructor is passed an error callback which corrects the IsDeleted value if the failed request was one that was attempting to update IsDeleted.


• view initialization
// ...when ready... $(document).ready( function () { // successcallback omitted, result handled exclusively by binding vm.eventHandlers.post("Home/GetAllToDoItems", null, null, true); } ); All ToDo items are fetched then mapped into the entityList observable array as part of the view's foreach binding.


• deletion via the checkbox
function onCheckboxClicked(item, element) { lastUpdatedItem = item; vm.eventHandlers.post("Home/UpdateToDoItem", vm.eventHandlers.unMap(item, {}), function (url, entity) { }); return true; } The ToDo entity which just had its IsDeleted state toggled is unmapped then posted to the server for update. No successHandler is specified because the post for update returns no relevant data but the error callback will be called if the post and update do not succeed.


• addition of a new ToDo list item
// save a new ToDo entry function saveItem() { var todoText = $('#itemEntry').val(); if (todoText != "") { vm.eventHandlers.post('Home/AddToDoItem', todoText, onItemSaved, false); $('#itemEntry').val(''); } } // push new entity into observableArray function onItemSaved(sender, response) { vm.HomeGetAllToDoItems.entityList.push(vm.eventHandlers.map(response.entity)); } post passes a new ToDo description and returns the ToDo entity that was saved to the database. That entity is mapped to an observable then pushed into the entityList observable array

NEXT : Part III will take a look inside the ViewModel implementation.