当前位置: 首页 > 使用教程

快速掌握Angular Kendo UI的7大秘诀

发布时间:2018-01-18

Q2 2014版本开始,Kendo UI Core, Kendo UI Professionalserver wrappers集成了Google前端JS框架AngularJS详细更新)。Kendo UI Q2 2014集成Angular框架,无疑对Angular开发者来说是一大福音。从DropDowns到Schedulers,再到类型丰富的图表,Kendo UI强大的界面组件成为很多开发者的首选。下面,小编跟大家分享7个使用Angular Kendo UI的小技巧,让你快速掌握新功能的使用。

Angular Kendo UIQ2 2014

1、使用ObservableArrays or DataSources,而不是Arrays

Angular提出了开发者对UI的期望:视野内放置的任何元素,都可以绑定到UI。更新其中的任一个,另一个也会随之更新。总的来说,这适用于Angular本身,因为Angular会追踪所有视野内的项目和DOM绑定。因此,我们自然可以假设如何Kendo UI组件绑定到一个数组,修改这个数组就会修改组件中的数据。但事实并非如此。

当Kendo UI组件的某个数组设置为k-data-source时,传递给Kendo UI组件的指令还是一个数组。Kendo UI无法识别每个集合对象的变化,它只识别特殊对象,特别是Observables, ObservableArrays 和 DataSources(封装是可见的)。所以,你在处理Kendo UI组件时,最好是用ObservableArray 或者Kendo UI DataSource,而不要采用纯数组。

2、不要忘记相关的kendoEvent

Kendo UI组件触发事件,这些事件通常有一个含有重要信息的事件参数。在Angular Kendo UI中,你必须通过指令明确的传递这些参数。

<select kendo-drop-down-list k-on-change="change()"></select>
<script>
function HomeCtrl($scope) {
// logs 'undefined'
$scope.change = function(e) {
console.log(e);
}
}
</script>

另外,Angular Kendo UI要求使用事件绑定明确传递kendoEvent对象。

<select kendo-drop-down-list k-on-change="change(kendoEvent)"></select>
<script>
function HomeCtrl($scope) {
// logs the kendo event object
$scope.change = function(e) {
console.log(e);
}
}
</script>

记住这个小窍门可以节省很多时间,你不用再去花时间去想为什么事件绑定没有收到任何参数。

3、有时你必须使用 $Apply

由于有些组件通过属性(图表尤其如此)获得了超级详细的配置,Kendo UI提供了k-options选项,使大家可以通过scope提供的选项配置对象。

这是个非常有用的功能,它可以让你将UI和相关的配置的分离。但是,由于Angular无法识别通过配置对象提供的事件绑定,所以遇到这种情况你需要调用$apply。

4、用ng-model代替双向绑定的值

Kendo UI指令主要涉及到每个组件的change事件和value方法。有时候你可能在初始化阶段设置组件的value,但是随后对它进行了更改,你必须使用`value()“方法。

在Angular中,我们真正想要的是双向绑定组件,要实现这个目标,就不能使用k-value属性,而用ng-model代替。

5、记住'Strings'

Angular的解析引擎需要引用'Strings'属性,否则value会被当做一个scope属性。这个问题在最初阶段就可以避免,因为Kendo UI在它的声明初始化阶段不需要这样的引用。

这个简单的疏忽在使用AutoComplete, ComboBox, DropDownlist等需要判断DataSource对象中哪个字段含有密钥的组件时会出现问题。举个例子,AutoComplete绑定到一个含有对象的数据源,注意使用Kendo UI Declarative初始化和Angular Kendo UI集成之间的微妙差别:

<script>
// assuming we have data that looks like this...
app.people = new kendo.data.DataSource({
data: [ { text: "Alabama", value: "AL" },
{ text: "Alaska", value: "AK" },
{ text: "Arizona", value: "AZ" },
{ text: "Arkansas", value: "AR" } ]
});
</script>
<!-- the autocomplete declaration looks like this (kendo ui declarative) -->
<input data-role="autocomplete" data-source="app.people" data-text-field="text"
data-value-field="value" />
<!-- but the Angular integrations require quotes around the dataTextField and
dataValueField attributes -->
<input kendo-auto-complete k-data-source="people" k-data-text-field="'text'" k-data-
value-field="'value'" />

然而,这就是Angular的运行机制,我认为它自动引用字符串是反直觉的。毫无疑问,如果你不熟悉Angular参数解析,你会觉得非常混乱。所以Angular Kendo UI在Angular获取到一个不是范围内的参数时,会自动登陆控制台。这意味着当你使用某个范围外的值时,你就会收到类似于下面这种的错误提示:

kendoAutoComplete's kDataTextField attribute resolved to undefined. Maybe you meant
to use a string literal like: 'text'?

6、利用组件引用

当你需要为Kendo UI组件获取一个引用时,如果你没有使用Angular,你只需要选择jQuery元素并将组件引用从它的数据参数中删除。

<script>
// get the grid widget reference
$('#grid').data('kendoGrid');
// O R
$('#grid').getKendoGrid();
</script>

当然,用jQuery从 Angular 控制器中选择项目是一件让人纠结的事情,并且还可能导致全盘崩溃。所以,Kendo UI给出了另外一种获取组件引用的方式。所有你需要做的就是将一个范围变量传递给指令。

<div kendo-grid="grid" ...></div>
<script>
function HomeCtrl($scope) {
$scope.refresh = function() {
// scope.grid is the widget reference
$scope.grid.refresh();
}
}
</script>

7、遵守范围的层次结构

我们经常会将组件嵌入另一个组件,或者是将指令嵌入另一个指令。通常的做法是将某个Kendo UI控件放入Kendo UI Window,或者将组件放入TabsTrip, Splitter等等。如果你的范围绑定不带前缀,你很容易遇到范围层次的问题。记住,范围不是模型,它只是模型放置的地方。你一不小心就肯呢过遍布自己的模型,这可能会导致空的组件引用和其他各种古怪的问题。

Angular Kendo UI诞生的主要目的是将Kendo UI的强大功能集成到Angular中,并且不会让你放弃自己的引用去采用一个全新的框架。欲了解更多Angular Kendo UI的信息,请访问Angular Kendo UI Demos

神秘的附加秘诀——8、加入慧都学院独家Kendo UI培训

Telerik中国区总代理——慧都整合国内一线讲师资源,全新开发的Kendo UI培训已经正式上线!Kendo UI for jQuery线下研修班 与 Kendo UI企业内训双拳出击总有一款适合你!

Kendo UI for jQuery线下研修班旨在帮助您快速上手Kendo UI相关产品,学会使用Kendo UI for jQuery快速建立网站和移动应用,熟悉Kendo UI核心功能,并精通多个常用控件。>>立即免费预约

Kendo UI企业内训将帮助您全面了解Progress相关产品,学会使用Kendo UI for jQuery快速建立网站和移动应用,快速掌握Kendo UI核心功能,并精通各类控件在项目中的合理使用。>>立即免费预约


慧都特邀Kendo UI原厂开发工程师举行线上公开课,使用该控件的朋友千万别错过哦>>查看详情

kendo ui 公开课