Question

我正在使用Telerik平台制作应用程序。我已经做了一切，但现在客户想要一个滑块，显示5个不同的新闻文章。我正在尝试使用滚动视图，但它无法正常工作。我得到的只是一个黑色空间，滑块应该是。

这就是我为Html调用的内容：

<div data-role="scrollview" 
        data-model="featured_articles_data" 
        data-template="featured_slider"
        data-content-height="13em">
    </div>

这是我的模板：

<script id="featured_slider" type="text/x-kendo-template">
    <div>
        <a href="\\#">
            <div class="storyImg" style="background-image: url( #= data[0].thumbnail # ); margin-top: 0;"></div>
            <div class="blackBox">
                <div class="storyTitle">#= data[0].trunc_title #</div>
                <div class="timeStamp">#= data[0].article_date #</div>
            </div>
        </a>
    </div>
    <div>
        <a href="\\#">
            <div class="storyImg" style="background-image: url( #= data[1].thumbnail # ); margin-top: 0;"></div>
            <div class="blackBox">
                <div class="storyTitle">#= data[1].trunc_title #</div>
                <div class="timeStamp">#= data[1].article_date #</div>
            </div>
        </a>
    </div>
    <div>
        <a href="\\#">
            <div class="storyImg" style="background-image: url( #= data[2].thumbnail # ); margin-top: 0;"></div>
            <div class="blackBox">
                <div class="storyTitle">#= data[2].trunc_title #</div>
                <div class="timeStamp">#= data[2].article_date #</div>
            </div>
        </a>
    </div>
    <div>
        <a href="\\#">
            <div class="storyImg" style="background-image: url( #= data[3].thumbnail # ); margin-top: 0;"></div>
            <div class="blackBox">
                <div class="storyTitle">#= data[3].trunc_title #</div>
                <div class="timeStamp">#= data[3].article_date #</div>
            </div>
        </a>
    </div>
    <div>
        <a href="\\#">
            <div class="storyImg" style="background-image: url( #= data[4].thumbnail # ); margin-top: 0;"></div>
            <div class="blackBox">
                <div class="storyTitle">#= data[4].trunc_title #</div>
                <div class="timeStamp">#= data[4].article_date #</div>
            </div>
        </a>
    </div>
</script>

这是我为应用程序提取数据源的原因：

featured_articles_data = new kendo.observable({ //featured_articles_data is initialized on the index page
        fNewsItems: new kendo.data.DataSource({
            transport: {
                read: {
                    url: serviceURL,
                    dataType: "jsonp"
                }
            },
            schema: {
                data: "posts"
            }
        }),
        selectedStory: {},
        selectHeadline: function (e) {
            e.preventDefault();
            var story = e.dataItem;
            viewModelStory.set("selectedStory", story);
            var detailsPage = "#detailsPage";
            app.application.navigate(detailsPage.toString());
            app.application.scroller().reset();
        },
        resetScroller: resetScroller
    });
    featured_articles_data.fNewsItems.read();

所选择的标题和选定故事的功能使得当您点击故事时它会提取另一个包含故事内容的页面。我希望幻灯片每5秒旋转一次。

有没有人知道如何使用滚动视图完成此操作，或者滚动视图甚至是我正在寻找的内容？

先谢谢你。

Telerik scrollView无法正常工作

0 个答案: