Help test the preview release with new upcoming Blaze features (#each-in, #let, @index)

core
1

Hey everyone,

Some of you might have seen this PR I opened a while ago. Good news: it passed a superficial stage of code review and now is ready for testing. Please, try out this preview release with the following features and let us know what you think.

#each in

The new syntax to #each that introduces a new variable to refer to the current object, in comparison to the old syntax, doesn’t change the current data context.

<ul>
  {{#each person in people}}
    <li>{{person.name}}</li>
  {{/each}}
</ul>

#let

#let allows you to introduce new variables-synonyms to other helpers or values in the data context.

<div>
  {{#let name=getFullName age=this.bio.age}}
     {{name}} is {{age}} years old.
  {{/let}}
</div>

@index

The features above made the implementation of @index in #each a lot easier. You can use it like this:

  {{#each person in people}}
    <p>{{person.name}} - {{@index}}</p>
  {{/each}}

How to test the preview release:

You can run Meteor with the --release EACH-IN@0.0.3. That’s it, you can create a new project by running meteor --release EACH-IN@0.0.3 create name-of-your-project or you can upgrade your existing project with meteor --release EACH-IN@0.0.3 update.

Let us know what you think of the new features!

20 Likes
2

Great.
Does it work with WINDOWS-PREVIEW@0.1.7?

3

It’s supposed to work, yes. You can run into dependencies conflict since windows versions were never released officially.

4

nice !
I will test it later
Is this in ‘devel’ ?
maybe we should have a category for pre ? or testingCore ? or something like that!

5

I really like this set of new features, so thank you for that :sunny: I will make sure they work as expected in meteor-jade before the final meteor release.

6

Good work @slava :+1:

7

It is not on devel.

8

This is great, so much needed. :smile:

9

Typo in your post:

  {{#each person in people}}
    <p>{{person.name}} - {{@index}}</p>
  {{/person}}

should be:

{{/each}}
10

thanks, fixed. The syntax highlighting is off and I didn’t notice that :frowning:

P.S. Discourse smileys are terribly picked

11

I found something, which might be an issue or not:

You can use:

		{{#each th_roles}}
  {{> role role=this}}
		{{/each}}

But this leads to an error (until you rename template ‘role’) :

			{{#each role in th_roles}}
  {{> role role=role}}
			{{/each}}
12

Just need a confirmation:

With the #each in syntax, you need to use #with to set the context if you want to access the state of the variable from within an event handler, right?

					{{#each author in authors}}
  {{#with author=author}}
    <button class="clickMe">Click Me</button>
  {{/with}}
					{{/each}}

	'click .clickMe': function(event, template) 		{
  		console.log(this.author.name);
		}
13

In this case it makes sense to me: template names and helpers and variables all share the same namespace. By writing {{> role role=role}} you refer to the closest definition of ‘role’, in this case, a variable defined in #each.

14

Right, this is not the prettiest thing though.

15

This is not pretty, but I prefer it over the old syntax anyway (find it more self-commented).

16

@slava Obviously spacebars is distinct from handlebars - but what was the reasoning behind diverging from the existing Handlebars Syntax- {{#each object as |value index|}} (See Handlebars Source)

17

Thanks for pointing this out! To be honest, I had no idea this is the official Handlebars syntax. I saw it in the Ember “future plans” docs, but not in Handlebars. I was referring to this page: http://handlebarsjs.com/block_helpers.html. Even current Ember implementation implements #each foo in foos, so this is at the very least, surprising.

18

@slava I’ve found handlebars is really poorly documented!

I just end up reading their unit tests to discover syntax.

19

After looking more into this and discussion this internally, here is what we found:

  • Handlebars syntax is not well documented. We consider features described in their documentation to be the “released” and perhaps “official” features.
  • Ember and Handlebars share the same Handlebars parser, although they have different syntax at this point.
  • Handlebars still uses the older syntax of each: #each things that changes the data-context
  • Ember introduced the newer syntax similar to what we propose in this thread: #each thing in things that doesn’t change the data-context.
  • Ember, the new unreleased version, is proposing the newest syntax of #each things |thing index|, which is not really loved by Ember community in their PR. It is not released yet.
  • There is no a word for Handlebars for changing their syntax, but their parser implements all of them as it is needed for Ember.

I like the fact that Spacebars is a familiar syntax to anyone who used Handlebars but the divergence is inevitable, and we can see how Ember and Ractive already diverge.

20

@slava So, what does that mean for #each in?

Also, it does appear in their official documentation (on the page you linked - search for #each users as |user userId| )