Knockout.js Overview

@ibarejs

#FRENDS����������� ������������������  JSAF Study

Custom data-* attribute<div id="out" data-id="good" data-name="joe" data-screen-name="user1"></div>

for (var key in el.dataset) {  console.log(key); console.log(el.dataset[key]);}

observabledependentObservable

View<p>A: <span data-bind="text: A"></span></p><p>B: <span data-bind="text: B"></span></p>

Output

ViewModelvar viewModel = {    firstName: ko.observable("길동"),    lastName: ko.observable("홍")};

A: 홍B: 길동

observabledependentObservable

View<p>A: <span data-bind="text: A"></span></p><p>B: <span data-bind="text: B"></span></p><p>C: <span data-bind="text: C"></span></p>

Output

ViewModelvar viewModel = {    A: ko.observable("홍"),    B: ko.observable("길동")};viewModel.C = ko.dependentObservable(function () { return this.A() + this.B(); }, viewModel);

A: 홍B: 길동C: 홍길동

View

observabledependentObservable

<p>A: <input type="text" data-bind="value: A"></p><p>B: <span data-bind="text: B"></span></p><p>C: <span data-bind="text: C"></span></p>

Output

ViewModelvar viewModel = {    A: ko.observable("홍"),    B: ko.observable("길동")};viewModel.C = ko.dependentObservable(function () { return this.A() + this.B(); }, viewModel);

A: 홍B: 길동C: 홍길동

evaluatorFunctionOrOptionsevaluatorFunctionTargetoptions

dependentObservable

click binding

ViewOutput

ViewModelvar viewModel = {    updateMyData: function () { var t = this.A(); this.v(t + 1); }};

<button data-bind="click: updateMyData">Update</button>

event binding

data-bind="event: { mouseover: a, mouseout: b}"

submit binding

<form data-bind="submit: doSomething">

    ...

    <button type="submit">Submit</button></form>

enable binding

data-bind=" value: trueOrfalseRefFn, enable: o"

disable binding

data-bind=" value: trueOrfalseRefFn, disable: o"

checked binding

<input type="checkbox" data-bind="checked: o">

options binding

<select data-bind="options: aobfn"></select>

aobfn : ko.observableArray( ['a', 'b', 'c'])

selectedOptions binding

<select data-bind="options: aobfn, selectedOptions: saobfn"></select>

visibletexthtmlcss

styleattr

Any����������� ������������������  questions����������� ������������������  ?