Knockout SO Solution

by madcapnmckay

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/23fb458cac7f85ce075f37b969f083f355969cfa/build/output/knockout.mapping-latest.js"></script>
<div data-bind="with: channelContent"> 
   // other code, to show content from channelContent
   <div data-bind="text: subchild"></div>
   <textarea rows="1" cols="20" data-bind="value: $root.message, enterKey: $root.onMessageEnterKey"></textarea>
</div>
<button data-bind="click: update">Update</button>

JavaScript

ko.bindingHandlers.enterKey = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        ko.utils.registerEventHandler(element, 'keydown', function(evt) {
            if (evt.keyCode === 13) {
                evt.preventDefault();
                evt.target.blur();
                valueAccessor().call(viewModel);
            }
        });
    }
};

var ViewModel = function() {
    var self = this;
    self.channelContent = ko.mapping.fromJS({ subchild: "foo" });
        
    self.onMessageEnterKey = function() {
        console.log("enter pressed");
    };
    
    self.message = ko.observable("some message");
    
    self.update = function() {
        ko.mapping.fromJS({ subchild: "bar" }, {}, self.channelContent);
    };
};
ko.applyBindings(new ViewModel());