剑道UI不与流星合作

Kendo UI Not Working with Meteor?

本文关键字：流星 UI 剑道      更新时间：2023-09-26

我正在尝试在Meteor中使用一个简单的MultiSelect。在查看了大约20个不同的UI库后，我认为Kendo UI看起来最好。

我环顾四周，发现他们已经设置了流星包，可以（据说）在流星中轻松使用剑道UI。以下是我在Meteor:中使用Kendo UI尝试获得MultiSelect的Hello World的步骤

meteor create FindMeFood
meteor add telerik:kendo-ui-core-fiori-theme

然后我修改了FindMeFood.html:

<head>
    <title>FindMeFood</title>
</head>
<body>
    <label for="where">Where</label>
    <select id="where" multiple="multiple" data-placeholder="Select where...">
        <option>McDonalds</option>
        <option>Burger King</option>
        <option>Wendy's</option>
        <option>Five Guys</option>
        <option>KFC</option>
        <option>Taco Bell</option>
        <option>Pizza Hut</option>
        <option>Papa Johns</option>
    </select>
</body>

最后修改FindMeFood.js:

if (Meteor.isClient) {
    $("#where").kendoMultiSelect().data("kendoMultiSelect");
}

什么也没发生。当我启动Meteor并访问该页面时，我得到了一个标准的多选框。

如果您不想在这一点上搞砸，只需使用

关于meteor version 1.0.4 or >

 if(Meteor.isClient){
    Template.body.onRendered(function(){
      $("#where").kendoMultiSelect().data("kendoMultiSelect");
    })
  }

Meteor 1.0.4 or less

if(Meteor.isClient){
   Template.body.rendered = function(){
    $("#where").kendoMultiSelect().data("kendoMultiSelect");
    }
  }

为什么选择rendered function()？使用rendered函数，可以确保代码在DOM准备就绪时运行，在本例中为#where select

流星是客户端方法可能在客户端呈现HTML之前运行。

试着这样做，效果很好：

  1. 在.html文件中引入一个命名模板：

    <head>
  <title>FindMeFood</title>
</head>
<body>
  {{> kendo}}
</body>
<template name="kendo">
    <label for="where">Where</label>
    <select id="where" multiple="multiple" data-placeholder="Select where...">
        <option>McDonalds</option>
        <option>Burger King</option>
        <option>Wendy's</option>
        <option>Five Guys</option>
        <option>KFC</option>
        <option>Taco Bell</option>
        <option>Pizza Hut</option>
        <option>Papa Johns</option>
    </select>
</template>

  2. 将onRendered函数添加到该模板（在js代码中）：

    if (Meteor.isClient) {
  Template.kendo.onRendered(function () {
    $("#where").kendoMultiSelect().data("kendoMultiSelect");
  });
}

  3. 选择多个地点玩得开心。

相关文章：