Question

我正在开发一个应用程序，我正在使用telerik平台来构建它。我到最后一点，我想在其中添加一个＆＃39; li＆＃39;元素作为第二个，以便将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"
        },
    ]
}

我想在第一行下方添加一个列表项，其中包含＆＃34;热门故事＆＃34;蓝色背景和社交媒体网站的链接。我试图谷歌它没有任何成功，我不知道我没有使用正确的术语或什么。任何帮助将非常感激。这里还有一张照片，可以让我更清楚一点：

感谢您的帮助！

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列表视图中的特定位置？

1 个答案: