剑道多选：奇怪的“缓存”并重复选定的项目答案

【问题标题】：Kendo Multiselect : strange 'caching' and repeating with selected items剑道多选：奇怪的“缓存”并重复选定的项目
【发布时间】：2013-10-31 19:10:46
【问题描述】：

我将 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 个标签……它开始为每个项目重复。所以如果我选择“武器”然后选择“斩击”，我会得到......

武器削减武器

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

【问题讨论】：

标签： kendo-ui

【解决方案1】：

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

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

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

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

【讨论】：