JSFiddle - React, Tailwind, and code Playground

by nickkell

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<select data-bind="options: PayForms, optionsText: 'Text', optionsValue: 'Value', value: SelectedPayForm"></select>
<p data-bind="text: texty"></p>
<button data-bind="click: rep">click</button>

JavaScript

ko.bindingHandlers.test = {
    init: function(element, valueAccessor) {
        $(element).html(valueAccessor());

    }
};


ko.extenders.updateAlways = function(target) {
    var result = ko.computed({
        read: target,
        //always return the original observables value
        write: function(newValue) {
            target.notifySubscribers(newValue);
        }
    });

    //initialize with current value to make sure it is rounded appropriately
    result(target());

    //return the new computed observable
    return result;
};

function Adjustment() {
    var self = this;

    self.texty = ko.observable("text").extend({
        updateAlways: {}
    });
    self.texty.subscribe(function(txt) {
        console.log(txt);
    });

    self.rep = function() {
        self.texty("text");
    };

    self.PayForms = [{
        "Selected": false,
        "Text": "Credit Card",
        "Value": "1"},
    {
        "Selected": false,
        "Text": "Debit Card",
        "Value": "2"},
    {
        "Selected": true,
        "Text": "Cash",
        "Value": "3"},
    {
        "Selected": false,
        "Text": "Cheque",
        "Value": "4"}];

    self.SelectedPayForm = ko.observable();

    for (var i = 0, payForms = self.PayForms; i < payForms.length; i++) {
        if (payForms[i].Selected) {
            self.SelectedPayForm(payForms[i].Value);
        }
    }

    self.Reasons = ko.computed(function() {

    });
}

ko.applyBindings(new Adjustment());