入门
在KnockoutJS应用中开始使用Input控件的步骤：
- 添加对KnockoutJS, Wijmo和Wijmo的KnockoutJS绑定的引用。
- 添加一个视图模型提供数据和逻辑。
- 向当前页面添加一个Wijmo Input控件，并将它绑定到你的数据。
- （可选）添加一些CSS来自定义输入控件的外观。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/wijmo.css" />
<link rel="stylesheet" href="styles/app.css" />
<script src="scripts/knockout.js" type="text/javascript"></script>
<script src="scripts/wijmo.js" type="text/javascript"></script>
<script src="scripts/wijmo.input.js" type="text/javascript"></script>
<script src="scripts/wijmo.knockout.js" type="text/javascript"></script>
<script src="scripts/bindings/appBindings.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/viewmodels/appVM.js"></script>
</head>
<body>
<!-- this is the InputNumber binding -->
<div data-bind="wjInputNumber: { value: price, format: 'n', step: .5 }"></div></body>
</html>
// create and apply application view model
function viewModel1() {
// value to bind to
this.price = ko.observable(3.5);
.............
};
(function () {
ko.applyBindings(new viewModel1());
})();
AutoComplete
AutoComplete控件是一个自动完成的控件，允许你筛选它的项目列表为你的类型，以及从他的下拉列表直接选择一个值。
要使用AutoComplete控件，你必须至少设置itemsSource属性为一个填充列表的数据数组。
AutoComplete控件还提供了几个其它的属性来改变它的行为，比如cssMatch属性。
这个cssMatch属性允许你指定CSS类来突出符合你搜索条件的部分内容。
下面的实例使用了一个字符串数组通过设置itemsSource属性来填充AutoComplete控件的项目列表。
要看到一个搜索建议列表，在下面的AutoComplete控件键入"ab"或者"za"。
<div class="app-input-group">
<label>itemsSource Only</label>
<div data-bind="wjAutoComplete: {itemsSource: countries}"></div>
</div>
<div class="app-input-group">
<label>itemsSource & cssMatch</label>
<div data-bind="wjAutoComplete: {
itemsSource: countries,
cssMatch: 'highlight'}"></div>
</div>
.highlight {
background-color: #ff0;
color: #000;
}
ComboBox
ComboBox控件与AutoComplete控件是非常相似的，但它不是提供一列你输入内容的建议，而会自动补全并且选择一个你键入的选项。
就像AutoComplete控件，你必须至少设置itemsSource属性为一个填充列表的数据数组。
你可能也会想要通过isEditable属性来指定ComboBox是否可编辑。
isEditable属性决定用户是否可以输入ComboBox列表中没有出现的值。
下面这个样例使用两个绑定同一个数据源的ComboBox，就像上面的AutoComplete控件那样。
第一个ComboBox的isEditable属性设为false，而第二个的isEditable属性设为真。
<div class="app-input-group">
<label>Non-Editable</label>
<div data-bind="wjComboBox: {
itemsSource: countries,
isEditable: false}">
</div>
</div>
<div class="app-input-group">
<label>Editable</label>
<div data-bind="wjComboBox: {
itemsSource: countries,
isEditable: true }">
</div>
</div>
InputDate & Calendar
InputDate控件允许你通过一个下拉日历编辑和选择日期，同时防止你输入不正确的值。
InputDate的下拉日历可以作为一个独立的控件，并且可以在InputDate控件外独立使用。
InputDate和Calendar都指定了几个属性来改变控件的行为，最常用的属性包括：
-
value: 指定控件的日期值。
-
min: 指定能被输入到控件中的最小的日期值。
-
max: 指定能被输入到控件中的最大的日期值。
下面的样例展示了如何使用这些属性。
<div class="app-input-group">
<label>Bound InputDate with min & max</label>
<div data-bind="wjInputDate: {
value: today,
min: minDate,
max: maxDate }">
</div>
</div>
<div class="app-input-group">
<label>Bound Calendar with min & max</label>
<div data-bind="wjCalendar: {
value: today,
min: minDate,
max: maxDate }"
style="width:300px;">
</div>
</div>
<p>
<b>Selected Date: <span data-bind="text: format(today, 'd')"></span></b>
</p>
<p>
<b>Valid Range: <span data-bind="text: format(minDate, 'd')"></span> to
<span data-bind="text: format(maxDate, 'd')"></span></b>
</p>
var today = new Date();
this.today = ko.observable(today);
this.minDate = ko.observable(new Date(today.getFullYear(), 0, 1));
this.maxDate = ko.observable(new Date(today.getFullYear(), 11, 31));
Result (live):
Selected Date:
Valid Range: to
InputDate, InputTime和InputDateTime Controls
与InputDate控件相同，InputTime控件允许你修改JavaScript日期的时间部分，InputTime控件和InputDate控件有许多共有的属性，
包括format, min, max和value。InputTime控件还提供了一个step属性，允许你在它的下拉表中指定分钟的数量。
InputDateTime控件结合了InputDate和InputTime控件，允许你设置JavaScript日期的日期和时间部分。
InputDateTime控件有两个下拉列表：一个用来选择日期，一个用来选择时间。
下面的样例说明了如何使用同时使用InputTime控件和InputDate控件。
注意这些控件共同编辑同一个JavaScript Date对象并且只更新它们负责的一部分。
这个样例也展示了一个InputDateTime控件，它更新JavaScript Date对象的时间和日期部分。
<div class="app-input-group">
<label>Bound InputDate with min, max, & format</label>
<div data-bind="wjInputDate: {
value: today,
min: minDate,
max: maxDate,
format: 'MMM dd, yyyy' }">
</div>
</div>
<div class="app-input-group">
<label>Bound InputTime with min, max, & step</label>
<div data-bind="wjInputTime: {
value: today,
step: 15,
min: '07:00',
max: '19:00' }">
</div>
</div>
<div class="app-input-group">
<label>Bound InputDateTime with min, max, format, and step</label>
<div data-bind="wjInputDateTime: {
value: today,
format: 'MMM dd, yyyy hh:mm tt',
min: minDate,
max: maxDate,
timeStep: 15,
timeMin: '09:00',
timeMax: '17:00' }">
</div>
</div>
<p>
<b>Selected Date & Time: <span data-bind="text: format(today, 'G')"></span></b>
</p>
var today = new Date();
this.today = ko.observable(today);
this.minDate = ko.observable(new Date(today.getFullYear(), 0, 1));
this.maxDate = ko.observable(new Date(today.getFullYear(), 11, 31));
Result (live):
Selected Date & Time:
ListBox
ListBox控件展示了一列项目，允许你使用你的鼠标和键盘选中它们。
就像AutoComplete和ComboBox控件，你必须指定ListBox的itemsSource属性才能使用它。
下面的样例允许你在ListBox控件中选择一个项目同时展示控件的selectedIndex和selectedValue属性。
<div class="app-input-group">
<div data-bind="wjListBox: {
itemsSource: cities,
control: listBox,
selectedIndex: listBoxIndex,
selectedValue: listBoxValue }"
style="height:150px;width:250px;">
</div>
</div>
<p>
<b>selectedIndex: <span data-bind="text: listBoxIndex"></span></b>
</p>
<p>
<b>selectedValue: <span data-bind="text: listBoxValue"></span></b>
</p>
this.listBox = ko.observable(undefined);
this.listBoxIndex = ko.observable(undefined);
this.listBoxValue = ko.observable(undefined);
Result (live):
selectedIndex:
selectedValue:
InputNumber
InputNumber控件允许你编辑数字，它会阻止你输入无效的数据并且在它被编辑的时候将数字格式化。
InputNumber可以在不指定它的任何属性情况下使用。不过，你通常会使用value属性来将它绑定到一些数据。
除了value属性，InputNumber控件提供了几个其他的属性可以被用来改变它的行为，比如：
-
min: 指定可以被输入数字的最小值。
-
max: 指定可以被输入数字的最大值。
-
step: 指定当微调按钮被单击时，当前值增加或减少的数量。
-
format: 指定用于显示正在编辑数字的格式。Format属性使用.NET样式的
数字格式字符串。
下面的样例演示了如何使用所有这些属性。
<div class="app-input-group">
<label>Unbound with "n0" format</label>
<div data-bind="wjInputNumber: { format: 'n0' }"></div>
</div>
<div class="app-input-group">
<label>Bound with "n" format</label>
<div data-bind="wjInputNumber: {
value: pi,
format: 'n' }">
</div>
</div>
<div class="app-input-group">
<label>Bound with min (0), max (10), step, and "c2" format</label>
<div data-bind="wjInputNumber: {
value: price,
format: 'c2',
step: .5,
min: 0,
max: 10 }">
</div>
</div>
<div class="app-input-group">
<label>Unbound with placeholder and required="false"</label>
<div data-bind="wjInputNumber: {
placeholder: 'enter a number...',
required: false,
value: null }">
</div>
</div>
this.pi = ko.observable(Math.PI);
this.price = ko.observable(3.5);
菜单
菜单控件允许你创建一个简单的拥有可点击项目的下拉列表。就像ComboBox一样，Menu的项目可以通过itemsSource属性直接定义。
要指定显示在Menu的文本，你可以设置header属性。
Menu控件提供了两种方法来处理用户的选择，在每个菜单项目上指定一条指令或者指定一个itemClicked事件。
与itemClicked事件不同，指令是实现了以下两种方法的对象：
-
executeCommand(param): 执行指令的方法
-
canExecuteCommand(param): 返回一个布尔值来指定指令是否被执行。如果返回值为false，菜单项目是自动禁止选中的
下面的样例演示如何使用这两种方法。
<div class="app-input-group">
<label>itemClicked Event</label>
<div data-bind="wjMenu: { header: 'File', itemClicked: menuItemClicked}">
<span data-bind="wjMenuItem: {}"><i class="fa fa-file-o"></i> <b>New</b><br><small><i>create a new file</i></small></span>
<span data-bind="wjMenuItem: {}"><i class="fa fa-folder-open-o"></i> <b>Open</b><br><small><i>open an existing file or folder</i></small></span>
<span data-bind="wjMenuItem: {}"><i class="fa fa-save"></i> <b>Save</b><br><small><i>save the current file</i></small></span>
<span data-bind="wjMenuSeparator: {}"></span>
<span data-bind="wjMenuItem: {}"><i class="fa fa-times"></i> <b>Exit</b><br><small><i>exit the application</i></small></span>
</div>
<div data-bind="wjMenu: { header: 'Edit', itemClicked: menuItemClicked}">
<span data-bind="wjMenuItem: {}"><i class="fa fa-cut"></i> <b>Cut</b><br><small><i>move the current selection to the clipboard</i></small></span>
<span data-bind="wjMenuItem: {}"><i class="fa fa-copy"></i> <b>Copy</b><br><small><i>copy the current selection to the clipboard</i></small></span>
<span data-bind="wjMenuItem: {}"><i class="fa fa-paste"></i> <b>Paste</b><br><small><i>insert clipboard content at the cursor position</i></small></span>
</div>
</div>
<div class="app-input-group">
<label>Commands</label>
<div data-bind="wjMenu: { header: 'Change Tax' }">
<span data-bind="wjMenuItem: { cmd: menuCommand, cmdParam: .25 }">+ 25%</span>
<span data-bind="wjMenuItem: { cmd: menuCommand, cmdParam: .10 }">+ 10%</span>
<span data-bind="wjMenuItem: { cmd: menuCommand, cmdParam: .05 }">+ 5%</span>
<span data-bind="wjMenuItem: { cmd: menuCommand, cmdParam: .01 }">+ 1%</span>
<span data-bind="wjMenuSeparator: {}"></span>
<span data-bind="wjMenuItem: { cmd: menuCommand, cmdParam: -.01 }">- 1%</span>
<span data-bind="wjMenuItem: { cmd: menuCommand, cmdParam: -.05 }">- 5%</span>
<span data-bind="wjMenuItem: { cmd: menuCommand, cmdParam: -.10 }">- 10%</span>
<span data-bind="wjMenuItem: { cmd: menuCommand, cmdParam: -.25 }">- 25%</span>
</div>
<div data-bind="wjInputNumber: { value: tax, format: 'p0', min: 0, max: 1, step: .05 }"></div>
</div>
this.tax = ko.observable(.07);
this.menuItemClicked = function (data, sender, args) {
alert('You\'ve selected option ' + sender.selectedIndex + ' from the ' + sender.header + ' menu!');
};
this.menuCommand = {
executeCommand: function (arg) {
self.tax(self.tax() + arg);
},
canExecuteCommand: function (arg) {
if (wijmo.isNumber(arg)) {
var val = self.tax() + arg;
return val >= 0 && val <= 1;
}
return false;
}
};
