kendo-ui - 如何使用 Kendo UI 动态插入元素

Question

我正在尝试使用移动剑道 ui 创建一个动态列表视图。我知道当我将东西附加到 DOM 时，我必须初始化元素，如果我要使用 jQuery，我会做类似的事情

$('#list').append(newElementStr);
$('#list').trigger('create');

这是我在这里尝试做的一个例子：http: //jsfiddle.net/Ab3Yu/

您可以看到动态插入的元素看起来与其他列表项不同，我该如何初始化它？

谢谢。

Answer 1

您始终可以在列表的 DataSource 上添加数据。这是我将所有项目从一个列表转移到另一个列表的方法

function moveAllLeft() {
    var listView2 = $("#listView2").data("kendoListView");
    listView2.element.children().each(function() {
        listView2.remove($(this));
        var that = $(this);
        dataSource.add({
            ProductName : that[0].innerText
        });
    });
}

function moveAllRight() {
    var listView = $("#listView").data("kendoListView");
    listView.element.children().each(function() {
        listView.remove($(this));
        var that = $(this);
        dataSource2.add({
            ProductName : that[0].innerText
        });
    });
}

其中 dataSource 是第一个列表的数据源，dataSource2 是第二个列表的数据源。

Answer 2

该课程缺少http://jsfiddle.net/Ab3Yu/2/

$('#list').append('<li><a href="#" class="km-listview-link" data-role="listview-link">' + 'Dynamic Item' + '</a></li>');
$('#list').append('<li><a href="#">' + 'Dynamic Item' + '</a></li>');​

关于向 ListView 添加项目的演示

关于我如何使用 kendo-ui-web 的 listtview 链接到将 twitter 数据加载到 web-listview 的演示。由于移动列表视图也有一个数据源属性，这也适用于移动列表视图