Jquery 加载数据源后，如何在kendo ui的listview中的特定位置添加HTML元素？

我正在使用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读取它）

{
“新闻项目”：[
{
“id”：1，
“trunc_标题”：“1的标题”，
“内容”：“在怀孕期间发酵的葡萄汁中，在临时的最后一根节杖中，不含酒精的葡萄汁。”，
“列表日期”：“2015-10-31 11:08:00”，
“缩略图”：http://example.com/image.jpg"
},
{
“id”：2，
“trunc_标题”：“2的标题”，
“内容”：“在怀孕期间发酵的葡萄汁中，在临时的最后一根节杖中，不含酒精的葡萄汁。”，
“列表日期”：“2015-10-31 11:08:00”，
“缩略图”：http://example.com/image.jpg"
},
{
“id”：3，
“trunc_标题”：“3的标题”，
“内容”：“在怀孕期间发酵的葡萄汁中，在临时的最后一根节杖中，不含酒精的葡萄汁。”，
“列表日期”：“2015-10-31 11:08:00”，
“缩略图”：http://example.com/image.jpg"
},
]
}

我想在第一行下面添加一个列表项，上面写着“热门故事”，背景为蓝色，链接到社交媒体网站。我曾尝试用谷歌搜索它，但没有成功，我不知道我是否使用了正确的术语或什么。任何帮助都将不胜感激。这里还有一张图片，让我更清楚地知道我想要什么：

---

谢谢你的帮助

您可以这样做：

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

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

对于移动列表视图，您可能希望插入

元素，例如，在视图模型中使用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>');
  } 
});

var viewModel=new kendo.observable({
新闻项目：新建kendo.data.DataSource({
数据：data.AllArticles
}),
selectedStory:{}，
选择标题：功能（e）{
e、 预防默认值（）；
var story=e.dataItem；
story.dateString=story.date.toLocaleDateString（）；
viewModel.set（“selectedStory”，story）；
应用程序导航（“详细信息页”）；
},
onDataBound:函数（e）{
console.log（e.sender）
e、 sender.element.children（）；
} 
});

由视图使用：

<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>

---

（）

dataBound是正确的事件，但请记住，如果使用服务器分页，它将被调用不止一次。如果您只想在第一页插入它，可以有条件地执行（检查dataSource.page（））我将其更改为：“

“控制台说ListView Widget不支持该数据绑定创建演示请，它应该可以工作：抱歉，花了一段时间，但这是我的演示：

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>