Javascript 如何在telerik kendo移动应用程序中设置刷新数据源的按钮？

我正在尝试在我的应用程序的顶部条带上创建一个刷新按钮，如果不使用“拉到刷新”的方式，我就找不到任何关于如何操作的好信息。下面是我在这里的一个示例应用程序： 以下是一些示例代码：

HTML

JS

var数据={
“所有文章”：[{“id”：1，“trunc_title”：“title for 1”，“content”：“Lorem ipsum door sit amet，Concertetur adipiscing elite.Nullam id placerat nisl.In finibus scelerisque temporal.nuc eleifend quam risus，lacinia freenum dui tincidut previda.
，“列表日期”：“2015-10-31 11:08:00”，“缩略图”：”http://placehold.it/640x360}，{“id”：2，“2的标题”，“内容”：“Lorem ipsum Door sit amet，Concertetur Adipising Elite.Nullam id placerat nisl.In finibus scelerisque Temporal.Nunc eleifend quam risus，lacinia fermentum dui Tincident gravida.
，“列表日期”：“2015-10-31 11:08:00”，“缩略图”：http://placehold.it/640x360}，{“id”：3，“trunc_title”：标题为3，“内容”：“Lorem ipsum dolor sit amet，Concertetur adipiscing elite.Nullam id placerat nisl.In finibus scelerisque temporal.Nunc eleifend quam risus，lacinia breatum dui tincidut previda.
”，“列表日期”：“2015-10-31 11:08:00”，“缩略图”：”http://placehold.it/640x360}，{“id”：4，“trunc_title”：“1的标题”，“内容”：Lorem ipsum dolor sit amet，是一位杰出的建筑设计师。在临时修女权杖中，怀孕期间发酵的拉契尼亚酒中，未标明日期：“2015-10-31 11:08:00”，“缩略图”：http://placehold.it/640x360}，{“id”：5，“trunc_title”：“2的标题”，“内容”：Lorem ipsum dolor sit amet，是一位杰出的建筑设计师。在临时修女权杖中，怀孕期间发酵的拉契尼亚酒中，未标明日期：“2015-10-31 11:08:00”，“缩略图”：http://placehold.it/640x360}，{“id”：6，“trunc_title”：“3的标题”，“内容”：Lorem ipsum dolor sit amet，是一位杰出的建筑设计师。在临时修女权杖中，怀孕期间发酵的拉契尼亚酒中，未标明日期：“2015-10-31 11:08:00”，“缩略图”：http://placehold.it/640x360"}]
};
/*
我从一个外部站点中提取它，如下所示：
viewModel[i]=新剑道。可观察({
新闻项目：新建kendo.data.DataSource({
运输：{
阅读：{
url:serviceURL，
数据类型：“jsonp”
}
},
模式：{
数据：“员额”
}
})
}
});
*/
var viewModel=新剑道。可观察({
新闻项目：新建kendo.data.DataSource({
数据：data.AllArticles
}),
selectedStory:{}，
选择标题：功能（e）{
e、 预防默认值（）；
var story=e.dataItem；
story.dateString=story.date.toLocaleDateString（）；
viewModel.set（“selectedStory”，story）；
应用程序导航（“详细信息页”）；
}
});
var app=new kendo.mobile.Application（document.body，{skin:'flat}）；

---

我正在从另一个站点提取数据。我刚刚创建了模拟数据，以便您可以查看示例。任何帮助都将不胜感激。

您应该能够添加一个按钮，比如标题或类似的按钮，用于调用viewmodel上的函数。如果viewmodel绑定到远程json源，则只需调用.read（）在数据源上重新获取数据会导致它重新获取数据。如果手动获取数据，则需要手动重新获取数据，然后在数据源上调用.read（）

下面是一个快速示例，它使用一个方法将一个项添加到源中（假装有一个新的数据项），然后在数据源上调用read

---

我就是这样做的。我看不出它是否有效，因为y还没有发布新文章，但我没有收到任何错误消息$（“#刷新”）。在（“单击”，function（）{console.log（“working”）；viewModel.neswItems.read（）；}）；

<div data-role="view" id="home" data-title="Headlines" data-model="viewModel">
    <ul id ="homeList" data-role="listview" data-style="inset" class="newslist" data-template="storyList-template" 
        data-bind="source: newsItems, 
                   events: { 
                       click: selectHeadline}">
    </ul>
</div>
<div data-role="view" id="crime" data-title="Headlines" data-model="viewModel">
    <ul data-role="listview" data-style="inset" class="newslist" data-template="storyList-template" data-bind="source: newsItems, events: { click: selectHeadline }"></ul>
</div>

  <script type="text/x-kendo-template" id="storyList-template">
        <a href="\\#">
            <div class="storyImg" id="#: 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>

var data = {
        "AllArticles": [{ "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://placehold.it/640x360"},{"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://placehold.it/640x360" }, { "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://placehold.it/640x360"},{ "id": 4,"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://placehold.it/640x360"},{"id": 5,"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://placehold.it/640x360" }, { "id": 6, "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://placehold.it/640x360"}]
    };

/*

I am pulling it from an external site like this:

viewModel[i] = new kendo.observable({
            newsItems: new kendo.data.DataSource({
                transport: {
                    read: {
                        url: serviceURL,
                        dataType: "jsonp"
                    }
                },
                schema: {
                    data: "posts"
                }
            })
            }
        });


*/
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");
  }
});

var app = new kendo.mobile.Application(document.body, {skin: 'flat'});