Knockout User Defined Fields

by jschr

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.1.0.js"></script>
<p>First name:
    <input data-bind="value: firstName, event: { change: firstNameChanged.bind(null, true) }" />
    <button data-bind="click: setFirstName">Set First Name</button>
</p>
<p>Gender:
    <select data-bind="options: gender.options, value: gender, event: { change: genderChanged.bind(null, true) }"></select>
    <button data-bind="click: setGender">Set Gender</button>
</p>

JavaScript

var viewModel = function () {
    var self = {};
    self.firstName = ko.observable();
    self.setFirstName = function () {
        self.firstName('test');
    };
    self.firstNameChanged = ko.observable();
    self.firstNameChanged.subscribe(function (val) {
        alert('firstNameChanged: ' + val + ' (' + self.firstName() + ')');
    });

    self.gender = ko.observable();
    self.gender.options = ko.observableArray(['', 'Male', 'Female']);
    self.setGender = function () {
        self.gender('Male');
    };
    self.genderChanged = ko.observable();
    self.genderChanged.subscribe(function (val) {
        alert('genderChanged: ' + val + ' (' + self.gender() + ')');
    });

    return self;
};

ko.applyBindings(viewModel());