Kendo UI template variable scope

Question

As per this fiddle...

http://jsfiddle.net/ztn4dvrL/2/

I'm creating a dropdown menu with a template. I'm trying to figure out the context of variables.

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

the source, roles is a field in the viewmodel.

the value, roleId is a field of person, which is a field of the viewmodel.

I was expecting that, to be able to address a variable in the viewmodel, we need something like base.roleId or super.roleId, but that doesn't seems to be the case. If we add a field called roles in the person object, the dropdown now binds to that variable even though nothing has changed in the view. This is very confusing. Is there any explanation for this hidden logic?

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

In the template itself id and name are fields of the person object. Is there a way to address variables in the viewmodel from inside the personTemplate script tag? IE(company)

Answer 1

So from the two fiddles I have provided here is some added explanation:

https://jsfiddle.net/ztn4dvrL/8

So in this version all I am doing is declaring the data field/value items using kendo's data-attribute property declaration. so if you go through the api documentation and see something like

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

each of these properties can be declared using the data-* properties so where you see casing e.g. dataTextField this is split out to data-text-field

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

in this one I am doing what may seem a bit like magic and should be used only when no other solution can be applied.

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

So taking your model we have the following tree:

Root (The One Element to control them all) >> People (Your Array) >> Person (Your Object)

As we are in the template that is binding the Person Object we only know properties that are associated to this item or below. So if we want to provide access to a list of items at a different level ABOVE this item we either have interact with the view model outside of this code or traverse back the tree to get to the appropriate level.

So if we want to access the roles array at the root level of the view model we first need to go to the parent of the person object but this only gets up to the Array of Person so we would have an undefined object. But if we go to the parent of the Array we get back to the root element and this then gives access to everything again.

so:

parent().parent().roles equates 

to:

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

Hopefully that helps explain what I have done. If there is anything missing or you need further expanding I will aim to add more explanation if I can.

Answer 2

You have come across functionality with regard to source binding and associated template that I have also observed but which I have not seen officially documented. You have a source which is bound from your vm. Each item in that source is in turn bound to its individual template rendering. But if you have a binding in the template that is not on the item but is on the vm, the binding will find the property on the vm.

All of which is exactly as you describe. Unfortunately, there is no way to specify where you want the binding to work, on the item or on the parent vm. Kendo first looks on the item, then on the vm. If the same property name is on both, the binding will always be to the item.

So to address variables in the viewmodel from within the template, either make use of this behaviour or have a property on each item in the source which is a direct reference to something on the vm.