如何让KendoListView访问页面上下文变量实现条件筛选？

嘿，我来帮你搞定这个Kendo ListView没法访问页面上下文变量的问题！其实有几种靠谱的方法能实现你要的“只显示满足条件的列表项”需求，我给你一一拆解：

方法一：初始化时直接用页面变量配置DataSource过滤 #

这是最直接的方式，在创建ListView的DataSource时，直接引用页面上的variableFromPageId来设置过滤规则，这样加载出来的就是已经过滤好的数据了。

示例代码：

// 页面上下文的变量
const variableFromPageId = 123;

// 配置ListView的数据源，直接加入过滤条件
const listDataSource = new kendo.data.DataSource({
  data: yourOriginalDataArray, // 你的原始列表数据
  filter: {
    field: "itemId", // 替换成你列表项中用来匹配的字段名
    operator: "eq", // 匹配规则，这里是等于，你可以换成其他比如"contains"
    value: variableFromPageId // 直接引用页面变量
  }
});

// 初始化ListView
$("#yourListView").kendoListView({
  dataSource: listDataSource,
  template: "<div class='list-item'>#: itemName #</div>" // 你的自定义模板
});

方法二：动态更新过滤条件（适合已初始化的ListView） #

如果你的ListView已经初始化好了，之后需要根据页面变量的变化动态过滤，那可以直接获取ListView的DataSource实例，再设置过滤规则：

示例代码：

// 页面变量（可能后续会变化）
let variableFromPageId = 456;

// 获取ListView实例
const listView = $("#yourListView").data("kendoListView");

// 更新过滤条件
listView.dataSource.filter({
  field: "itemId",
  operator: "eq",
  value: variableFromPageId
});

执行这段代码后，ListView会自动重新渲染符合条件的项。

方法三：在模板中直接引用全局页面变量 #

如果你想在模板里做条件判断（而不是提前过滤数据源），可以把variableFromPageId设为全局变量（比如挂载到window上），然后在Kendo模板里直接访问：

首先把页面变量设为全局：

// 把变量挂载到window，让模板能访问到
window.variableFromPageId = 789;

然后修改ListView的模板：

<script type="text/x-kendo-template" id="listTemplate">
  # 这里用window.variableFromPageId来做判断 #
  # if (data.itemId === window.variableFromPageId) { #
    <div class='list-item'>#: itemName #</div>
  # } #
</script>

这种方式要注意，模板里的代码是在Kendo的模板引擎上下文执行的，只有全局变量才能直接访问到。

方法四：通过dataBinding事件注入变量到模板上下文 #

如果你不想用全局变量，可以在ListView的dataBinding事件里，把页面变量注入到每个数据项的上下文里，这样模板就能直接用了：

示例代码：

const variableFromPageId = 101112;

$("#yourListView").kendoListView({
  dataSource: yourDataSource,
  template: $("#listTemplate").html(),
  dataBinding: function(e) {
    // 遍历即将渲染的项，把页面变量注入进去
    e.items.forEach(item => {
      item.pageContextId = variableFromPageId;
    });
  }
});

对应的模板：

<script type="text/x-kendo-template" id="listTemplate">
  # if (data.itemId === data.pageContextId) { #
    <div class='list-item'>#: itemName #</div>
  # } #
</script>

另外你提到data-bind无效的问题，大概率是因为没有正确配置Kendo MVVM的ViewModel。如果想用MVVM方式，得把variableFromPageId放到ViewModel里，再绑定到ListView上，不过相比前面的方法会复杂一点，前面几种方法应该更适合你的场景。

内容的提问来源于stack exchange，提问作者IBot