49. C-sharp 21-10-2014

Created Tuesday 21 October 2014

Клиентская часть

Одностраничные приложения (SPA)

Сервер отсылает JSON (сериализация модели), клиент преобразует его в тэги

  1. При помощи DOM
  2. Шаблонирование
    1. Библиотеки
      1. Underscore
      2. Mustache
Использование логики (паттернов) на клиенте и структуризация кода
  1. Библиотеки
  2. Frameworks

KnockoutJS — library

http://sitepoint.com/beginners-guide-to-knockoutjs-part-1/
Binding — изменение данных влияет на отображение
Implements Model-View-ViewModel (MVVM) design pattern for JS
(google mvc vs mvp vs mvvm)

  1. Declarative bindings
    1. Тэги привязываются к модели при помощи аттрибутов
  2. Dependency tracking
    1. Отслеживание изменений — используются специальные переменные observables
  3. Templating
    1. Built-in template engine
    2. Possible to use 3rd-party templates
To create a view model just declare any JS object like this:
function viewModel() {
// code goes here
}
Binding:
$(document).ready(function () {
function viewModel() {
// code goes here
};
ko.applyBindings(new viewModel());
});
HTML
// syntax data-bind="bindingName: bindingValue"
<span data-bind="text: dayOfWeek"></span>
<span data-bind="text: activity"></span>
function viewModel() {
this.dayOfWeek = ko.observable('Sunday');
this.activity = ko.observable('rest');
}

Homework

Learn KnockoutJS

Links

  1. http://learn.knockoutjs.com/#/?tutorial=intro
1.1. http://knockoutjs.com/examples/

  1. http://www.sitepoint.com/beginners-guide-to-knockoutjs-part-1/
  2. http://www.adobe.com/devnet/html5/articles/getting-started-with-knockoutjs.html
  3. http://code.tutsplus.com/tutorials/into-the-ring-with-knockout-js--net-21239
ASP.MVC
  1. http://www.codeproject.com/Articles/680553/Knockout-js-for-Beginners
  2. http://www.asp.net/single-page-application/overview/introduction/knockoutjs-template

R

  1. http://habrahabr.ru/company/enterra/blog/145903/

  1. http://habrahabr.ru/post/124731/
  2. http://habrahabr.ru/post/123692/
  3. http://habrahabr.ru/post/125148/ (GRID)



Backlinks: