RFC#286 - let helper

controllers.application.js

import Ember from 'ember';

const { computed } = Ember;

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  post: Object.freeze({
    title: "Using the let helper",
    content: "Using the let helper is straightforward. You just copy the code samples from the documentation."
  })
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>

<a href="https://github.com/emberjs/rfcs/pull/286">RFC#286</a>

<p>The <code>let</code> receives positional arguments and yields them out in order.</p>

<p>This enables you to refer to values or computations inside the <code>let</code> block by a name of your choosing.</p>

<p>
Below are some examples of how you might use <code>let</code> in your templates.<br>
Take them with a grain of salt, as coming up with examples is hard and they will invariably be constrained.</p>

<p>Thank you and have fun!</p>

<hr>

<h2>Passing a literal value</h2>

{{#let "Ricardo" as |name|}}
  <p>My name is {{name}}.</p>
{{/let}}

<h2>Passing a binding</h2>

{{#let appName as |myAppName|}}
  <p>My app name is {{myAppName}}.</p>
{{/let}}

<h2>Passing a computation</h2>

{{#let (concat "My app" " " appName) as |description|}}
  <p>{{description}}</p>
{{/let}}

<h2>Passing multiple positional arguments</h2>

{{#let
    (concat post.title ' | The Ember.js Blog')
    post.content
    (hash
      theme="high-contrast"
      enableComments=true
    )
    as |title content options|
}}
  {{my-post title=title content=content options=options}}
{{/let}}

<h2>Passing a component</h2>

{{#let
    (component 'my-post' title=(concat post.title ' | The Ember.js Blog') content=post.content)
    (hash
    	theme="dark"
      enableComments=true
    )
    (hash
      theme="responsive"
      enableComments=false
    )
    as |prefilledPost darkTheme mobile|
}}
  {{component prefilledPost options=darkTheme}}
  {{component prefilledPost options=mobile}}
{{/let}}

templates.components.my-post.hbs

<h3>{{title}}</h3>

<p>{{content}}</p>

{{#if options.enableComments}}
  <ul>
    <li>Comment 1, by locks</li>
    <li>Comment 2, by chancancode</li>
  </ul>
{{/if}}

<p>The theme used was "{{options.theme}}"</p>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {
    	"ember-template-block-let-helper": true
    }
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "canary",
    "ember-template-compiler": "canary",
    "ember-testing": "canary"
  }
}