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:
'view_model'class used to create a new ViewModel instance'create'function used to manually add observables to a view model'options'to pass to ko.applyBindings'afterBinding'callback (can alternatively be in the options)'beforeBinding'callback (can alternatively be in the options)
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
-
.
(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.
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.