Facebook Twitter LinkedIn E-mail
magnify
Home Archive for category "JavaScript"

Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click

Click绑定可以把由ViewModel定义的方法不绑定到目标DOM的click事件。当点击目标DOM元素时触发ViewModel的对应方法。
例如:

使用Click绑定

<div id="view">
	<span data-bind="click: showDescription">Show description</span>
	<span data-bind="visible: isDescriptionShown, text: description"></span>
</div>
<script>
	var viewModel = kendo.observable({
		description: "Description",
		isDescriptionShown: false,
		showDescription: function (e) {
			// show the span by setting isDescriptionShown to true
			this.set("isDescriptionShown", true);
		}
	});

	kendo.bind($("#view"), viewModel);
</script>

20130817004

实际上,click绑定是events绑定的一个特例,下面的两种实现是等效的:

<span data-bind="click: clickHandler"></span>

<span data-bind="events: { click: clickHandler }"></span>

注: Kendo MVVM的 DOM 事件参数 e封装在jQuery 的Event对象中。

中止事件向上传递

如果需要终止事件向上传递(event bubbling),可以调用stopPropagation方法。

<span data-bind="click: click">Click</span>
<script>
var viewModel = kendo.observable({
    click: function(e) {
        e.stopPropagation();
    }
});

kendo.bind($("span"), viewModel);
</script>

停止事件缺省处理

如果要取消某些DOM元素单击后的缺省处理函数,比如转到其它页面或是提交表单,为了取消这些缺省实际处理,可以调用preventDefault()方法。例如:

<a href="http://example.com" data-bind="click: click">Click</span>
<script>
var viewModel = kendo.observable({
    click: function(e) {
        // stop the browser from navigating to http://example.com
        e.preventDefault();
    }
});

kendo.bind($("a"), viewModel);
</script>
 

Kendo UI开发教程(10): Kendo MVVM (一) 概述

Model View ViewModel (MVVM)  是开发人员经常使用的一种设计模式,以实现数据模型(Model)和视图(View)的分离。MVVM中的ViewModel部分负责把模型中的数据对象以某种方便的形式和View结合起来(通常是通过数据绑定的方式)。

Kendo MVVM实现了MVVN设计模式,并且支持和Kendo框架的其它部分(如UI组件和数据源)的无缝连接。

准备开始

使用MVVM模式首先创建ViewModel对象,ViewModel对象代表了可以使用View显示的数据对象,Kendo框架中使用kendo.observable函数通过传入JavaScript对象的方法来定义一个ViewModel对象。比如:

var viewModel = kendo.observable({
    name: "John Doe",
    displayGreeting: function() {
        var name = this.get("name");
        alert("Hello, " + name + "!!!");
    }
});

然后使用HTML创建一个View,这个View包含一个按钮和一个文本框。

<div id="view">
    <input data-bind="value: name" />
    <button data-bind="click: displayGreeting">Display Greeting</button>
</div>

其中文本框(input) 通过data-bind 属性指明绑定到ViewModel对象的 name域。 此时name域值发生变化将会反映到UI界面的Input输入框内容的变化。反之亦然,当UI输入框内容发生变化时,ViewModel的name域也发生变化。
按钮的click事件绑定到ViewModel的 displayGreeting 方法。

最后,通过bind方法将View和ViewModel绑定起来。

kendo.bind($("#view"), viewModel);

完整的代码如下:

<!doctype html>
<html>
<head>
    <title>Kendo UI Web</title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.web.min.js"></script>

</head>
<body>
<div id="view">
    <input data-bind="value: name" />
    <button data-bind="click: displayGreeting">Display Greeting</button>
</div>

 <script>
     var viewModel = kendo.observable({
         name: "John Doe",
         displayGreeting: function () {
             var name = this.get("name");
             alert("Hello, " + name + "!!!");
         }
     });

     kendo.bind($("#view"), viewModel);
 </script>
</body>
</html>

20130815001

 

 

数据绑定

