1

我将 Kendo MultiSelect 用于“标签云”类型的东西。标签看起来像这样......它们是简单的 JSON。

{
    Id: "tags/weapon",
    Name: "Weapon",
    Description: "This item qualifies as a weapon in the game."
},
{
    Id: "tags/sword",
    Name: "Sword",
    Description: "This item qualifies as a sword in the game."
},
{
    Id: "tags/shield",
    Name: "Shield",
    Description: "This item qualifies as a shield in the game."
}

视图模型看起来很像这样......

var viewModel = kendo.observable({
    Id: null,
    Name: null,
    Consumable: false,
    Equipable: false,
    Tags: [],
});

创建多选的 javascript 看起来像这样......

var $tags = $("#tags").kendoMultiSelect({
    dataTextField: "Name",
    dataValueField: "Id",
    itemTemplate: $('#editing-tags-template').html(),
    dataSource: {
        transport: {
            read: {
                dataType: "json",
                url: url
            }
        }
    },
    open: function (e) {
        this.list.addClass("k-tag-cloud");
    },
    close: function (e) {
    }
}).data("kendoMultiSelect");

k-tag-cloud 是一种自定义 CSS 样式，这不会给我带来任何麻烦。

这适用的HTML是这样的......

<select id="tags" multiple="multiple"
        data-placeholder="Select Tags..."
        class="dark k-tag-cloud"
        data-bind="value: Tags"
        style="width: 500px;"></select>

所有这些都完全符合我的预期。在我的屏幕上看起来像这样，行为正常等；我可以选择多个标签，当我保存项目时，它们无需任何额外代码即可保存 - 只需绑定到视图模型即可。如果我检索一个项目，标签列表将使用所选标​​签正确重新填充。

但是，有一个模板用于将列表绘制到页面不同部分的屏幕上，看起来像这样..

<h2>Preview</h2>
<div style="border: dashed 2px black;">
    <div style="padding: 8px;">
        <h3 data-bind="text: Name" style="margin: auto;"></h3>
        <h5 data-bind="visible: Equipable" style="margin: auto;">Equipable</h5>
        <h5 data-bind="visible: Consumable" style="margin: auto;">Consumable</h5>
        <div data-template="templates-admin-prototype-tags-preview" data-bind="source: Tags"></div>
    </div>
</div>

然后这是我调用的实际模板。

<script type="text/x-kendo-template" id="templates-admin-prototype-tags-preview">
    <div class="k-prototype-tag">${ Name }</div>
</script>

现在发生的情况是，一旦添加了标签，它就会吸引到此部分，但随后会停留在那里 - 如果我删除标签，它不会“消失”。所以 ..

如果我开始并选择“武器”，平局看起来像这样..

武器

如果我删除“武器”，它会很好地删除它。但是，如果我超过 1 个标签……它开始为每个项目重复。所以如果我选择“武器”然后选择“斩击”，我会得到......

武器斩击武器

每次我添加一个新标签时，这种情况都会无限量地继续下去。

4

1 回答 1

0

我不确定这是否是您的问题，但总的来说，Kendo 并不喜欢source像您在这里那样在非小部件上进行 mvvm 绑定：

<div data-template="templates-admin-prototype-tags-preview" data-bind="source: Tags"></div>

尝试通过添加使其成为 ListView 小部件data-role="listview"：

<div data-role="listview"
     data-template="templates-admin-prototype-tags-preview"
     data-bind="source: Tags"></div>
于 2013-10-31T23:40:45.123 回答