var HogeVM = function () { this.valueBind = ko.observable("value"); this.foreachBind = ko.observableArray(["Knockout.jsは", "foreachバインディングで", "ループする"]); this.valueVisible = ko.observable("valueVisible!!"); this.valueIf = ko.observable("valueIf!!"); this.valueCss = ko.observable("red"); this.valueClick = function () { alert('click!!'); } }; ko.applyBindings(new HogeVM, document.getElementById('HogeVM'));
<h2>Knockout.js</h2> <div id="HogeVM"> <!-- ng-modelもどき --> <input data-bind="value: valueBind, valueUpdate: 'afterkeydown'"> <div>Knockout.jsは<span data-bind="text: valueBind"></span>バインディングで入力値と連動する(valueUpdateを指定することで更新タイミングを指定できる)</div> <hr> <!-- ng-repeatもどき --> <div data-bind="foreach: {data: foreachBind, as: 'v'}"> <p data-bind="text: v"></p> </div> <hr> <!-- ng-initもどき --> <div>Knockout.jsにはng-initもどきはなく、VMでinitすればよい</div> <hr> <!-- ng-showもどき --> <input data-bind="value: valueVisible, valueUpdate: 'afterkeydown'"> <div data-bind="visible: valueVisible() === 'valueVisible!!'">Knockout.jsはvisibleバインディングでCSSのdisplayプロパティを操作して要素の表示・非表示を切り替える</div> <hr> <!-- ng-initもどき --> <div>Knockout.jsにはng-hideもどきはなく、visibleバインディングの判定を逆にすればよい</div> <hr> <!-- ng-ifもどき --> <input data-bind="value: valueIf, valueUpdate: 'afterkeydown'"> <div data-bind="if: valueIf() === 'valueIf!!'">Knockout.jsのifバインディングで要素ごと削除し表示・非表示を切り替える</div> <hr> <!-- ng-classもどき --> <input data-bind="value: valueCss, valueUpdate: 'afterkeydown'"> <div data-bind="css: {'ng-class-modoki-red': valueCss() === 'red', 'ng-class-modoki-blue': valueCss() === 'blue'}">Knockout.jsのcssバインディングで条件trueになるclassを要素につけられる</div> <hr> <!-- ng-clickもどき --> <div data-bind="click: valueClick">Knockout.jsのclickバインディングで要素にclickイベントをつけられる</div> </div>
.ng-class-modoki-red { color: red; } .ng-class-modoki-blue { color: blue; }