数据绑定将DOM元素(或者UI组件)的属性绑定到ViewModel的某个属性或是方法。绑定通过设置data-bind属性,采用 “绑定名称 : ViewModel的属性或方法”的格式,也就是 value : name 的形式来指明。上面的例子使用了两种不同类型的绑定,value和click。 Kendo MVVM也支持其它类型的绑定,如source, html, attr ,visible,enable等。 data-bind 也可以支持通过逗号分隔的属性列表。Kendo MVVM数据绑定也支持嵌套的ViewModel 属性。

比如下例 把div绑定到person.name:

<div data-bind="text: person.name">
</div>
<script>
var viewModel = kendo.observable({
    person: {
        name: "John Doe"
    }
});
kendo.bind($("div"), viewModel);
</script>

要注意的是data-bindings的值不是Javascript代码,不可以使用在data-bindings中使用javascript 方法,比如

<div data-bind="text: person.name.toLowerCase()"></div>

要实现上面使用小写的功能,可以使用下面的实现:

<div data-bind="text: person.lowerCaseName"></div>

<script>
var viewModel = kendo.observable({
    person: {
        name: "John Doe",
        lowerCaseName: function() {
            return this.get("name").toLowerCase();
        }
    }
});
kendo.bind($("div"), viewModel);
</script>
 

Kendo UI开发教程(3): 初始化Data 属性

