Wijmo UI for the Web
KO Splitter Binding
Data-binding options:
Example:
In this example, the ViewModel is defined specifically for use with the splitter. It has disabled, showExpander, and splitterDistance properties that are bound in the View. If any of these values change, the widgets automatically respond to them. The widgets also update the ViewModel values as they modify them.
Create a ViewModel:
| ViewModel Script |
Copy Code |
|---|---|
var viewModel = function () { var self = this; self.disabled = ko.observable(false); self.showExpander = ko.observable(true); self.splitterDistance = ko.observable(100); }; | |
Create View with Bound Controls:
| View Markup |
Copy Code |
|---|---|
<div class="splitterContainer"> <div class="layout"> <h3>Vertical</h3> <div id="vsplitter" data-bind="wijsplitter: { disabled: disabled, showExpander: showExpander, splitterDistance: splitterDistance }"> <div>panel1</div> <div>panel2</div> </div> </div> <div class="layout" style="width: 100px;"> </div> <div class="layout"> <h3>Horizontal</h3> <div id="hsplitter" data-bind="wijsplitter: { orientation: 'horizontal', disabled: disabled, showExpander: showExpander, splitterDistance: splitterDistance }"> <div>panel1</div> <div>panel2</div> </div> </div></div> | |