JSFiddle - React, Tailwind, and code Playground

by uedatakuya

HTML

<div>
    <h3>Log</h3>
    <ul data-bind="foreach: logger">
        <li data-bind="text: $data"></li>
    </ul>
</div>
<div>
    <h3>options binding</h3>
    <!-- ko text: piyo -->
    <!-- /ko -->
    <select data-bind="myOptions: hogeList, value: piyo"></select>
</div>
<div>
    <h3>isolatedOptions</h3>
    <button data-bind="click: onClick">Add</button>
    <!-- ko text: bar -->
    <!-- /ko -->
    <select data-bind="isolatedOptions: fooList, value: bar"></select>
</div>

JavaScript

var logger = ko.observableArray([]);

ko.bindingHandlers.myOptions = {
    update: function(element, valueAccessor) {
        logger.push('myOptions');
        var args = arguments;
        ko.bindingHandlers.options.update.apply(element, args);
    }
};

ko.bindingHandlers.isolatedOptions = {
    init: function (element, valueAccessor) {
        var args = arguments;
        ko.bindingHandlers.options.update.apply(this, args);
        ko.computed({
            read: function () {
                logger.push('isolatedOptions');
                ko.utils.unwrapObservable(valueAccessor());
                ko.bindingHandlers.options.update.apply(this, args);
            },
            owner: this,
            disposeWhenNodeIsRemoved: element
        });
    }
};

var hogeList = ko.observableArray([1, 2, 3, 4, 5, 10]);
var fooList = ko.observableArray([1, 2, 3, 4, 5, 10]);

ko.applyBindings({
    logger: logger,
    hogeList: hogeList,
    piyo: ko.observable(1),
    fooList: fooList,
    bar: ko.observable(1),
    onClick: function() {
        fooList.push('a');
    }
});