Question

我正在尝试在我的应用程序的顶部条带上创建一个刷新按钮，如果不执行“pull-to-refresh”方式，我找不到任何关于如何操作的好信息。以下是我在此处的示例应用：http://jsbin.com/naxolu/3/edit 以下是一些示例代码：

HTML

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

JS

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'});

我从其他网站提取数据。我刚创建了模拟数据，以便您可以看到示例。任何帮助将不胜感激。

Answer 1

您应该能够在视图模型上添加一个按钮，例如标题或其他类似的按钮。如果viewmodel绑定到远程json源，那么只需在dataSource上调用.read（）就会导致它重新获取数据。如果您手动提取数据，则需要手动重新获取数据，然后在dataSource上调用.read（）。

这是一个快速示例，它使用一种方法将项添加到源（假设有新数据项），然后在dataSource上调用read。

http://jsbin.com/kuyoxu/1/edit?js,console,output

如何在我的telerik kendo移动应用程序中放置一个按钮来刷新我的数据源？

1 个答案: