vic/knockout-jqueryBindingProvider

---

vic/knockout-jqueryBindingProvider.json

{
  "defaultBranch": "master",
  "description": "A binding provider for knockoutjs bind data without using data-bind on views.",
  "fullName": "vic/knockout-jqueryBindingProvider",
  "homepage": "http://vic.github.com/knockout-jqueryBindingProvider/",
  "language": "JavaScript",
  "name": "knockout-jqueryBindingProvider",
  "pushedAt": "2012-08-03T22:52:35Z",
  "stargazersCount": 3,
  "updatedAt": "2013-10-06T15:57:08Z",
  "url": "https://github.com/vic/knockout-jqueryBindingProvider"
}

Knockout jQuery binding provider.

A custom binding provider for Knockout.js that allows you to define bindings using jquery selectors instead of filling your view elements with complex data-bind attributes.

DEMO: http://vic.github.com/knockout-jqueryBindingProvider

Dependencies

<script unsrc="jquery.js"></script>
<script unsrc="knockout.js"></script>
<script unsrc="knockout-jqueryBindingProvider.js"></script>

Usage

  //  having a view model like this
  var viewModel = {
    firstName: ko.observable(),
    lastName: ko.observable()
  };
  viewModel.fullName = ko.computed({
    owner: viewModel,
    read: function() {
      return this.firstName() + ' ' + this.lastName();
    }
  });

  // you can bind its properties with
  $('.main').ko(viewModel, {
      'span.full-name': function(vm){
        return { text: vm.fullName };
      },

      '.first-name input': function(vm){
        return {
          value: vm.firstName,
          valueUpdate: 'afterkeydown'
        };
      },

      '.last-name input': function(vm){
        return {
          value: vm.lastName,
          valueUpdate: 'afterkeydown'
        };
      }
  });