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

【问题标题】：how to bind new kendo datasource to a existing kendo-web-UI listview?如何将新的 kendo 数据源绑定到现有的 kendo-web-UI 列表视图？
【发布时间】：2012-12-03 11:33:27
【问题描述】：

我创建了一个 kendo-datasource 并将其分配给一个 kendo-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>

【问题讨论】：

标签： kendo-ui

【解决方案1】：

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

function searchByTitle() {
    shareDataSource.read();

}

【讨论】：

我刚刚发现了你出错的地方和原因，如果你使用 [parametrMap](docs.kendoui.com/api/framework/…) 将搜索词传递到你的调用中，你应该被排序。
感谢 Bobby_D_，parametrMap 更好。我以这种方式修复了 shareDatasource 。 var 共享数据源； shareDataSource = new kendo.data.DataSource({ transport: { read: { url: function(){ var title = $('#blogTitle').val() || ""; return "api/BlogPosts/?title= " + 标题;} } }, pageSize: 15 });

【解决方案2】：

更新数据源[读取]。但应该使用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
    });

【讨论】：