Get property data from outer context

Question

I am trying to access the parent data from a nested template.

According to this https://github.com/BorisMoore/jsrender/issues/34, I am trying to do somehing similar but I am getting Error: data.parent is undefined.

In my 'master' template I have the declaration

{{for Rooms  tmpl="#RoomTmpl" layout=true /}}

and in the #RoomTmpl

 <script id="RoomTmpl" type="text/x-jsrender">
     {{:parent.data.Room1Label}}
     {{for #data}}
         {{:RoomName}}
     {{/for}}
 </script>

I tried various combinations but always I get an error

 {{:parent.parent.data.Room1Label}}
 {{:#data.parent.parent.data.Room1Label}}
 {{:#data.parent.data.Room1Label}}
 {{:#data.parent.Room1Label}}

Does anyone knows how to do this?

-- SOLUTION --

the correct synatx is

#parent.parent.data.Room1Label

Answer 1

You want to step up through the views and get the data from a parent view. A view is the result of rendering a template, and so nested block tags, such as {{for...}}...{{/for}} or {{if...}}...{{/if}} will add child views. If you pass an array to a 'for' tag, {{for myArray}}, it will iterate over the data array and it leads to one child view whose data property is the array, and that view will then have collection of child views for each rendered item.

So you need to know that #view is the view, #view.parent is the parent view, #view.parent.data is the parent view's data etc. #foo is short for #view.foo, so #data is the data, #parent the parent view etc.

Now the only issue is to count the number of parents correctly. You can debug into what is going on by adding a method to your data: { ... properties ..., test: function() {debugger;} }. Now add {{:test()}} anywhere in a template for that data item, and step into the compiled temmplate: look at the view, its parents etc.

Another trick. If you set a template variable on any block tag, you can then access it from any nested template. So In your example, you can put

{{for Rooms tmpl="#RoomTmpl" ~label=Room1Label layout=true /}}

and then access it from a nested template as:

{{:~label}}

That way you no longer need to worry about stepping up through the parent views.