如何在移动端使用带有 Kendo UI 模板的 jQuery 插件？答案

【问题标题】：How to use jQuery plugins with Kendo UI templates, mobile?如何在移动端使用带有 Kendo UI 模板的 jQuery 插件？
【发布时间】：2015-07-06 19:06:51
【问题描述】：

你会如何使用带有 Kendo UI x-kendo-template 的 jQuery 插件？

我检查了文档，没有真正的具体答案。我们有一个想要使用的 jQuery Barcode 插件。在 Kendo UI mobile 中，我们在 home.js 文件中创建了一个模型。在我们的 home.html 文件中，我们使用 x-kendo-template 调用数据并使用 #:mydataitem # 语法获取数据。现在我们有了这些数据，我们现在需要将该数据传递给 jQuery Barcode 插件并将其生成到页面上。

我们从 home.js 中的模型中获取了一个名为“MemId”的属性。现在我们需要使用“MemId”将其传递给 jQuery Barcode 插件，这样我们就可以生成条形码，然后将其传递回 Kendo 模板进行渲染。这甚至可能吗。或者我们应该将元素放在剑道模板之外，在这种情况下，我们将如何做到这一点。我在下面的代码中评论了我们的帮助需求。

我们当前的代码如下：

index.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/jquery-barcode-plugin.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/home.js"></script>

<div data-role="layout" data-id="main"> 
<div data-role="header">
    <div data-role="navbar">
        <!--Need to add back button and mail center buttons-->
        <span data-role="view-title"></span>
       <a href="#left-drawer" data-role="button" data-align="right" class="nav-button" data-rel="drawer"><i class="fa fa-bars"></i></a>
    </div>
</div>
</head>

Home.html

 <div data-role="view" data-layout="main" data-model="app.MemberInfo" data-title="Home" >
<div id="MemberCardHeader">
 <div data-template="memberTemplate" data-bind="source: MemberInfo">
    <!--Member card x-kendo-template id="memberTemplate" renders here-->
</div>
</div>
</div>

 <script type="text/x-kendo-template" id="memberTemplate">
  <div id="memberCard">
    <!--jQuery Plugin Barcode should render here-->
   <div id="Barcode"></div>
  </div>

</script> 

<script type="text/javascript">
   //NEED HELP WITH THIS
  // BELOW IS THE SYNTAX FOR THE JQUERY BARCODE BUT THIS MAY NOT BE THE SPOT TO DO THIS. How would we pass the ""
   $("#Barcode").barcode("DYNAMIC-TEXT-FOR-MEMID", "code128")
 </script>

Home.js

var app = app || {};
 app.MemberInfo = (function (){
   var membersInfoModel = (function() { 
     var memberInfoModel = {
         MemId: {
                type: "number",
                field: 'MyMemberAccount.ConstituentId'
            }
     }
   };
   //THE REST OF OUR MODEL AND DATA IS PASSED FROM CODE. NOT POSTING HERE.

 }());

}());

【问题讨论】：

标签： jquery jquery-plugins kendo-ui kendo-mobile

【解决方案1】：

我会尝试将init 事件处理程序添加到包含该模板的视图中。然后可以从那里调用您的代码。

如果没有看到您的其余代码，我认为您需要类似...

将init 处理程序添加到视图元素

<div data-role="view"
     data-layout="main"
     data-model="app.MemberInfo"
     data-title="Home"
     data-init="app.homeView.onInit">

那么onInit 函数将是：

var onInit = function(initEvent) {
    initEvent.view.contentElement().find("#Barcode").barcode("DYNAMIC-TEXT-FOR-MEMID", "code128");
};

另一种选择是为您的 Barcode 创建一个自定义 Kendo 小部件，该小部件仅包装 jQuery 条形码小部件。然后你可以有一个特殊的data-role 属性来初始化小部件，比如：

<div id="Barcode" data-role="barcode"></div>

但是要正确设置自定义 Kendo 小部件还有很多工作要做。

【讨论】：