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

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

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

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

Answer 1

我知道即使接受了这个问题也有答案，但我想建议一种不同的方法，我认为它更简单，更多的是面向Kendo UI并使用Kendo UI ObservableObject。这允许您更新绑定到ObservableObject的HTML，而无需抓取HTML。

这种方法如下：

使用Kendo Observable Array初始化包裹您的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/

Answer 2

变量“result”以及您尝试更改的数据不是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();

如何从Kendo UI模板获取值

2 个答案: