javascript - 内联 HTML 数据 Angular 色 <> 脚本 jquery : Kendo Widget Initialization

Question

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

一个:

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

两个:

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

有人知道这两种方法的优缺点吗？我想确保我了解任何特定方向的含义。

如果它更相等或更不相等，这是最常见的机制，开发人员会遵循。

亲切的问候，翻转

Answer 1

我两个都用。这取决于该小部件配置的复杂性，并且在某些情况下，由于数据上下文问题，不可能(或至少非常困难)在 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 框架将数据绑定(bind)到 View 的方式，因此，我喜欢保持一致。对我来说，它更容易维护，因为一切都在一个地方定义，而且看起来很干净。现在，如果我遇到无法绑定(bind)特定可观察对象或数据元素的数据上下文问题，比如在此网格的列定义中，那么我会将其全部移动到代码中。

任何一种方式都差不多。我不能告诉你哪个更常见。我想大多数开发人员都会采用与我相同的方式 - 混合使用这两种方法。