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

Posted 2023-05-07

【中文标题】加载数据源后，如何将 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?

【发布时间】：2015-04-30 17:35:17

【问题描述】：

我正在开发一个使用 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"
        ,
    ]

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

感谢您的帮助！

【参考方案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)

【讨论】：

dataBound 是正确的事件，但请记住，如果您使用服务器分页，它将被多次调用。

如果只想在首页插入，可以有条件地做（检查dataSource.page()）

我把它改成了这样："" 控制台说ListView小部件不支持dataBound

请创建一个演示，它应该可以工作：docs.telerik.com/kendo-ui/api/javascript/mobile/ui/…

抱歉花了点时间，但这是我的演示：jsbin.com/naxolu/2/edit?html,css,js,output