knockout.js 入門 - 鬼畜編

knockout.js 入門 - 鬼畜編

73c174b34dafaea64f2824eb008a6559?s=128

Tatsuro Shibamura

June 09, 2017
Tweet

Transcript

  1. knockout.js 入門 - 鬼畜編 しばやん (@shibayan)

  2. About  しばやん (@shibayan)  ピュア紳士  STEINS;GATE と Ever17

    が好き  C# と ASP.NET MVC が好き  3/31 までは ASP.NET/IIS の MVP
  3. Introduction Knockout  HTML と JavaScript で MVVM  はっきりいって、よくわからない

     公式の Core Concepts  Declarative Bindings  Automatic UI Refresh  Dependency Tracking  Templating
  4. Declarative Bindings  data-bind 属性を利用した、宣言的な バインディング定義

  5. Automatic UI Refresh  モデルの値が変更された時、自動的 に UIを更新

  6. Dependency Tracking  モデル間の依存関係を自動的に追跡 lastName と firstName のどちらかが変更された 場合でも、このプロパティの変更通知が飛ぶ

  7. Templating  モデルの値から UI 要素を動的に生成 template

  8. Subscribable  ko.subscribable  subscribe  getSubscriptionCount  extend 

    Observables は Subscribable を継承  値の変更を検知可能
  9. Observables  ko.observable  ko.observableArray  ko.computed ko.observable("initial value") ko.observableArray([

    1, 2, 3, 4, 5 ]); ko.computed(function () { return this.lastName() + " " + this.firstName(); }, viewModel);
  10. ViewModel(1)  Object Literal var viewModel = { firstName: ko.observable(),

    lastName: ko.observable() }; viewModel.fullName = ko.computed(function () { return this.lastName() + " " + this.firstName(); }, viewModel);
  11. ViewModel(2)  Function function MyViewModel() { var self = this;

    self.firstName = ko.observable(); self.lastName = ko.observable(); self.fullName = ko.computed(function () { return self.lastName() + " " + self.firstName(); }); }
  12. Fluent Interface  setter は所属する ViewModel を返す var viewModel =

    { firstName: ko.observable(), lastName: ko.observable() }; viewModel.lastName("鳳凰院").firstName("凶真");
  13. Activating  ko.applyBindings // 全ての要素を対象にする ko.applyBindings(viewModel); // #elementId 以下の要素を対象にする ko.applyBindings(viewModel,

    document.getElementById("elementId"));
  14. Bulit-in Bindings - Text  text  html <span data-bind="text:

    content"></span> <span data-bind="html: content"></span>
  15. Built-in Bindings - Appearance  visible  css  style

     attr <ul data-bind="visible: hasMessages"></ul> <ul data-bind="css: { myClass: hasMessages }"></ul> <span data-bind="style: { color: newColor }"></span> <img data-bind="attr: { src: imageUrl }" />
  16. Built-in Bindings - Event  click  event  submit

    <a href="#" data-bind="click: handler">click me</a> <div data-bind="event: { mouseover: handler }"></div> <form data-bind="submit: handler"></form>
  17. Built-in Bindings - Control Flow  foreach  if /

    ifnot  with <ul data-bind="foreach: items"> <li data-bind="text: name"></li> </ul> <span data-bind="if: hasError">Error</span> <div data-bind="with: firstModel">...</div> <div data-bind="with: secondModel">...</div>
  18. Built-in Bindings – Forms(1)  value  checked  options

    <input type="text" data-bind="value: firstName" /> <input type="checkbox" data-bind="checked: isEnabled" /> <select data-bind="options: categories"></select>
  19. Built-in Bindings – Forms(2)  selectedOptions  enable / disable

     hasfocus <input type="text" data-bind="enable: hasMessage" /> <input type="text" data-bind="hasfocus: isEditable" / <select data-bind="selectedOptions: items">...</select>
  20. Demo(1)  基本的な knockout.js の使い方  Observables  ViewModel 

    Built-in Bindings
  21. Custom Bindings  ko.bindingHandlers ko.bindingHandlers.fadeVisible = { init: function (element,

    valueAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()); $(element).toggle(value); }, update: function (element, valueAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()); if (value) $(element).fadeIn(); else $(element).fadeOut(); } };
  22. Unobtrusive Event Handling  ko.dataFor  ko.contextFor var data =

    ko.dataFor(domElement); var context = ko.contextFor(domElement); // context.($data/$parent/$parents/$root) $(".selector").live("click", function() { // ko.dataFor/contextFor });
  23. Extenders  ko.extenders  throttle  指定した時間を経過した時だけ、変更イ ベントを発火する ko.extenders.myExtender =

    function(target, option) { // target = observable, option: parameter }; var viewModel = { searchTerms: ko.observable() .extend({ throttle: 500 }) };
  24. Demo(2)  高度な使い方を試す  Custom Bindings  Unobtrusive Event Handling

     Extenders
  25. References  Knockout  http://knockoutjs.com/  Steve Sanderson’s blog 

    http://blog.stevensanderson.com/  Knock Me Out  http://www.knockmeout.net/