Question

我正在使用Kendo MultiSelect作为“Tag Cloud”类型的东西。标签看起来像这样......它们是简单的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个标签......它会开始为每个项目重复一次。所以如果我选择“武器”然后选择“削减”，我就会......

武器削减武器

每次添加新标签时，这都是无限量的。

Answer 1

我不确定这是不是你的问题，但总的来说，剑道并不像你在这里那样对非小部件进行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>

Kendo Multiselect：奇怪的“缓存”并重复选定的项目

1 个答案: