I'm wondering how to make re-usable html partials with Assemble.
What I would like to do is just simply override front-matter of my new template that references the component I want. See below:
Below is my-list.hbs(references my-list.yml)
---
horiz-list: "<%= my-list %>"
---
{{> horiz-list}}
Below is horiz-list.hbs(references horiz-list.yml)
<ul class="horiz-list">
{{#each horiz-list}}
<li>{{.}}</li>
{{/each}}
</li>
Yml files are just lists of things like bananas, apples, oranges, or whatever.
I thought this would work, but it doesn't.
NOTE: The only thing I have seen about re-usable components so far is a stack-overflow that talked about extending the page using handlebars, but I couldn't find that this morning, and when I read it, it didn't seem like a straight-forward process.
Any help from the community would be much appreciated, given that assemble has some really nice features.
Thanks!
Okay, so... Trying to override data like this won't work, because it has a rigid order to how contexts are put together.
Thankfully, someone has already solved this problem for all of us.
This(below) is what I meant by "extending the page using handlebars"... It basically makes contexts in partials more flexible with data.
https://github.com/albogdano/handlebars-helper-mdpartial
There is also a node package that works with this to put keys for all the partials, and adds even more flexibility.
https://www.npmjs.org/package/assemble-partial-data
Related
I am trying to learn EmberJs, in conjuction with Laravel 4, to create a blog. Things have been going great, stuff hasn't been too difficult yet. But I got into a snag when trying to have a <img/> tag in one of my handlebar templates.
From my understanding to use info from a model in a template you use {{attribute_name}} and like magic, it's there! And so for my tag I was trying something like:
<img src="{{URL::asset('images/posts/')}}#{{id}}.#{{image_extension}}" }}" alt=""/>
Adding the url to images with Laravel and Blade, then on the template, just adding in those last little pieces to make the it all work. But I get this instead:
<img src="http://localhost/blog/images/posts<script id='metamorph-11-start' type='text/x-placeholder'></script>26<script id='metamorph-11-end' type='text/x-placeholder'></script>.<script id='metamorph-12-start' type='text/x-placeholder'></script>jpg<script id='metamorph-12-end' type='text/x-placeholder'></script>" alt="">
Obviously theres script tags in my src tag and this is causing some issues.
Now then, upon much research I discovered {{unbound attribute_name}} and came up with:
<img src="{{URL::asset('images/posts')}}/#{{unbound id}}.#{{unbound image_extension}}" alt=""/>
and while this works on the first blog post I click, it doesn't switch images when I switch posts. So is there a way to make this guy work? I'm running out of ideas! Any information you could shed on this would be great! I really like ember so far and want to get even better! IF there's any more info you need, let em know and I will edit this question! Thanks so much!
EDIT:
Based on the advise from #buruzaemon, I tried
<img src="{{URL::asset('images/posts')}}/#{{bind-attr src=id}}.#{{bind-attr src=image_extension}}" alt="Post image"/>
and it feels like it's on the right path, but not quite there. Any more advice?
Perhaps you should have a look at bind_attr in Ember.js. It will allow you to set the src attribute properly with value that can be set in your controller.
How would I go about doing this? Putting the following code into the
Markdown generator
gives me the desired output
<div style="float: left"><img src="http://ompldr.org/vaDU5NQ/scrotter.png"/>
</div>
I'm trying not to, kid. Don't act so surprised, Your Highness. You weren't
on any mercy mission this time. Several transmissions were beamed to this
ship by Rebel spies. I want to know what happened to the plans they sent
you. Kid, I've flown from one side of this galaxy to the other.
I've seen a lot of strange stuff, but I've never seen anything to make me
believe there's one all-powerful Force controlling everything.
However, adding this code to my README.md file makes it an inline image instead
of floating.
How could I work around this? Is it a Github bug?
I know this thread's old, but for anyone interested, you can use <img align="left" src="img.jpg"> and <img align="right" src="img.jpg"> to float images on GitHub.
I believe it is a security issue with GitHub. My understanding is they strip all HTML attributes such as style with the execption of perhaps href.
I have a list of elements that I pass as an argument into the render method. I have no experience in HTML though and was wondering how I'd print all elements in the list?
I assume that you are using playframework 1.x
if you call render(myElements) from your controller, an myElements is a list of strings, it will look something like this in your view.
...
<ul>
#{list myElements, as:'elem'}
<li>&{elem}</li>
#{/list}
</ul>
...
I will advice you to read the documentation on playframework.org. It is really good and easy to read. You will probably learn a lot. If you want to learn html, I think w3schools.com is a good starting point.
if using play 1.2.x with Groovy templates:
<ul>
#{list items:myList, as:'element'}
<li>${element.name}</li>
#{/list}
</ul>
Is there really any difference between
<form method="post" action="/Controller/Action"></form>
and
#using (Html.BeginForm("Action","Controller")) {}
when none of the other more complex parameters are used?
I know this question sounds really basic, but I am cautious to just use plain HMTL such as the former example.
It renders the same, and it is the same. The one possible advantage to the Razor syntax is that it's compiled, so there's no chance you'll be able to run your code without neglecting to add the </form> tag. I guess, arguably, it's also slightly more readable, especially if the rest of the file is heavy on Razor syntax.
I'm trying to wrap my head around something; maybe someone here can point me in the right direction.
Currently a have a form that has some controls on it like this:
#Html.ListBoxFor(s => s.SomeListSelection1, new MultiSelectList(Model.SomeList1, "Id", "Text"))
<br />
#Html.ListBoxFor(s => s.SomeListSelection2, new MultiSelectList(Model.SomeList2, "Id", "Text"))
<br />
#Html.ListBoxFor(s => s.SomeListSelection3, new MultiSelectList(Model.SomeList3, "Id", "Text"))
<br />
This form appears in many places with some slight variation on which controls are available.
The "slight variation" makes me not just want to do this as a partial view as I will either need to replicate the controls into many slightly varied partials or code the variation logic into the view.
So I think, "I know, I'll use the cool HTML Helper thingy!!"
But, all the HTML helper samples online are very simple html content. So the question is how can I use other HTML helpers inside an HTML helper? Or, if that is the wrong question is there another cleaner alternative to just making this a partial view with a bunch of conditional rendering logic?
Edit:
While the answer did technically answer my question, I had trouble making use of the blog entries for what I was trying to do. I found a better example (for me anyway) here:
ASP.NET MVC 3 Custom HTML Helpers- Best Practices/Uses
Yes, you can.
Helpers can contain arbitrary Razor markup.
In fact, the direct contents of a helper method is a code block, not markup.
For a more in-depth discussion about how helpers work, see my blog.