加载数据源后，如何将 HTML 元素添加到 kendo ui 列表视图中的特定位置？

Question

我正在开发一个应用程序，我正在使用 telerik 平台来构建它。我到了最后一点，我想在其中添加一个 'li' 元素作为第二个元素，以便将 html 放入其中。我不需要此块的数据源，因为它将严格 HTML 并且 CSS 没有数据。

这是我的页面内容：

<div data-role="view" data-layout="main" id="top" data-title="Headlines" data-model="viewModel[0]">
    <ul data-role="listview" data-style="inset" class="newslist" data-template="storyList-template" data-bind="source: newsItems, events: { click: selectHeadline }"></ul>
</div>

这是我的列表模板：

<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>

<script type="text/x-kendo-template" id="storyList-template">
    <a href="\#">
        <div class="storyImg #: id #" style=" background-image: url( #:thumbnail# ); margin-top: 0;">
        </div>
        <div class="blackBox">
            <div class="storyTitle">#: trunc_title #</div>
            <div class="timeStamp">#: list_date #</div>
        </div>                
    </a>
</script>

这是一个模拟数据库：（在我的实际代码中，我从另一个 url 读取它）

{
    "newsItems": [
        {
            "id": 1,
            "trunc_title": "Title for 1",
            "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id placerat nisl. In finibus scelerisque tempor. Nunc eleifend quam risus, lacinia fermentum dui tincidunt gravida. </p>",
            "list_date": "2015-10-31 11:08:00",
            "thumbnail": "http://example.com/image.jpg"
        },
        {
            "id": 2,
            "trunc_title": "Title for 2",
            "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id placerat nisl. In finibus scelerisque tempor. Nunc eleifend quam risus, lacinia fermentum dui tincidunt gravida. </p>",
            "list_date": "2015-10-31 11:08:00",
            "thumbnail": "http://example.com/image.jpg"
        },
        {
            "id": 3,
            "trunc_title": "Title for 3",
            "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id placerat nisl. In finibus scelerisque tempor. Nunc eleifend quam risus, lacinia fermentum dui tincidunt gravida. </p>",
            "list_date": "2015-10-31 11:08:00",
            "thumbnail": "http://example.com/image.jpg"
        },
    ]
}

我想在第一行下面添加一个列表项 "Top Stories"，蓝色背景和社交媒体网站的链接。我尝试 google 它但没有成功，我不知道我是否没有使用正确的术语或什么。任何帮助将不胜感激。这里还有一张图片，可以让我更清楚地了解我想要什么：

感谢您的帮助！

Answer 1

你可以这样做：

$("#listView").kendoListView({
    dataSource: dataSource,
    template: kendo.template($("#template").html()),
    dataBound: function() {
        this.wrapper.children().eq(0).after("<div class='product'>my content</div>");
    }
});

或者，由于您使用的是声明式初始化，请更改您的绑定：

data-bind="source: newsItems, 
           events: { click: selectHeadline, dataBound: onDataBound }"

（其中 onDataBound 将包含与上面相同的代码）。

对于移动列表视图，您需要插入 <li> 元素，例如在视图模型中使用 onDataBound 方法：

var viewModel = new kendo.observable({
  newsItems: new kendo.data.DataSource({
    data: data.AllArticles
  }),
  selectedStory: {},
  selectHeadline: function(e) {
    e.preventDefault();
    var story = e.dataItem;
    story.dateString = story.date.toLocaleDateString();
    viewModel.set("selectedStory", story);
    app.navigate("#detailsPage");
  },
  onDataBound: function (e) {
    console.log(e.sender)
    e.sender.element.children().eq(1).after('<li class=\'product\'>my content</li>');
  } 
});

被视图使用：

<ul id ="homeList" 
 data-role="listview" data-style="inset" class="newslist" 
 data-template="storyList-template" 
 data-bind="source: newsItems, events:{click: selectHeadline, dataBound: onDataBound}">
</ul>

(demo)

加载数据源后，如何将 HTML 元素添加到 kendo ui 列表视图中的特定位置？

How do I add an HTML element to a specific location in listview of kendo ui after the datasource has been loaded?

jquery

kendo-ui

kendo-mobile