Viewmodels - Sample 6

ViewmodelBinding.html

<div class="setup-table">
  <table>
    <thead>
      <tr>
        <th colspan="2">Name</th>
      </tr>
    </thead>
    <tbody data-bind="foreach: List.Items">
      <tr data-bind="css : { selected : IsSelected }">
        <td data-bind="click: Select.Command, text: Name.Value">
        </td>
        <td>
          <button type="button" class="btn btn-small" data-bind="click: Delete.Command">
            <i class="icon-remove"></i>
          </button>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2" data-bind="with: Navigation">
          <ul class="paging" data-bind="foreach: Pages">
            <li data-bind="text: Label, click: NavigateToPage.Command, css: { selected: IsSelected }">
            </li>
          </ul>
        </td>
      </tr>
    </tfoot>
  </table>
</div>

<div class="span7" data-bind="with: Detail">
  <div class="setup-detail">
    <form id="form">
      <div class="control-group" data-bind="with: Name, css: { error : Name.IsNotValid }">
        <label for="name">Name</label>
        <input id="name" name="name" type="text" data-bind="value: Value, enable: IsEnabled, valueUpdate: 'keyup', css: { error: IsNotValid }, hasfocus: HasFocus" />
        <label for="name" generated="true" data-bind="text: ValidationMessage, visible: IsNotValid">
        </label>
      </div>
      <div class="control-group" data-bind="with: Color">
        <label for="color" class="control-label inline">Color</label>
        <input id="color" name="color" type="hidden" class="miniColors" data-bind="value: Value, enable: IsEnabled, valueUpdate: 'keyup', colorpicker: { }" />
      </div>
      <div>
        <button type="button" class="btn btn-primary" data-bind="click: Save.Command, enable: Save.IsEnabled">Save</button>
        <button type="button" class="btn" data-bind="click: Cancel.Command, enable: Cancel.IsEnabled">Cancel</button>
      </div>
    </form>
  </div>
</div>