如何从Kendo UI模板获取价值

Question

I have this template:

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);

I am able to access the data-relatedItemID by using:

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

But how do I get to the Number field in data? I want to change that one dynamically. I have tried:

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

but it does not work. Any idea how to do that?

Answer 1

I know that there is an answer for this question even accepted but I'd like to suggest a different approach that I think it is much simpler and more Kendo UI oriented and is using Kendo UI ObservableObject . This allows you to update an HTML that is bound to the ObservableObject without having to crawl the HTML.

This approach is as follow:

1. Wrap your data definition with a Kendo Observable Array initialization.
2. Redefine your template and start using using data-binding .
3. Append this new template to your HTML.
4. Bind data to the HTML.

Now you can get current value using data.get("Number") or set a new value using data.set("Number", 5) and the HTML get magically updated.

The code is:

Template definition

<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 definition as:

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

and the initialization of the HTML is:

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

Getting current value of Number is:

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

Setting is:

data.set("Number", 5);

Running example in JSFiddle here : http://jsfiddle.net/OnaBai/76GWW/

Answer 2

The variable "result" and thus the data you're trying to change aren't a Kendo templates, they're just html created by the template, and the number is just text in the html. To modify the number without rebuilding the whole string, you need to change the template so you can select the number by itself with jQuery by putting it in it's own element, and adding something to identify it.

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

And once you can select it, then you can change it like this.

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

And retrieve it like this.

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