首页 > 解决方案 > 修改列表框集合导致语法错误

问题描述

我正在使用 Kendo-UI 的列表框,但每当我尝试在我的数据源中添加/删除项目时,它都会在我的 jQuery.min 文件中给出以下语法错误:

Error: Syntax error, unrecognized expression: <li class='k-item' role='option' aria-selected='false'>My Item</li>

这是我的标记:

<script type="text/x-kendo-template" id="roles-permissions-edit">
    <div class="hpanel hblue">
        <div class="panel-heading hbuilt">
            Permissions - <span data-bind="text: roleName"></span>
            <div class="panel-tools">
                <a class="showhide"><i class="fa fa-chevron-up"></i></a>
            </div>
        </div>
        <div class="panel-body">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <a class="k-button btn-xs" href="#/">
                            <i class="fa fa-arrow-left"></i>
                            Roles
                        </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <label for="role-permissions-available">Available</label>
                        <select id="role-permissions-available"></select>
                    </div>
                    <div class="col-sm-6">
                        <label for="role-permissions-selected">Selected</label>
                        <select id="role-permissions-selected"></select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <button type="button" class="k-button" data-bind="click: save">Save</button>
                        <button type="button" class="k-button" data-bind="click: reset">Reset</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

这就是我初始化小部件的方式:

var available = $("#role-permissions-available").data("kendoListBox");
var selected = $("#role-permissions-selected").data("kendoListBox");
var availableDataSource = [];
var selectedDataSource = [];

var filter = {
    RoleId: _viewModel.edit.roleId
};

_viewModel.permissionDataSource.read(filter).then(function () {
    var data = _viewModel.permissionDataSource.data();
    var roleHasSystemAction = function (systemActionId) {
        return data.filter(function (item) {
            return item.SystemActionId === systemActionId;
        }).length > 0;
    };

    for (var i = 0; i < _viewModel.systemActions.length; i++) {
        var systemAction = _viewModel.systemActions[i];

        if (roleHasSystemAction(systemAction.SystemActionId)) {
            selectedDataSource.push(systemAction);
        } else {
            availableDataSource.push(systemAction);
        }
    }

    available.setDataSource(availableDataSource);
    selected.setDataSource(selectedDataSource);
});

澄清一下,我的小部件初始化得很好,我的数据源中的数据看起来也很好。问题来自尝试在 ListBox 小部件之间添加/删除项目。

更新 这很快就解决了,我觉得我没有先看这个有点傻。我使用的 jQuery 版本是 jQuery v1.9.1。升级它解决了这个问题。

更新 #2我在github上提交了一个错误,因为根据文档,它应该与 jQuery v1.9.1 兼容。

标签: jquerykendo-ui

解决方案


推荐阅读