HTML 5: Пример использования knockout, amplify и underscore или JsSite как стартовая архитектура для сайта (обновление)

   1:  publicstaticclass WebApiConfig {

   2:  publicstaticvoid Register(HttpConfiguration config) {

   3:          config.Routes.MapHttpRoute(

   4:              name: "PersonApi",

   5:              routeTemplate: "api/{controller}/{index}-{size}",

   6:              defaults: new { index = 0, size = 10 }

   7:          );

   8:   

   9:          config.Routes.MapHttpRoute(

  10:              name: "DefaultApi",

  11:              routeTemplate: "api/{controller}/{id}",

  12:              defaults: new { id = RouteParameter.Optional }

  13:          );

  14:      }

  15:  }

   1:  public HttpResponseMessage Get(int? index, int? size) {

   2:      var items = _list.AsQueryable();

   3:  if (index.HasValue && size.HasValue) {

   4:          items = items.Skip(index.Value * size.Value)

   5:              .Take(size.Value);

   6:      }

   7:  if (items.Any()) {

   8:          var data = items.ToArray();

   9:          var result = new ApiResult { Items = data, Total = _list.Count() };

  10:  return Request.CreateResponse(HttpStatusCode.OK, result);

  11:      }

  12:  return Request.CreateResponse(HttpStatusCode.BadRequest); ;

  13:  }

   1:  publicclass ApiResult {

   2:  public IEnumerable<Person> Items { get; set; }

   3:  publicint Total { get; set; }

   4:  }

   1:  (function (site) {

   2:   

   3:  "use strict";

   4:   

   5:      site.services.init = function () {

   6:   

   7:  //#region service Person

   8:          site.amplify.request.define("loadPerson", "ajax", {

   9:              url: "api/Person/{0}-{1}",

  10:              dataType: "json",

  11:              type: "GET"

  12:          }),

  13:           site.amplify.request.define("addPerson", "ajax", {

  14:               url: "api/Person/",

  15:               dataType: "json",

  16:               cache: false,

  17:               type: "POST"

  18:           }),

  19:           site.amplify.request.define("updatePerson", "ajax", {

  20:               url: "api/Person",

  21:               dataType: "json",

  22:               cache: false,

  23:               type: "PUT"

  24:           }),

  25:           site.amplify.request.define("deletePerson", "ajax", {

  26:               url: "api/Person",

  27:               dataType: "json",

  28:               cache: false,

  29:               type: "DELETE"

  30:           });

  31:  //#endregion

  32:   

  33:      }();

  34:   

  35:      site.services.person = function () {

  36:  var

  37:              loadPerson = function (params, back) {

  38:  return site.amplify.request({

  39:                      resourceId: "loadPerson",

  40:                      data: {index: params.index(), size: params.size()},

  41:                      success: function (json) {

  42:  //  -> here you code json-data processing <-  

  43:  if (json && json.Items) {

  44:                              site.logger.success("Loaded: "

  45:                                  + json.Items.length

  46:                                  + " Total: " + json.Total);

  47:                          }

  48:  if (typeof back == "function") {

  49:  params.total(json.Total);

  50:                              back.call(this, json.Items);

  51:                          }

  52:                      },

  53:                      error: function (message, status) {

  54:                          site.logger.error(message, status);

  55:                          back.call(this);

  56:                      }

  57:                  });

  58:              },

  59:              addPerson = function (jsonPerson) {

  60:  return site.amplify.request({

  61:                      resourceId: "addPerson",

  62:                      data: jsonPerson,

  63:                      success: function (json, status) {                        

  64:  //  -> here you code json-data processing <-                        

  65:  if (typeof back == "function") {

  66:                              back.call(this, json);

  67:                          }

  68:                      },

  69:                      error: function (message, status) {

  70:                          site.logger.error(message, status);

  71:                          back.call(this);

  72:                      }

  73:                  });

  74:              },

  75:              updatePerson = function (jsonPerson) {

  76:  return site.amplify.request({

  77:                      resourceId: "updatePerson",

  78:                      data: jsonPerson,

  79:                      success: function (json, status) {                        

  80:  //  -> here you code json-data processing <-                        

  81:  if (typeof back == "function") {

  82:                              back.call(this, json);

  83:                          }

  84:                      },

  85:                      error: function (message, status) {

  86:                          site.logger.error(message, status);

  87:                          back.call(this);

  88:                      }

  89:                  });

  90:              },

  91:              deletePerson = function (jsonPerson) {

  92:  return site.amplify.request({

  93:                      resourceId: "deletePerson",

  94:                      data: jsonPerson,

  95:                      success: function (json, status) {                        

  96:  //  -> here you code json-data processing <-                        

  97:  if (typeof back == "function") {

  98:                              back.call(this, json);

  99:                          }

 100:                      },

 101:                      error: function (message, status) {

 102:                          site.logger.error(message, status);

 103:                          back.call(this);

 104:                      }

 105:                  });

 106:              };

 107:   

 108:  return {

 109:              load: loadPerson,

 110:              put: updatePerson,

 111:              post: addPerson,

 112:              del: deletePerson

 113:          };

 114:   

 115:      }();

 116:   

 117:  })(site);

   1:  $(function () {

   2:   

   3:  "use strict";

   4:   

   5:      site.vm.viewModel = function () {

   6:          var clock = new site.controls.Clock(),

   7:              meta = new site.fw.Metadata(

   8:  "Demo JsSite",

   9:  "Демонстрация работы библиотеки",

  10:  "http://www.calabonga.net"),

  11:              ds = new site.controls.DataSource(

  12:                  {

  13:                      autoLoad: true,

  14:                      service: site.services.person

  15:                  }

  16:              );

  17:   

  18:  return {

  19:              ds: ds,

  20:              meta: meta,

  21:              clock: clock

  22:          };

  23:      }();

  24:   

  25:      ko.applyBindings(site.vm.viewModel);

  26:   

  27:  });

   1:  <h2 data-bind="text: meta.title"></h2>

   2:  <p data-bind="text: meta.description"></p>

   3:  <div data-bind="text: clock.time"
            style="color:#888; position: fixed; top:20px; left:50%;"></div>

   4:   

   5:   

   6:  <table>

   7:      <thead>

   8:          <tr>

   9:              <th>Name</th>

  10:              <th>Age</th>

  11:              <th>Country</th>

  12:          </tr>

  13:      </thead>

  14:      <tbody data-bind="foreach: ds.items">

  15:          <tr>

  16:              <td><span data-bind="text: Name"></span></td>

  17:              <td><span data-bind="text: Age"></span></td>

  18:              <td><span data-bind="text: Country"></span></td>

  19:          </tr>

  20:      </tbody>

  21:  </table>

  22:   

  23:  <div data-bind="pager: ds"></div>

   1:  $(function () {

   2:   

   3:  "use strict";

   4:   

   5:      site.vm.viewModel = function () {

   6:  var clock = new site.controls.Clock(),

   7:              meta = new site.fw.Metadata(

   8:  "Demo JsSite",

   9:  "Демонстрация работы библиотеки",

  10:  "http://www.calabonga.net"),

  11:              queryParams = { DepartmentId: ko.observable(), size:4 },

  12:   

  13:              ds = new site.controls.DataSource(

  14:                  { autoLoad: false, service: site.services.person },queryParams),

  15:   

  16:              ds2 = new site.controls.DataSource({

  17:                  service: site.services.department

  18:              }),

  19:  

  20:              selectDepartment = function (item) {

  21:                  ds.queryParams.DepartmentId(item.Id);

  22:              };

  23:   

  24:          ds.queryParams.DepartmentId.subscribe(function() {

  25:              ds.load();

  26:          });

  27:   

  28:  return {

  29:              select: selectDepartment,

  30:              ds2: ds2,

  31:              ds: ds,

  32:              meta: meta,

  33:              clock: clock

  34:          };

  35:      }();

  36:   

  37:      ko.applyBindings(site.vm.viewModel);

  38:   

  39:  });

   1:  <h2>Подразделения</h2>

   2:  <table>

   3:      <thead>

   4:          <tr>

   5:              <th>Id</th>

   6:              <th>Name</th>

   7:              <th>Description</th>

   8:          </tr>

   9:      </thead>

  10:      <tbody data-bind="foreach: ds2.items">

  11:          <tr data-bind="click: $root.select" style="cursor:pointer;" >

  12:              <td><span data-bind="text: Id"></span></td>

  13:              <td><span data-bind="text: Name"></span></td>

  14:              <td><span data-bind="text: Description"></span></td>

  15:          </tr>

  16:      </tbody>

  17:  </table>

  18:  <h2>Сотрудники</h2>

  19:  <div data-bind="pager: ds2"></div>

  20:   

  21:  <table>

  22:      <thead>

  23:          <tr>

  24:              <th>Id</th>

  25:              <th>Department</th>

  26:              <th>Name</th>

  27:              <th>Age</th>

  28:              <th>Country</th>

  29:          </tr>

  30:      </thead>

  31:      <tbody data-bind="foreach: ds.items">

  32:          <tr>

  33:              <td><span data-bind="text: Id"></span></td>

  34:              <td><span data-bind="text: DepartmentId"></span></td>

  35:              <td><span data-bind="text: Name"></span></td>

  36:              <td><span data-bind="text: Age"></span></td>

  37:              <td><span data-bind="text: Country"></span></td>

  38:          </tr>

  39:      </tbody>

  40:  </table>

  41:   

  42:  <div data-bind="pager: ds"></div>