JSFiddle - React, Tailwind, and code Playground

by itinao

HTML

<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>

CSS

.ng-class-modoki-red {
    color: red;
}
.ng-class-modoki-blue {
    color: blue;
}

JavaScript

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'));