41
KnockoutJS ハンズオン 14512日月曜日

Knockout handson

Embed Size (px)

DESCRIPTION

 

Citation preview

  • KnockoutJS 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. Twitter @tan_go238 JavaPHP Curry 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. TODO 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. http://yeoman.io/ 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. Yeoman npm install -g yo npm install -g generator-webapp Grunt Bower 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. mkdir knockout-handson cd knockout-handson yo webapp 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. grunt serve 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. KnockoutJS bower install knockoutjs --save cd bower_components/knockoutjs npm install ls build/output/ knockout-latest.debug.js knockout-latest.js 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. KnockoutJS # cd ../../ # app/index.html edit app/index.html 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. KnockoutJS 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. # app/index.html edit app/index.html HTML (app/index.html) 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC.
    • Home
    knockout handson

    + =

    We KnockoutJS.

    14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. # app/scripts/main.js edit app/scripts/main.js JavaScript (app/script/main.js) 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. $(function () { function ViewModel() { var self = this; self.value1 = ko.observable(0); self.value2 = ko.observable(0); self.result = ko.computed(function () { return parseInt(self.value1()) + parseInt(self.value2()); }); } ko.applyBindings(new ViewModel()); }); 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. grunt serve 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. ko.observable() UI ko.observable ko.observableArray() 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. ko.computed(f) ko.observable ko.computed ko.computedko.observable 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. data-bind + = value binding , , text binding , number, string toString visible , style , attr , html , css , custom binding 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. ko.applyBindings(vm,node) + = function ViewModel() { var self = this; self.value1 = ko.observable(0); self.value2 = ko.observable(0); self.result = ko.computed(function () { return parseInt(self.value1()) + parseInt(self.value2()); }); } ko.applyBindings(new ViewModel()); 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. TODO 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC.
    Add
    Task List
    • 1delete
    • 2delete
    index.html 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. $(function () { function ViewModel() { var self = this; } ko.applyBindings(new ViewModel()); }); main.js 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. Add $(function () { function ViewModel() { var self = this; self.title = ""; self.addTask = function(){ alert(title) }; } ko.applyBindings(new ViewModel()); }); main.js Add index.html 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. Add 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. TaskList $(function () { function Task(title) { this.title = title; } function ViewModel() { var self = this; self.tasks = ko.observableArray([]); // self.title = ""; self.addTask = function () { var task = new Task(self.title); self.tasks.push(task); }; } ko.applyBindings(new ViewModel()); }); main.js 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. ChromeKnockoutjs context debugger 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. TaskList
    Task List
    • // foreach
    • delete
    index.html 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. TaskList 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. TaskList
  • delete foreach binding ififnotwith 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. $(function () { function Task(title) { var self = this; self.title = title; } function ViewModel() { var self = this; self.tasks = ko.observableArray([]); self.title = ko.observable(""); self.addTask = function () { var task = new Task(self.title()); self.tasks.push(task); self.title(""); }; self.deleteTask = function(task) { self.tasks.remove(task); }; } ko.applyBindings(new ViewModel()); }); 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC.
    • delete
    $parent ViewModel $root ViewModel $data ViewModel $index foreach 14512
  • Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. sammy.js 14512
  • 14512