Pass arrays/objects as inline attributes

[russellr922]

Is it possible to pass objects/arrays to partials inline?

For example:

 <!--(bake ../components/my-component.html links="['http://www.google.com', 'http://www.github.com', '#anchor-2']")-->

I'm trying to build hot-swappable components with configurable options without having to rely on a content.json

[david-zacharias]

Hi @russellr86, thank you for your feedback. Currently is only possible to hand in arrays into _foreach-tags. Also the notation differs slightly from your code:

<!--(bake includes/li.html _foreach="name:[mike, drew, steve]")-->

But it is an idea to move the array-parsing from the _foreach handler to a common behavior so we could apply it to inline-assignments in general.

[russellr922]

Thanks for the reply, David. Yeah I was easily able to get it working in a _foreach, however this restricts me from being able to keep my templates and components separate and flexible. In my templates, I simply want to reference the components I want to render. And I want to do this throughout an entire application without having to rely on JSON files for passing simple configuration values.

I think it would be a very nice enhancement as you can already pass string attributes to override json.

[david-zacharias]

Yes, I see the benefits of this. As it won't limit existing usage, I am sure @MathiasPaumgarten have nothing against changing / extending the behavior of bake. If you want you can create a PR if changes are urgent. Otherwise I will add it to my list. I will probably find time within the next 7 days to make the change.

[russellr922]

Thanks David, nothing urgent. By the way this tool has been a life saver so far, thanks so much.

[roboshoes]

Interesting. Do I understand this correctly, that you want to pass the array to the partial as it is, and NOT loop over the array, correct?

We would have to workshop the syntax a bit. Because the way you wrote, we would essentially just pass the string ['http://www.google.com', 'http://www.github.com', '#anchor-2'] which is perfectly legal.

So in other words, there should be some sort of logic that recognizes if a variable passed is a more than just an attribute?

How would you like the value to be handled in the the partial? Something along the those lines:

<a href="{{ links[ 0 ] }}">Linky Link</a>

[david-zacharias]

Funny, I was just thinking about this enhancement and making some tests. One already existing solution is to make use of transforms in the sub-template to break things down:

usage.html

 <!--(bake component.html links="['http://www.google.com', 'http://www.github.com', '#anchor-2']")-->

component.html

<ul>
<!--(bake-start _foreach="link:links | evaluate")-->
  <li>{{link}}</li>
<!--(bake-end)-->
</ul>

options in Gruntfile.js

transforms: {
  evaluate: function( string ) {
    return string.slice(1, -1).split("'").join("").split(","); // just quick hack
  }
}

This solution works without any changes in bake 👍 You can try it out @russellr86

However, I like the idea to make the array parsing of _foreach available to var-definitions in general.

[russellr922]

@MathiasPaumgarten, yeah pretty much, it would just allow you to pass an array, and then do something like a _foreach in the view to loop through the items in the array passed. Or referencing with the index would be nice too if that is an option.

@david-zacharias I'll try that out, thanks

[roboshoes]

Yeah, not opposed to it. However we have to figure out how the syntax differs from sending a string of an array. or an object. Probably drop the " around it. That might open another can of worms though.

Anybody dare to form a PR? 😈

[david-zacharias]

You are right, that change affects more parts of the code as I expected. I have a running version, that keeps all tests green and adds the new features. But the code is not as clean as I want it to be. So I have to think about it for some more time. As I have not much time for code right know it will take some time. To answer your question, I can take care of the PR, but it will take time.