Kendo UI 不使用 Meteor？

Question

我正在尝试让一个简单的 MultiSelect 在 Meteor 中工作。在检查了 ~20 个不同的 UI 库后，我认为 Kendo UI 看起来最好。

我环顾四周，发现他们已经设置了 Meteor 包，以便（据说）可以轻松地在 Meteor 中使用 Kendo 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 并访问页面时，我得到了一个标准的多 select 框。

Answer 1

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

尝试这样做，效果很好：

在您的 .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>

向该模板添加一个 onRendered 函数（在您的 js 代码中）：

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

选择多个位置很有趣。

Answer 2

如果你不想在这一点上搞砸，就用一个

在 meteor version 1.0.4 or >

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

流星1.0.4 or less

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

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

Kendo UI 不使用 Meteor？

Kendo UI Not Working with Meteor?

javascript

jquery

kendo-ui

meteor