内联HTML数据角色<>脚本jquery:Kendo Widget初始化

时间:2013-11-15 13:43:17

标签: javascript jquery kendo-ui

使用Kendo有两种方法可以初始化Kendo Widget:

一:

<span id=”UniqueID” /></span>
<script>
     $(“#UniqueID”).KendoWidget();
</script>

2:

<span id=”UniqueID”  data-role=”Widget” /></span>
<script>
     Kendo.init($(“#UniqueID”));
</script>

有没有人知道有两种方法的专业人士和骗子? 我想确保我了解任何具体方向的含义。

如果它更不平等,这是最常见的机制,那就是开发者。

亲切的问候, Flippie

1 个答案:

答案 0 :(得分:2)

我同时使用两者。这取决于该窗口小部件的配置的复杂性,并且在某些情况下,由于数据上下文问题,在HTML中初始化窗口小部件是不可能的(或者至少非常困难);因此,在代码中初始化它更容易。其他时候,这只是个人偏好。

对于所有小部件,我将首先在HTML中声明它们,如下所示:

<div id="cases"
  data-role="grid" 
  data-bind="source: cases" 
  data-pageable="{ refresh: true }" 
  data-sortable="{ mode: 'multiple' }" 
  data-filterable="{ 
    extra: false, 
    operators: { string: { contains: 'Contains', eq: 'Is equal to' } }
  }" 
  data-columns="[
    { title: '', template: kendo.template($('#editColumnTemplate').html()), sortable: false, filterable: false, width: 42 },
    { field: 'number', title: 'Number', width: 160 },
    { field: 'subject', title: 'Subject' },
    { field: 'contact', title: 'POC', width: 200 },
    { field: 'referral', title: 'Referred By', width: 100 },
    { field: 'opened', title: 'Opened', format: '{0:d}', filterable: false, width: 120 },
    { field: 'closed', title: 'Closed', format: '{0:d}', filterable: false, width: 120 }
  ]">
</div>

我更喜欢这样做,因为所有小部件的配置都是用HTML中的位置内联声明的。它与使用像Kendo和Knockout这样的MVVM框架将数据绑定到视图的方式类似,因此,我希望保持一致。对我来说,它更容易维护,因为一切都在一个地方定义,看起来很干净。现在,如果我遇到数据上下文问题,我无法绑定特定的observable或数据元素,比如在这个网格的列定义中,那么我将它全部移动到代码中。

无论哪种方式都或多或少相等。我不能告诉你哪个更常见。我想大多数开发人员都会这样做 - 混合两种方法。