Dust.js: using paths in areas with scope

Question

This question is about using templating dust.js with data paths in subcontexts. I intend to support i18n using a string key map.

The data is as follows:

{i18n : { firstname : "First Name" }, people : [ {"name" : "Moe"}, {"name" : "Curly"} ]} 

In dust, you can use sections to list each person:

 {#people} {name} {/people} 

And you can use the path to access the firstname i18n line:

 {i18n.firstname} 

But the following does not work:

 {#people} {i18n.firstname}: {name} {/people} 

In fact, the documentation specifically states:

To avoid fragile and confusing links, paths never back down the context stack. If you need to deploy a key that is accessible within the parent context, pass the key as a parameter.

So, I'm trying to pass the key as a parameter:

 {#people i18n=i18n} {i18n.firstname}: {name} {/people} 

But that does not work. When I experiment with this on the page

Which makes me think that the above example should work fine.

So what gives? How can I do this job?

Note: The following works:

 {#people firstname=i18n.firstname} {firstname}: {name} {/people} 

But this will not work if you need to access a large number of i18n keys in the user's context.

Answer 1

Paths can be used in keys and sections to indicate where you want dust to look for keys. To understand how and when to use paths, you must first understand how dust searches for keys when there are no paths. You can sit down.

When searching for keys, dust is first scanned in the current context, and then scanned in each parent context until more parents are searched. If the key is not found, Dust does nothing (unless you use Exists or Not There is a section). If Dust finds the key, it stops the search and uses the set value. It's not too alien, is it? That JavaScript is looking for variables in runtimes.

However, instead of looking for the tree toward the root when the path is used, Dust only looks at the children. This is best illustrated by an example.

 JSON: { "i18n": { "firstname": "First Name" }, "name": "My Dust Template", "firstname": "Surprise!", "people": [ { "name": { "firstname": "Moe", "lastname": "Howard" } }, { "name": { "firstname": "Curly", "lastname": "Howard" } } ] } 

And Dust:

 Dust Template: {! Show the name of the template !} {name}{~n} {#people} {! As you noted, the following will not work, because when using a path, Dust only searches deeper into the JSON. The output will be: ": Surprise!" !} {i18n.firstname}: {firstname}{~n} {! To get your i18n string, you need to look up the stack instead of down. This can be done by using a section without a path, as follows. The output will be: "First Name: Moe" "First Name: Curly" !} {#i18n}{firstname}{/i18n}: {name.firstname}{~n} {! Note that we successfully used the path to get the firstname of each of the people. !} {/people} 

[EDIT]: For more information, check out this LinkedIn of Dust wiki page: https://github.com/linkedin/dustjs/wiki/Where-else-does-Dust-search-if-the-value- is-not-defined% 3F-AKA-Dust-Scoping

Answer 2

if this is your template:

 {#people i18n=i18n} {i18n.firstname}: {name} {/people} 

here is what your context stack looks like as it iterates through the 'name' array

 { your original context} i18n -> firstname: "First Name" name -> "Moe" 

what happens when you define a parameter, dust inserts into the context stack all the parameters that you defined. then when it finds the array in your context, the dust pushes onto the stack, one at a time, all the elements in the array.

so now when you define the path context in this section, even if you passed i18n as a parameter, the i18n context is still in the context stack, and when you try to access i18n using a path, for example {i18n.firstname}, dust will not find it, because it must back off to find it, and getPath does not indent. the get method, on the other hand, does the return path, so when you do this:

 {#people firstname=i18n.firstname} {firstname}: {name} {/people} 

it works because it accesses the first in the get method section. I hope you understand what I'm trying to say.

what I would do is define a helper method that accepts such a section:

 {#people} {#i18n}{firstname}{/i18n}: {name}{~n} {/people} 

and define the method in your context (or push it into your global context [defined with makeBase] to make it a global helper) as follows:

 i18n: function(chunk, context, bodies, params){ var trans = context.get(translation); //or whatever name you give to your i18n list chunk.render(bodies.block, context.push(trans)); return chunk; } 

checked this on the dust site and it works. The advantage of this approach is that you can now format your i18n output within a section. Also, it would be nice to define both a helper and an i18n list in your global context, so use makeBase to do this. all the best.