我要如何從劍道UI模板值

我有這樣的模板：我要如何從劍道UI模板值

var template = kendo.template("<div class='relatedItemRow'>" 
          + "<span id='relatedItemName'>Related Item #: Number #</span>" 
          + "<div class='relatedItemRowInfo'><span >#: Name #</span>" 
          + "<a data-relatedItemID='#: Value #' class='removeRelatedItem'>" 
          + "<img src= '#: Img #'/</a></div><br class='clear'/></div>"); 
var data = { 
    Name: "" + checkbox.getAttribute('flatName'), 
    Number: $('#relatedItemsList').children().length + 1, 
    Img: '/Content/images/x_remove.png', 
    Value: checkbox.value 
}; 

var result = template(data); 
$("#relatedItemsList").append(result);

我能夠通過訪問數據relatedItemID：

$('#relatedItemsList').children().eq(i).children().last().attr('data-relatedItemID')

但我怎麼得到數據中的數字字段？我想動態地改變它。我試過了：

$('#relatedItemsList').children().eq(i).children().attr('Number') == 5

但它不起作用。任何想法如何做到這一點？

來源

2013-08-05 setlio

變量「結果」，因此你想要改變的數據不是一個Kendo模板，它們只是由模板創建的HTML，並且該數字只是HTML中的文本。要修改數字而不重建整個字符串，您需要更改模板，以便您可以使用jQuery自行選擇數字，方法是將其放入自己的元素中，然後添加一些內容以標識它。

var template = kendo.template("<div class='relatedItemRow'><span id='relatedItemName'>Related Item <span class='relatedNumberValue'>#: Number #</span></span><div class='relatedItemRowInfo'><span >#: Name #</span><a data-relatedItemID='#: Value #' class='removeRelatedItem'><img src= '#: Img #'/</a></div><br class='clear'/></div>"); 
//other code the same

一旦你可以選擇它，那麼你可以這樣改變它。

$('#relatedItemsList').children().eq(i).find('.relatedNumberValue').text(5);

並檢索它像這樣。

var foo = $('#relatedItemsList').children().eq(i).find('.relatedNumberValue').text();

來源

2013-08-06 00:00:33

感謝丹尼爾，它幫助了很多。 – setlio

我知道，有甚至接受了這個問題的答案，但我想提出一個不同的做法，我認爲這是更簡單，更劍道UI導向，用Kendo UI ObservableObject。這使您可以更新綁定到ObservableObject的HTML，而無需抓取HTML。

這種做法如下：

裹您data定義了劍道可觀測陣列初始化。
重新定義您的模板並開始使用data-binding。
將此新模板追加到您的HTML中。
將data綁定到HTML。

現在你可以使用data.get("Number")獲得電流值或使用data.set("Number", 5)設置一個新的價值和HTML得到神奇更新。

的代碼是：

模板定義

<script type="text/kendo-template" id="template"> 
    <div class='relatedItemRow'> 
     <span id='relatedItemName'>Related Item <span data-bind="text : Number"></span></span> 

     <div class='relatedItemRowInfo'> 
      <span data-bind="html : Name"></span> 
      <a class='removeRelatedItem' data-bind="attr: { data-relatedItemID : Value }"> 
       <img data-bind="attr : { src : Img }"/> 
      </a> 
     </div> 
     <br class='clear'/> 
    </div> 
</script>

data定義爲：

var data = new kendo.data.ObservableObject({ 
    Name: "" + checkbox.getAttribute('flatName'), 
    Number: $('#relatedItemsList').children().length + 1, 
    Img: '/Content/images/x_remove.png', 
    Value: checkbox.value 
});

和HTML的初始化是：

$("#relatedItemsList").append($("#template").html());

獲得的Number電流值是：

var old = data.get("Number");

設置爲：

data.set("Number", 5);

在這裏的jsfiddle運行例如：http://jsfiddle.net/OnaBai/76GWW/

來源

2013-08-06 11:55:45 OnaBai

我要如何從劍道UI模板值

回答

相關問題