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.
Related
I have laravel template.blade.php
<div class="classone">
<div class="classtwo">
text
</div>
<div class="classtwo">
text
</div>
</div>
And I would like to display the code to the user as it is. Incluing new line and indents.
I was playing around with {!! !!}, nl2br(view()->render() even Blade::compileString but was unable to find an elegant solution. Everytime I was able to make it work it was difficult to maintain and every small change to the displayed code was laber intense.
I would like to ask for a suggeston how to display more complex html/css/js code to user. I though it will be fairy often topic but was unable to find anything which would help me.
Thank you in advance.
I tried some things out. They may seem a little bit 'hacky' but I think they will suit your purpose. I used a freshly created Laravel 8 application as an example.
<pre>{{ file_get_contents( resource_path('views/welcome.blade.php')) }}</pre>
You can use the Blade facade to compile your blade file to plain php if you want:
<pre>{{ Blade::compileString(file_get_contents( resource_path('views/app.blade.php'))) }}</pre>
I put <pre></pre> tags around the output to show line breaks. It makes the code more readable.
I have a regular view in my views folder with the model= set etc. I am displaying fields with no issues. I just just need to compose a link and to complete this, all I need is the current record ID then hopefully I can do something as simple as this:
Report
Unfortunately the views documentation only tells me how to use fields which is not compatible with what I need.
My understanding is that any regular view is a QWeb view thats really in a <template> tag, so according to this QWeb documentation I tried this:
<a href="/rpt/the-report-for-widget?id=t-esc="id"'>Report</a> and
<a t-attrf-href="/rpt/the-report-for-widget?id=#{id}'>Report</a> and
<a t-attrf-href="/rpt/the-report-for-widget?id=#{model.id}'>Report</a> and
<a t-attrf-href="/rpt/the-report-for-widget?id=#{record.id}'>Report</a>
and about a dozen other things and nothing seems to work.
(just so you don't ask, yes I am updating the module before checking the result in the view)
I would prefer not to use t-attf-href when I could simply use href. A pointer to specific documentation would be great.
you can try this.
<a t-attrf-href="/rpt/the-report-for-widget?id={{id}}'>Report</a>
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
I'm trying to use ember animated outlet (found here) and, I can not for the life of me get it to work, I understand that instead of using {{outlet}} I need to use {{animated-outlet}} and use {{link-to-aniamted}} instead but it seems to be switching like normal. I also know that I need to include the js after the ember.js and also I am including the css file it comes with, so I'm kind of stumped on this. :(
For my basic view, I'm using
<script type="text/x-handlebars" data-template-name="application">
<div class='wrapper'>
#include('includes.globals.header')
<div class='content row' id='content'>
{{animated-outlet}}
</div>
#include('includes.globals.footer')
#include('includes.js.navigation')
</div>
</script>
and my link looks like:
{{#link-to-animated 'index' animations="main:slideLeft"}} Home #{{/link-to-animated}}
So, is there something i'm missing? Do I need to add something in my app.js? IF you need more code or info, just ask and I will edit this question! Thanks a lot in advance! I'm new to ember, so please take it easy!
You need to specify 'name' in the animated-outlet helper.
{{animated-outlet name="main"}}
The readme explains it: https://github.com/billysbilling/ember-animated-outlet/blob/master/README.md#use-animated-outlet-instead-of-outlet
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.