的Javascript剑道模板里面是给不正确的结果

我有一个模板使用JavaScript里面的Javascript剑道模板里面是给不正确的结果

# if(IsSelected) { # 
    <tr> 
     <td data-bind="text: name"></td> 
     <td data-bind="text: age"></td> 
    </tr> 
    # } #

它旨在仅显示记录其IsSelected值为true。虽然它只显示两条记录 - 显示的记录不正确。这是什么原因？

小提琴：http://jsfiddle.net/Lijo/Z86dq/4/

CODE

<html> 
<head> 
    <title>Template Filtering</title> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script> 
     <script id="row-template" type="text/x-kendo-template"> 
     # if(IsSelected) { # 
     <tr> 
      <td data-bind="text: name"></td> 
      <td data-bind="text: age"></td> 
     </tr> 
     # } # 
    </script> 
    <!--MVVM Wiring using Kendo Binding--> 
    <script type="text/javascript"> 

     $(document).ready(function() { 
      kendo.bind($("body"), viewModel); 
     }); 

    </script> 
    <script type="text/javascript"> 
     var viewModel = kendo.observable({ 

      employees: [ 
         { name: "Lijo", age: "28", IsSelected: true }, 
         { name: "Binu", age: "33", IsSelected: false }, 
         { name: "Kiran", age: "29", IsSelected: true } 
         ] 
     }); 

    </script> 
    <style> 
     table, th, td 
     { 
      border: 1px solid black; 
     } 
    </style> 
</head> 
<body> 
    <table id="resultTable"> 
     <tbody data-template="row-template" data-bind="source: employees"> 
     </tbody> 
    </table> 
</body> 
</html>

来源

2014-02-27 Lijo

工作示例： - [fiddle]（http：// jsfiddle。net/Lijo/Z86dq/15 /） – Lijo

尝试定义模板为：

<script id="row-template" type="text/x-kendo-template"> 
    # if(IsSelected) { # 
    <tr> 
     <td>#= name #</td> 
     <td>#= age #</td> 
    </tr> 
    # } # 
</script>

为了避免双绑定首先在tbody，然后在td。

编辑：为了避免与抛出KendoUI错误的问题，我会改变你的代码一点点，而不是使用kendo.observable我会用一个DataSource实现filter S和。

因此，您不需要在模板中打印或不打印行，但需要在DataSource中设置筛选条件。

定义模板如下：

<script id="row-template" type="text/x-kendo-template"> 
    <tr> 
     <td>#= name #</td> 
     <td>#= age #</td> 
    </tr> 
</script>

和你的JavaScript代码：

var ds = new kendo.data.DataSource({ 
    data : { 
     employees: [ 
      { name: "Lijo", age: "28", IsSelected: true }, 
      { name: "Binu", age: "33", IsSelected: false }, 
      { name: "Kiran", age: "29", IsSelected: true } 
     ] 
    }, 
    schema: { 
     data: "employees" 
    }, 
    filter: { field: "IsSelected", operator: "eq", value: true } 
});

我在哪里设置filter滤掉元素，其中isSelected不等于true。

然后初始化一个ListView如下：

$("#list").kendoListView({ 
    dataSource: ds, 
    template : $("#row-template").html() 
});

你可以看到这里的代码：http://jsfiddle.net/OnaBai/Z86dq/16/

来源

2014-02-27 18:04:54 OnaBai

谢谢 - [小提琴]（http://jsfiddle.net/Lijo/Z86dq/15/）。虽然tbody中有双重绑定，然后在td中，为什么Kendo显示不正确的结果，而不是错误？有没有这种行为的任何文件？ – Lijo

这是我的语法，但它是从一个子格来了。所以我认为你需要的语法可能有点不同。我认为//＃只是变成了＃，如果它在父网格中，但不要引用它。看起来你缺少一些“”和串联

这里的剃刀语法，这是非常值得，也许你可以将其转换为您的需求

.Columns(columns => 
{ 
    columns.Bound(x => x.FirstName).Title("First Name").ClientTemplate(
    "# if (Id == 5) { #" + 
     ("<a class href='javascript: void(0);' onclick=\"return MyFunction('#=LastName#', '#= FirstName #');\">Convert</a>") + 
     "# } else { #" + 
         "#= FirstName #" + 
        "# } #"); 
    columns.Bound(x => x.LastName).Title("Last Name"); 
    columns.Bound(x => x.Id).Title("User ID");  

})

所以这个代码读取的，如果用户的ID 5，该列将有一个超链接，指出“转换”，并用这些参数调用MyFunction。如果没有显示用户名

来源

2014-02-27 17:25:00 CSharper

我不使用“ASP.Net MVC”。它是完整的客户端代码 – Lijo

的问题来自于这样MVVM实现预期的模板来呈现一个元素的事实。在你的情况下，你可以使用可见的绑定 - 检查一个updated version of the fiddle。

<tr data-bind="visible: IsSelected"> 
     <td data-bind="text: name"></td> 
     <td data-bind="text: age"></td> 
    </tr>

来源

2014-03-01 16:53:21

的Javascript剑道模板里面是给不正确的结果

回答

相关问题