的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劍道模板裏面是給不正確的結果

回答

相關問題