我如何从 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);

我可以通过以下方式访问数据相关的ItemID：

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

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

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

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

Answer 1

我知道甚至可以接受这个问题的答案，但我想提出一种不同的方法，我认为它更简单，更面向 Kendo UI，并且正在使用Kendo UI ObservableObject。这允许您更新绑定到 ObservableObject 的 HTML，而无需抓取 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/

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