前面在介绍准备Kendo UI开发环境时我们使用jQuery的方法将一个HTML元素转换成一个Kendo UI控件: $(“#datepicker”).kendoDatePicker();
除了使用jQuery插件的方法来初始化方法外,每个Kendo 控件还可以通过data属性来初始化,此时你需要设置data的role属性,然后调用kendo.init方法。
使用初始化Data属性的方法在页面上包含有大量Kendo UI控件时非常便利。 首先, 组件的配置包含在目标元素中,第二无需首先查找每个元素然后调用jQuery方法,你只需调用一次kendo.init()方法。
Kendo UI Mobile应用通常使用Data属性来初始化。

如下例使用data 属性来初始化一个UI组件

<div id="container">
    <input data-role="numerictextbox" />
</div>
<script>
kendo.init($("#container"));
</script>

20130612001

其中方法kendo.init($(“#container”)) 会查找所有包含有data-role属性的元素,然后初始化这些Kendo UI组件。 每个kendo UI组件的role的值为该UI组件名称的小写名字,比如”autocomplete”或”dropdownlist”。

缺省情况下,kendo.init 只会初始化Kendo UI Web组件和Kendo UI DataViz组件(按这个顺序)。 而Kendo UIMobile应用 首先初始化Kendo UI Mobile组件,然后是Kendo UI Web组件,最后是Kendo UI DataViz组件。 这意味着data-role=”listview” 在Mobile应用中会缺省初始化为 Kendo UI Mobile Listview。 然而可以通过指明组件全称的方法在修改这个缺省初始化顺序。
比如:在Mobile应用中 指明使用Kendo UI Web的listview

<div data-role="view">
    <!-- specify the Kendo UI Web ListView widget -->
    <div data-role="kendo.ui.ListView"></div>
</div>
<script>
var app = new kendo.mobile.Application();
</script>

配置

每个组件可以通过Data属性来进行配置,对于配置的属性,只需在属性名前加上data-前缀就可以做为目标元素的属性进行配置。比如 data-delay=”100″。 对于一些使用Camel-cased 的属性则是通过添加“-” ,比如AutoComplete的ignoreCase 的属性可以通过 data-ignore-case来设置。而对于一些已经是使用data前缀的属性则无需再添加data-前缀。比如dataTextField属性可以通过data-text-field属性来配置,dataSource属性可以通过data-source属性来配置。对于一些复杂的配置可以通过JavaScript 对象字面量来配置,比如:data-source=”{data: [{name: ‘John Doe’},{name: ‘Jane Doe’]}”.

如下例:

<div id="container">
	<input data-role="autocomplete"
		data-ignore-case="true"
		   data-text-field="name"
		data-source="{data: [{name: 'John Doe'},{name: 'Jane Doe'}]}"
		 />
</div>
<script>
	kendo.init($("#container"));

</script>

20130612002

事件

你也可以通过data属性添加对Kendo UI组件的事件处理,属性的值被当成一个JavaScript函数,其作用域为全局。

如下例:

<div id="container">
    <input data-role="numerictextbox" data-change="numerictextbox_change" />
</div>
<script>
function numerictextbox_change(e) {
    // Handle the "change" event
}
kendo.init($("#container"));
</script>

事件处理函数也可以为一个成员函数,比如 foo.bar 可以看出为foo 对象的 bar 方法。

例如:

<div id="container">
    <input data-role="numerictextbox" data-change="handler.numerictextbox_change" />
</div>
<script>
var handler = {
    numerictextbox_change: function (e) {
        // Handle the "change" event
    }
};
kendo.init($("#container"));
</script>

数据源

支持数据绑定的UI组件的数据源也可以通过data-source 属性来指定。 这个属性可以为一个JavaScript对象,一个数组或是一个全局变量。

例如:

使用JavaScript对象作为数据源.

<div id="container">
    <input data-role="autocomplete" data-source="{data:['One', 'Two']}" />
</div>
<script>
kendo.init($("#container"));
</script>

使用JavaScript数组作为数据源。

<div id="container">
    <input data-role="autocomplete" data-source="['One', 'Two']" />
</div>
<script>
kendo.init($("#container"));
</script>

使用一个可以全局访问的变量作为数据源。

<div id="container">
    <input data-role="autocomplete" data-source="dataSource" />
</div>
<script>
var dataSource = new kendo.data.DataSource( {
    data: [ "One", "Two" ]
});
kendo.init($("#container"));
</script>

模板

模板也可以通过Data属性来设置,属性的值代表用来定义模板的Script元素的Id。比如:

<div id="container">
    <input data-role="autocomplete"
           data-source="[{firstName:'John', lastName: 'Doe'}, {firstName:'Jane', lastName: 'Doe'}]"
           data-text-field="firstName"
           data-template="template" />
</div>
<script id="template" type="text/x-kendo-template">
    <span>#: firstName # #: lastName #</span>
</script>
<script>
kendo.init($("#container"));
</script>
 

JavaScript 开发教程(7):表达式和运算符三

位运算符

位运算符将参数看做为32位的二进制数(1和0构成)而不是整体当成一个10进制数,16进制数或是8进制数。比如一个十进制数9 它的二进制数表示为1001. 位运算符则对该二进制形式进行逐位运算,但是它返回的结果还是一个标准的数值类型。

下表为JavaScript支持的位操作符

Table 3.4 位运算符
运算符 使用方法 描述
Bitwise AND a & b Returns a one in each bit position for which the corresponding bits of both operands are ones.
Bitwise OR a | b Returns a one in each bit position for which the corresponding bits of either or both operands are ones.
Bitwise XOR a ^ b Returns a one in each bit position for which the corresponding bits of either but not both operands are ones.
Bitwise NOT ~ a Inverts the bits of its operand.
Left shift a << b Shifts a in binary representation b bits to the left, shifting in zeros from the right.
Sign-propagating right shift a >> b Shifts a in binary representation b bits to the right, discarding bits shifted off.
Zero-fill right shift a >>> b Shifts a in binary representation b bits to the right, discarding bits shifted off, and shifting in zeros from the left.

其中位运算符可以分成位逻辑运算符和移位运算符。

位逻辑运算符

从概念上讲,位逻辑运算符采用如下方法进行计算:

  • 所有操作数都先转换成一个32 位的整数 (采用 0和1 的字串表现形式)
  • 第一个操作数的每一位和第二个操作数对应的位,第一位对第一位,第二位对第二位等等
  • 然后对每个对应的位执行给定的逻辑运算,最后的结果为每位的运算结果连接而成。

比如: 9的二进制表示为1001, 15的二进制表示为1111, 则下面的位操作运算结果如下:

Table 3.5 位运算示例
表达式 结果 二进制表示
15 & 9 9 1111 & 1001 = 1001
15 | 9 15 1111 | 1001 = 1111
15 ^ 9 6 1111 ^ 1001 = 0110
~15 -16 ~00000000...00001111 = 11111111...11110000
~9 -10 ~00000000...00001001 = 11111111...11110110

位移位运算符

位移位运算使用两个参数,第一个参数(操作数)为需要移位的数值,第二个操作数指定第一个操作数需要移动的位数。移位的方向由移位运算符指定。

移位运算符也是把第一个操作数转换成32位整数然后返回移位后的结果。

Table 3.6 位移位运算符
运算符 描述 示例
<<
(Left shift)
This operator shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right. 9<<2 yields 36, because 1001 shifted 2 bits to the left becomes 100100, which is 36.
>>
(Sign-propagating right shift)
This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left. 9>>2 yields 2, because 1001 shifted 2 bits to the right becomes 10, which is 2. Likewise, -9>>2 yields -3, because the sign is preserved.
>>>
(Zero-fill right shift)
This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Zero bits are shifted in from the left. 19>>>2 yields 4, because 10011 shifted 2 bits to the right becomes 100, which is 4. For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result.

逻辑运算符

逻辑运算符通常使用布尔运算,单操作数为布尔数值时,返回结果也是布尔值。然而,当运算符为&&或||时,实际返回的结果为其中的某个操作时。因此当这些逻辑运算符用作非布尔值的情况下,该逻辑运算符返回的结果也是非布尔量。下表描述了逻辑运算符。

Table 3.6 逻辑运算符
运算符 使用方法 描述
&& expr1 && expr2 (Logical AND) Returns expr1 if it can be converted to false; otherwise, returns expr2. Thus, when used with Boolean values, && returns true if both operands are true; otherwise, returns false.
|| expr1 || expr2 (Logical OR) Returns expr1 if it can be converted to true; otherwise, returns expr2. Thus, when used with Boolean values, || returns true if either operand is true; if both are false, returns false.
! !expr (Logical NOT) Returns false if its single operand can be converted to true; otherwise, returns true.

下面的例子的表达式代表了一些可以转换为False的情况(如 null, 0或是空字符串“”或是undefined)

&& 逻辑 AND的示例

var a1 =  true && true;     // t && t returns true
var a2 =  true && false;    // t && f returns false
var a3 = false && true;     // f && t returns false
var a4 = false && (3 == 4); // f && f returns false
var a5 = "Cat" && "Dog";    // t && t returns Dog
var a6 = false && "Cat";    // f && t returns false
var a7 = "Cat" && false;    // t && f returns false

|| 逻辑 OR的示例

var o1 =  true || true;     // t || t returns true
var o2 = false || true;     // f || t returns true
var o3 =  true || false;    // t || f returns true
var o4 = false || (3 == 4); // f || f returns false
var o5 = "Cat" || "Dog";    // t || t returns Cat
var o6 = false || "Cat";    // f || t returns Cat
var o7 = "Cat" || false;    // t || f returns Cat

! 逻辑 NOT 的示例

var n1 = !true;  // !t returns false
var n2 = !false; // !f returns true
var n3 = !"Cat"; // !t returns false

逻辑短路运算
逻辑运算从左至右进行, 下面是可以实施“短路”运算的情况:
•false && anything 可以短路算出结果为false .
•true || anything 可以短路算出结果为true.

 

JavaScript 开发教程(6):表达式和运算符二

比较运算符

比较运算符比较两个操作数,返回一个基于比较结果的逻辑值,参与比较的参数的类型可以是数值,字符串或者是某个对象。比较字符串是根据其Unicode的值按照字典顺序来比较。在大部分情况下,如果参与比较的两个参数的类型不同,JavaScript试图把参数通过转换变成可以比较的类型(比较===和!==是特例,这两个比较按照比较“严格”的方式进行比较,在比较之前不会进行类型的转换,这两个比较还同时比较数据类型是否相同)。

下面的表格给出了几种比较运算符的示例,其结果基于下面定义:

var var1 = 3, var2 = 4;
Table 3.2 比较运算符
运算符 描述 返回“True”的情况
等于 (==) Returns true if the operands are equal. 3 == var1
"3" == var13 == '3'
不等于 (!=) Returns true if the operands are not equal. var1 != 4
var2 != "3"
恒等 (===) Returns true if the operands are equal and of the same type. 3 === var1
不恒等 (!==) Returns true if the operands are not equal and/or not of the same type. var1 !== "3"
3 !== '3'
大于 (>) Returns true if the left operand is greater than the right operand. var2 > var1
"12" > 2
大于等于 (>=) Returns true if the left operand is greater than or equal to the right operand. var2 >= var1
var1 >= 3
小于(<) Returns true if the left operand is less than the right operand. var1 < var2
"12" < "2"
小于等于 (<=) Returns true if the left operand is less than or equal to the right operand. var1 <= var2
var2 <= 5

算术运算符

算术运算符使用数值为参数(可以为字面量或是变量),然后返回一个计算结果。基本的算术运算符,为加(+),减(-),乘(*)和除(/).这些操作符的作用和其它编程语言中用法基本相同,要注意的除数为0,产生NaN(非数值)。

例如:

console.log(1 / 2); /* prints 0.5 */
console.log(1 / 2 == 1.0 / 2.0); /* also this is true */

除加减乘除外,JavaScript还支持下面几种算术运算符

Table 3.3 算术运算符
运算符 描述 示例
%
(取模)
Binary operator. Returns the integer remainder of dividing the two operands. 12 % 5 returns 2.
++
(加一)
Unary operator. Adds one to its operand. If used as a prefix operator (++x), returns the value of its operand after adding one; if used as a postfix operator (x++), returns the value of its operand before adding one. If x is 3, then ++x sets x to 4 and returns 4, whereas x++ returns 3 and, only then, sets x to 4.
--
(减一)
Unary operator. Subtracts one from its operand. The return value is analogous to that for the increment operator. If x is 3, then --x sets x to 2 and returns 2, whereas x-- returns 3 and, only then, sets x to 2.
-
(取反)
Unary operator. Returns the negation of its operand. If x is 3, then -x returns -3.
 

JavaScript 开发教程(5):表达式和运算符一

本章描述了JavaScript的表达式和运算符,包括赋值,比较,数值计算,位运算,逻辑运算,字符串(运算)和特殊运算符。

表达式

表达式 是一组可以计算出一个数值的有效的代码的集合。

从概念上讲,有两种表达式: 它们是:把一个值赋值给一个变量和那些可以简单得到一个值的式子。比如,x=7 就是第一种。这个表达式用“=”运算符 把值7赋值给变量x。这个表达式自己的值等于7。而代码 3 + 4则是第二种表达式,这个表达式用“+”运算符把3和4相加却并没有将结果7赋值给一个变量。

JavaScript 中支持下面几种类型的表达式:

  • 算术表达式: 该表达式可以计算出一个数值,比如3. 14159 ,通常使用数学运算符。
  • 字符表达式:该表达式可以产生一个字符序列,比如“Fred”或“234”,通常使用字符运算符。
  • 逻辑表达式:该表达式可以产生True和False两个结果,通常使用逻辑运算符。
  • 对象表达式:该表达式的结果为一对象(可以参考后面的操作操作符)。

运算符

JavaScript 支持下面几种运算符

JavaScript支持单元,二元和一个特殊的三元运算符,

二元运算符可以有两个参数(被操作数),一个参数在前,一个参数在后,具有如下格式:

operand1 operator operand2
比如:3+4 or x*y.

一元运算符只需一个参数,可以在运算符之前也可以在运算符后面,具有如下格式:

operator operand

operand operator
比如: x++ 或 ++x.

赋值运算符

符值运算符使用运算符右边的参数为左边的参数赋值,基本运算符为“=”符号, 比如 x=y,将y的值赋予参数x.

其它的赋值运算符为基本赋值运算符的简单表现形式,如下表:

Table 3.1 赋值运算符
缩写 含义
x += y x = x + y
x -= y x = x - y
x *= y x = x * y
x /= y x = x / y
x %= y x = x % y
x <<= y x = x << y
x >>= y x = x >> y
x >>>= y x = x >>> y
x &= y x = x & y
x ^= y x = x ^ y
x |= y x = x | y