0

我有这个模板：

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

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

4

2 回答 2

6

我知道这个问题的答案甚至被接受了，但我想提出一种不同的方法，我认为它更简单，更面向 Kendo UI，并且正在使用Kendo UI ObservableObject。这允许您更新绑定到的 HTML，ObservableObject而无需爬取 HTML。

这种方法如下：

  1. data使用 Kendo Observable Array 初始化包装您的定义。
  2. 重新定义您的模板并开始使用 using 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/

于 2013-08-06T11:55:45.757 回答
1

变量“结果”以及您尝试更改的数据不是 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-06T00:00:33.040 回答