knockout components

by gbos

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<ul>
    <li><message-editor params="obs: txt1" /></li>
    <li><message-editor params="obs: txt2" /></li>
</ul>

<ul>
    <li data-bind="text: txt1"></li>
    <li data-bind="text: txt2"></li>
</ul>

CSS

ul {
    list-style-type: none;
    padding: 2px;
    border: 1px solid red;
}

JavaScript

ko.components.register('message-editor', {
    viewModel: function(params) {
        this.text = params.obs;
    },
    template: 'Message: <input data-bind="textInput: text" /> '
            + '(length: <span data-bind="text: text().length"></span>)'
});

var vm = {
    txt1: ko.observable('aaa'),
    txt2: ko.observable('bbb')    
};

ko.applyBindings(vm);