Wijmo 5

自定义元素

该页面比较了使用Wijmo5和KnockoutJS的两种语法。

简介

Wijmo 5在KnockoutJS应用中使用控件提供了两种相似但是不同的语法:

如果你之前使用过KnockoutJS,你可能对自定义绑定语法很熟悉。 自定义绑定与一般HTML元素一起使用,典型的就是使用data-bind属性的<div>元素。 绑定名称与控件名称相关并带有一个wj前缀。 绑定值是一个JavaScript对象字符,包含映射到Wijmo 5控件的属性和事件处理器。

作为标准KnockoutJS绑定语法的代替,Wijmo 5提供了在页面标记中声明控件为自定义元素的可能性。 有了自定义元素,标签名与控件的绑定名相关,属性名与控件的属性名相关。 元素和参数名必须是小写和破折号而不是“驼峰式”。 需要提及一点,属性值必须使用自定义绑定定义中使用的相同JavaScript表达式定义。

下面的示例旨在说明大部分Wijmo 5控件的两种语法。

Input

绑定语法

<div> <label>InputNumber</label> <input data-bind="wjInputNumber: { value: pi, min: 0, max: 10, step: 1 }" /> </div> <div> <label>AutoComplete</label> <div data-bind="wjAutoComplete: { itemsSource: countries, isEditable: true, cssMatch: 'highlight' }"></div> </div> <div> <label>ComboBox</label> <div data-bind="wjComboBox: { itemsSource: countries, isEditable: true }"></div> </div> <div> <label>InputDate</label> <div data-bind="wjInputDate: { value: today }"></div> </div> <div> <label>Menu</label> <div data-bind="wjMenu: { header: 'File', itemClicked: menuItemClicked }"> <span data-bind="wjMenuItem: {}"> <b>New</b><br><small><i>create a new file</i></small> </span> <span data-bind="wjMenuItem: {}"> <b>Open</b><br><small><i>open an existing file or folder</i></small> </span> <span data-bind="wjMenuItem: {}"> <b>Save</b><br><small><i>save the current file</i></small> </span> <span data-bind="wjMenuSeparator: {}"></span> <span data-bind="wjMenuItem: {}"> <b>Exit</b><br><small><i>exit the application</i></small> </span> </div> </div>
this.pi = ko.observable(Math.PI); this.today = ko.observable(new Date()); this.countries = countries; this.menuItemClicked = function(data, sender, args) { alert('You\'ve selected option ' + sender.selectedIndex + ' from the ' + sender.header + ' menu!'); };
.highlight { background-color: #ff0; color: #000; }
New
create a new file
Open
open an existing file or folder
Save
save the current file
Exit
exit the application

自定义元素语法

<div> <label>InputNumber</label> <wj-input-number value="pi" min="0" max="10" step="1"> </wj-input-number> </div> <div> <label>AutoComplete</label> <wj-auto-complete items-source="countries" is-editable="true" css-match="'highlight'"> </wj-auto-complete> </div> <div> <label>ComboBox</label> <wj-combo-box items-source="countries" is-editable="true"> </wj-combo-box> </div> <div> <label>InputDate</label> <wj-input-date value="today"> </wj-input-date> </div> <div> <label>Menu</label> <wj-menu header="'File'" item-clicked="menuItemClicked"> <wj-menu-item> <b>New</b><br><small><i>create a new file</i></small> </wj-menu-item> <wj-menu-item> <b>Open</b><br><small><i>open an existing file or folder</i></small> </wj-menu-item> <wj-menu-item> <b>Save</b><br><small><i>save the current file</i></small> </wj-menu-item> <wj-menu-separator></wj-menu-separator> <wj-menu-item> <b>Exit</b><br><small><i>exit the application</i></small> </wj-menu-item> </wj-menu> </div>
this.pi = ko.observable(Math.PI); this.today = ko.observable(new Date()); this.countries = countries; this.menuItemClicked = function(data, sender, args) { alert('You\'ve selected option ' + sender.selectedIndex + ' from the ' + sender.header + ' menu!'); };
.highlight { background-color: #ff0; color: #000; }
New
create a new file
Open
open an existing file or folder
Save
save the current file
Exit
exit the application

FlexChart

绑定语法

<div data-bind="wjFlexChart: { itemsSource: itemsSource, bindingX: 'country' }"> <div data-bind="wjFlexChartSeries: { name: 'Sales', binding: 'sales' }"></div> <div data-bind="wjFlexChartSeries: { name: 'Expenses', binding: 'expenses' }"></div> <div data-bind="wjFlexChartSeries: { name: 'Downloads', binding: 'downloads' }"></div> </div>
this.itemsSource = data;

自定义元素语法

<wj-flex-chart items-source="itemsSource" binding-x="'country'"> <wj-flex-chart-series name="'Sales'" binding="'sales'"></wj-flex-chart-series> <wj-flex-chart-series name="'Expenses'" binding="'expenses'"></wj-flex-chart-series> <wj-flex-chart-series name="'Downloads'" binding="'downloads'"></wj-flex-chart-series> </wj-flex-chart>
this.itemsSource = data;

FlexGrid

绑定语法

<div style="height:300px" data-bind="wjFlexGrid: { itemsSource: itemsSource, autoGenerateColumns: false }"> <div data-bind="wjFlexGridColumn: { binding: 'id', header: 'ID' }"></div> <div data-bind="wjFlexGridColumn: { binding: 'country', header: 'Country' }"></div> <div data-bind="wjFlexGridColumn: { binding: 'date', header: 'Date' }"></div> <div data-bind="wjFlexGridColumn: { binding: 'amount', header: 'Amount' }"></div> <div data-bind="wjFlexGridColumn: { binding: 'active', header: 'Active' }"></div> </div>
this.itemsSource = data;

自定义元素语法

<wj-flex-grid style="height:300px" items-source="itemsSource" auto-generate-columns="false"> <wj-flex-grid-column binding="'id'" header="'ID'"></wj-flex-grid-column> <wj-flex-grid-column binding="'country'" header="'Country'"></wj-flex-grid-column> <wj-flex-grid-column binding="'date'" header="'Date'"></wj-flex-grid-column> <wj-flex-grid-column binding="'amount'" header="'Amount'"></wj-flex-grid-column> <wj-flex-grid-column binding="'active'" header="'Active'"></wj-flex-grid-column> </wj-flex-grid>
this.itemsSource = data;

Gauges

绑定语法

<div class="linear-gauge" data-bind="wjLinearGauge: { value: value, min: min, max: max, step: step, format: format, showText: showText, isReadOnly: readOnly}"> </div> <div class="radial-gauge" data-bind="wjRadialGauge: { value: value, min: min, max: max, step: step, format: format, showText: showText, isReadOnly: readOnly}"> </div>
this.value = ko.observable(0.5); this.min = ko.observable(0); this.max = ko.observable(1); this.step = ko.observable(0.05); this.readOnly = ko.observable(false); this.format = ko.observable('p0'); this.showText = ko.observable('All');
.linear-gauge, .radial-gauge { margin: 7px 0 5px; } .radial-gauge { height: 200px; }

自定义元素语法

<wj-linear-gauge class="linear-gauge" value="value" min="min" max="max" step="step" format="format" show-text="showText" is-read-only="readOnly"> </wj-linear-gauge> <wj-radial-gauge class="radial-gauge" value="value" min="min" max="max" step="step" format="format" show-text="showText" is-read-only="readOnly"> </wj-radial-gauge>
this.value = ko.observable(0.5); this.min = ko.observable(0); this.max = ko.observable(1); this.step = ko.observable(0.05); this.readOnly = ko.observable(false); this.format = ko.observable('p0'); this.showText = ko.observable('All');
.linear-gauge, .radial-gauge { margin: 7px 0 5px; } .radial-gauge { height: 200px; }

FlexPie

绑定语法

<div data-bind="wjFlexPie: { itemsSource: itemsSource, binding: 'value', bindingName: 'name' }"> </div>
this.itemsSource = data;

自定义元素语法

<wj-flex-pie items-source="itemsSource" binding="'value'" binding-name="'name'"> </wj-flex-pie>
this.itemsSource = data;