Class: kb.Inject

Defined in: src/core/inject.coffee

Overview

Used to inject ViewModels and observables dynamically from your HTML Views. For both the 'kb-inject' attribute and the data-bind 'inject' custom binding, the following properties are reserved:

Each function/constructor gets called with the following signature 'function(view_model, element)'.

Examples:

Bind your application automatically when the DOM is loaded.

<div kb-inject><span data-bind="text: 'Hello World!'"></span></div>

Bind your application with properties.

<div kb-inject="message: ko.observable('Hello World!')"><input data-bind="value: message"></input></div>

Bind your application creating a specific ViewModel instance when the DOM is loaded.

<div kb-inject="MyViewModel"><input data-bind="value: message"></input></div>
var MyViewModel = function(view_model, el) {
  this.message = ko.observable('Hello World!');
}

Bind your application using a function when the DOM is loaded (like Angular.js controllers).

<div kb-inject="create: MyController"><input data-bind="value: message"></input></div>
var MyController = function(view_model, el) {
  view_model.message = ko.observable('Hello World!');
}

Bind your application with a specific ViewModel instance and a callback before and after the binding.

<div kb-inject="MyViewModel"><input data-bind="value: message"></input></div>
var MyViewModel = function(view_model, el) {
  this.message = ko.observable('Hello World!');
  this.beforeBinding = function() {alert('before'); };
  this.afterBinding = function() {alert('after'); };
}

Dynamically inject new properties into your ViewModel.

<div kb-inject="MyViewModel">
  <div class="control-group" data-bind="inject: {site: ko.observable('http://your.url.com')}">
    <label>Website</label>
    <input type="url" name="site" data-bind="value: site, valueUpdate: 'keyup'" required>
  </div>
</div>
var MyViewModel = function(view_model, el) {
  // site will be dynamically attached to this ViewModel
}

Dynamically bind a form.

<div kb-inject="MyViewModel">
   <form name="my_form" data-bind="inject: kb.formValidator">
     <div class="control-group">
      <label>Name</label>
      <input type="text" name="name" data-bind="value: name, valueUpdate: 'keyup'" required>
    </div>
    <div class="control-group">
      <label>Website</label>
      <input type="url" name="site" data-bind="value: site, valueUpdate: 'keyup'" required>
    </div>
  </form>
</div>
var MyViewModel = kb.ViewModel.extend({
  constructor: ->
    model = new Backbone.Model({name: '', site: 'http://your.url.com'});
    kb.ViewModel.prototype.constructor.call(this, model);
});

Class Method Summary

Class Method Details

. (Array) injectViewModels(root)

Searches the DOM from root or document for elements with the 'kb-inject' attribute and create/customizes ViewModels for the DOM tree when encountered. Also, used with the data-bind 'inject' custom binding.

Parameters:

  • root ( DOM element ) the root DOM element to start searching for 'kb-inject' attributes.

Returns:

  • ( Array ) — array of Objects with the DOM elements and ViewModels that were bound in the form {el: DOM element, view_model: ViewModel}.

    Quickly fuzzy find classes, mixins, methods, file:

    Control the navigation frame:

    You can focus and blur the search input: