Kendo UI 模板变量作用域

Question

根据这个 fiddle...

我正在使用模板创建下拉菜单。我正在尝试找出变量的上下文。

<td><select data-bind="source: roles, value: roleId" data-template="selectRoleTemplate"></select></td>

来源，roles 是视图模型中的一个字段。

value，roleId是person的一个字段，是viewmodel的一个字段。

我原以为，为了能够在视图模型中寻址变量，我们需要 base.roleId 或 super.roleId 之类的东西，但事实似乎并非如此。如果我们在 person 对象中添加一个名为 roles 的字段，即使视图中没有任何更改，下拉菜单现在也会绑定到该变量。这非常令人困惑。 这个隐藏的逻辑有什么解释吗？

<script type="text/x-kendo-template" id="selectRoleTemplate">
    <option data-bind="value: id, text: name" />
</script>

在模板本身中，id 和 name 是人员对象的字段。 有没有办法从 personTemplate 脚本标签内寻址视图模型中的变量？即（公司）

Answer 1

您遇到了有关源绑定和相关模板的功能，我也观察到了这些功能，但我没有看到正式记录。你有一个从你的虚拟机绑定的来源。该源中的每个项目依次绑定到其单独的模板呈现。但是，如果您在模板中有一个不在项目上但在虚拟机上的绑定，则该绑定将在虚拟机上找到属性。

一切都和你描述的一模一样。遗憾的是，无法指定您希望绑定在何处工作，是在项目上还是在父虚拟机上。 Kendo 首先查看项目，然后查看虚拟机。如果两者上的属性名称相同，则绑定将始终指向该项目。

因此，要从模板中处理视图模型中的变量，要么使用此行为，要么在源中的每个项目上都有一个属性，这是对 vm 上某些内容的直接引用。

Answer 2

所以我在这里提供的两个小提琴是一些补充说明：

https://jsfiddle.net/ztn4dvrL/8

所以在这个版本中，我所做的就是使用 kendo 的数据属性属性声明来声明 data field/value 项。因此，如果您浏览 api 文档并看到类似

的内容

$('combobox').kendoComboBox({ datasource: data, dataTextField: "Text", dataValueField:"Value"})

这些属性中的每一个都可以使用 data-* 属性来声明，因此在您看到大小写的地方，例如dataTextField 拆分为 data-text-field

https://jsfiddle.net/ztn4dvrL/11/

在这一个中，我正在做的事情看起来有点像魔术，只有在没有其他解决方案可以应用时才应该使用。

<td>
  <select data-bind="source: parent().parent().roles, value: roleId" data-text-field="name" data-value-field="id"></select>
</td>

所以根据你的模型我们有以下 tree:

根（控制所有元素的一个元素）>> 人（你的数组）>> 人（你的对象）

因为我们在绑定 Person Object 的模板中，所以我们只知道与此项或以下项关联的属性。因此，如果我们想提供对不同级别 ABOVE 项目列表的访问权限，我们要么在这段代码之外与视图模型进行交互，要么遍历树以到达适当的水平。

因此，如果我们想访问视图模型 root level 处的角色数组，我们首先需要转到 person 对象的父对象，但这只会到达 Person 数组，所以我们会有一个未定义的对象。但是，如果我们转到数组的父级，我们将返回到根元素，然后可以再次访问所有内容。

所以：

parent().parent().roles equates

至：

{person}.{people array}.{root of viewmodel}.{roles array}

希望这有助于解释我所做的事情。如果有任何遗漏或您需要进一步扩展，我会尽力添加更多解释。

Kendo UI 模板变量作用域

Kendo UI template variable scope

javascript

kendo-ui

kendo-mvvm