Getting started

  1. Download source and examples from Download section
  2. Add dependencies libraries to your page (jQuery and knockout.js)
  3. Add Knockout+ scripts to your page
  4. Use new binding types and observable extenders

Core extensions

Dependency: knockoutpuls.core.x.y.z.js

Binding type: trimmedValue
<input type="text" data-bind="trimmedValue: StringValue" />

Binding type: intValue
<input type="text" data-bind="intValue: { value: IntValue, fallbackValue: 5 }" />

Binding type: floatValue
<input type="text" data-bind="floatValue: { value: FloatValue, fallbackValue: 3.14 }" />

Observable extender: deferred
ko.observable().extend({ deferred: "Initial data" });

Tracing bindings and observables

Dependency: knockoutpuls.core.x.y.z.js

Binding type: trace
<input id="username" type="text" data-bind="value: Value, trace: 'Trace for username input'" />

Observable extender: trace
ko.observable().extend({ trace: "Value changed to: " });

Bootstrap extensions

Dependency: knockoutpuls.bootstrap.x.y.z.js

Binding type: icon
<span data-bind="icon: 'asterisk'"></span>
<span data-bind="icon: iconObservableProperty"></span>

Binding type: modal
<div data-bind="modal: { show: visible }" class="modal fade" tabindex="-1" role="dialog">
<div data-bind="modal: { show: visible }" data-remote="remone.html" class="modal fade" tabindex="-1" role="dialog">

Binding type: popover
<div data-bind="popover: { show: visible, title: 'Some title', html: true, content: '<h1>Content</h1>' }"</div>

Binding type: dateValue
Dependency: knockoutpuls.bootstrap.datepicker.x.y.z.js
<input data-bind="dateValue: { value: dateValue, format: 'dd-mm-yyyy', lang: 'en' }" />

jQuery UI extensions

Dependency: knockoutpuls.jqueryui.x.y.z.js

Binding type: drag
<div class="draggable" data-bind="drag: true"></div>
<div class="draggable" data-bind="drag: { isDragging: isDragging, options: { revert: 'invalid' } }"></div>

Binding type: drop
<div class="droppable" data-bind="drop: { options: { drop: drop } }"></div>
<div class="droppable" data-bind="drop: { options: { accept: accept, drop: drop, hoverClass: 'hovered' } }"></div>

What alse you need?

Last edited Jun 17, 2014 at 5:14 PM by janusznoszczynski, version 9