distro for download or instructions for use

[sdhull]

I'd love to try this out, but am somewhat intimidated by how to go about getting it into my project. My current guess (which I'm about to embark on trying) is to clone the repo, bundle and build the distribution js file.

I tried a (admittedly lazy) approach of just copying the body of packages/group-helper/lib/main.js into a helper in my app but that produced some weird results.

So this request is to provide a distribution and/or instructions for how to go about pulling this into a project.

[sdhull]

Hmmm.. After building the distro, I see my lazy approach was valid.

In that case, this helper isn't working for me. It's actually completely defeating my #each. It seems to output metamorphs instead of the content the #each should generate. And the behavior seems to be dependent on how far away the #group call is from the #each.

So. For instance, this:

<ul class="slides panel" data-orbit>
  <li>
    <div>
      <h2>Words</h2>
      <span class="tagline">we.got.words</span>
      <a class="button">Join Today!</a>
    </div>
  </li>
  {{#group}}
    {{#each}}
      <li>
        <h1 class="word">{{this.name}}</h1>
        <div class="description">{{this.description}}</div>
      </li>
    {{/each}}
  {{/group}}
</ul>

Generates the following:

<script id="metamorph-2-start" type="text/x-placeholder"></script>
<script id="metamorph-0-start" type="text/x-placeholder"></script>
<ul class="slides panel" data-orbit="">
  <li>
  <div>
    <h2>Words</h2>
    <span class="tagline">we.got.words</span>
    <a class="button">Join Today!</a>
  </div>
  </li>
  <script id="metamorph-3-start" type="text/x-placeholder"></script>
  <script id="metamorph-3-end" type="text/x-placeholder"></script>
</ul>
<script id="metamorph-0-end" type="text/x-placeholder"></script>
<script id="metamorph-2-end" type="text/x-placeholder"></script>

Meanwhile, this:

{{#group}}
  <ul class="slides panel" data-orbit>
    <li>
      <div>
        <h2>Words</h2>
        <span class="tagline">we.got.words</span>
        <a class="button">Join Today!</a>
      </div>
    </li>
    {{#each}}
      <li>
        <h1 class="word">{{this.name}}</h1>
        <div class="description">{{this.description}}</div>
      </li>
    {{/each}}
  </ul>
{{/group}}

Generates this:

<script id="metamorph-2-start" type="text/x-placeholder"></script>
<script id="metamorph-0-start" type="text/x-placeholder"></script>
<script id="metamorph-3-start" type="text/x-placeholder"></script>
<ul class="slides panel" data-orbit="">
  <li>
  <div>
    <h2>Words</h2>
    <span class="tagline">we.got.words</span>
    <a class="button">Join Today!</a>
  </div>
  </li>

</ul>
<script id="metamorph-3-end" type="text/x-placeholder"></script>
<script id="metamorph-0-end" type="text/x-placeholder"></script>
<script id="metamorph-2-end" type="text/x-placeholder"></script>

Finally, just as a sanity check, without the #group helper, I get this:

<script id="metamorph-2-start" type="text/x-placeholder"></script>
<script id="metamorph-0-start" type="text/x-placeholder"></script>
<ul class="slides panel" data-orbit="">
  <li>
  <div>
    <h2>Words</h2>
    <span class="tagline">we.got.words</span>
    <a class="button">Join Today!</a>
  </div>
  </li>
  <script id="metamorph-5-start" type="text/x-placeholder"></script>
<script id="metamorph-3-start" type="text/x-placeholder"></script>
  <li>
  <h1 class="word"><script id="metamorph-6-start" type="text/x-placeholder"></script>Thangs<script id="metamorph-6-end" type="text/x-placeholder"></script></h1>
  <div class="description"><script id="metamorph-7-start" type="text/x-placeholder"></script>Stuff and whatnot<script id="metamorph-7-end" type="text/x-placeholder"></script></div>
  </li>
  <script id="metamorph-3-end" type="text/x-placeholder"></script><script id="metamorph-4-start" type="text/x-placeholder"></script>
  <li>
  <h1 class="word"><script id="metamorph-8-start" type="text/x-placeholder"></script>Wybrids<script id="metamorph-8-end" type="text/x-placeholder"></script></h1>
  <div class="description"><script id="metamorph-9-start" type="text/x-placeholder"></script>Words combined with other words resulting in something combotacular!<script id="metamorph-9-end" type="text/x-placeholder"></script></div>
  </li>
  <script id="metamorph-4-end" type="text/x-placeholder"></script>
  <script id="metamorph-5-end" type="text/x-placeholder"></script>
</ul>
<script id="metamorph-0-end" type="text/x-placeholder"></script>
<script id="metamorph-2-end" type="text/x-placeholder"></script>

Edit: wow that's a metamorph or two, eh? :wink:

[sarus]

:+1: on a little guidance on getting this into a project easier. I'm wondering though if this helper will be made obsolete by the new HTMLBars and that's why there hasn't been much movement on it? It seems too useful otherwise.

[sarus]

@sdhull I think I had the same issue as you when using the {{#each}} helper. I just explicitly provided the model and it worked. See my issue here #6

{{#each model}}
<!-- your html -->
{{/each}}

[sdhull]

@sarus yeah I've read many times that htmlbars is going to produce unicorn kitties, however I've also never seen any reasonable eta for when it will be ready for primetime (ok recent googling says "sometime in 2014" -- I'm not holding my breath).

In the meantime this project will remain useful. I'll try what you suggested -- thanks for the tip.