Question

我创建一个kendo-datasource并将其分配给kendo-listview。它的工作很好。但我为列表视图添加了搜索功能。问题是在搜索之后更新了datasoruce但我的listview没有反映更改。请帮帮我这里的代码是吼叫。感谢

<script type="text/javascript">
var shareDataSource; var title = $('#blogTitle').val() || "";
shareDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "api/BlogPosts/?title=" + title  
        }
    },
    pageSize: 15
});

 $("#listView").kendoListView({
        dataSource: shareDataSource,
        template: kendo.template($("#template").html()),
        autoBind: true
    });

 function searchByTitle() {
    var title = $('#blogTitle').val();
    shareDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "api/BlogPosts/?title=" + title  

            }
        },
        pageSize: 15
    });
    shareDataSource.read();

}</script>     
<div>

      <input type="text" id="blogTitle" size="5" />
      <input type="button" value="Search" onclick="searchByTitle();" />

</div>  <div id="listView"></div> 

 <script type="text/x-kendo-tmpl" id="template">
        <div class="post">
            <div class="post-meta">
                <h2 class="post-title"> <a title="" rel="bookmark" href="">${Title}</a></h2>
                <hr/>
                <p class="post-metadata">November 29, 2012 in <a rel="category tag" title="View all posts in .net" href="">.net</a>,
                <a rel="category tag" title="View all posts in SQL Server R2" href="">SQL Server R2</a> | Tags: <a rel="tag" href="">software</a>,
                <a rel="tag" href="">technology</a> | <a title="" href="">Leave a comment</a></p>
            </div>      <div class="post-content"> ${Content}
        </div>
      </div>

    </script>

Answer 1

Hasib，您已经在顶部定义了kendo数据源，尽量不要在搜索方法中重新创建它。理论上，要更新ListView，您需要调用数据源读取：

function searchByTitle() {
    shareDataSource.read();

}

Answer 2

更新数据源[read]。但应该使用parametrMap。 Bobby_D上面提到了。

//---------------------------------------------------------------------------
     var shareDataSource; 
        shareDataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: function(){ var title = $('#blogTitle').val() || "";
                        return "api/BlogPosts/?title=" + title;} 
                }
            },
            pageSize: 15
        });

//-----------------  better -----------------------------
      var shareDataSource; 
    shareDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url:"api/BlogPosts/",// "api/Blogposts/",//

                data: {

                    title: function () { return ($('#blogTitle').val() || ""); } // sends the value of the input as the title id
                }

    }
    },
    pageSize: 15
    });

如何将新的kendo数据源绑定到现有的kendo-web-UI列表视图？

2 个答案: