如何从Kendo UI模板获取值

Question

我有这个模板:

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

我可以使用以下方法访问data-relatedItemID:

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

但是,如何进入数据中的数字字段？我想动态地改变那个.我试过了:

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

但它不起作用.知道怎么做吗？

Answer 1

我知道这个问题有一个答案,即使被接受,但我想建议一个不同的方法,我认为它更简单,更多的Kendo UI导向和使用Kendo UI ObservableObject.这允许您更新绑定到HTML的HTML ObservableObject而不必抓取HTML.

这种方法如下:

1. data使用Kendo Observable Array初始化包装您的定义.
2. 重新定义模板并开始使用data-binding.
3. 将此新模板附加到HTML.
4. 绑定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/