Rendering mustache template stored in file - javascript

I'm trying in a Rails app to render some json data through a mustache template.
My starting point was this railscast: http://railscasts.com/episodes/295-sharing-mustache-templates
In the cast Rayn does something like
$('#target').append Mustache.to_html($('#project_template').html(), json-data)
Having in the html a div with id="project_template" that contains the template
<script type="text/html" id="project_template">
...
</script>
However, I'd like to be able to store the mustache template into a file (let's say in app/views/projects/project.mustache) and load it directly in my js.
Something like
$('#target').append Mustache.xxxxx(MUSTACHE_FILE, json-data)
I have looked around but I cannot find anything that works or any suggestion. Is this possible to achieve?
Thanks.

You can't access server-side file in javascript directly, but you can use an alternative way to store template on the server side.
You can store the template in app/views/projects/project.mustache for example.
In your project.mustache, you can write:
<script type="text/html" id="project_template">
...
</script>
In your view, you can use:
<%= render :file => 'projects/project.mustache' %>
And use javascript as same as before.
$('#target').append(Mustache.to_html($('#project_template').html(), json-data));
I think it isn't perfect, but it should work :)

Related

Interpret variable in Javascript file Laravel

I need to include a js file in my views.
But in this js file i need to interpret somes PHP variable.
Actually i do this :
#section('javascript')
<script>
alert("{{{test}}}");
</script>
#stop
But i REALLY need to do this :
#section('javascript')
{!! Html::script('js/test.js') !!}
#stop
test.js :
alert("{{{test}}}");
I need to declare a lot o variable. So my JS file will be very huge. And i don't want to show this directly in the source code.
How can i do ?
Thank you !
You can only pass the variable to the javascript like so:
#section('javascript')
<script>
var test = {{{$test}}};
</script>
#stop
then in your javascript file included at the bottom you can use it:
alert(test);
Let me just mention that this is not a great way of handling the passing variables from php to javascript.
When I need to do something like this, I usually create a meta tag on the page which would contain the alert information.
<meta name="someAlertValue" content="{{{ $test }}}" />
Then you can very easily grab that via jQuery.
var alert_text = $('meta[name=someAlertValue]').attr('content');
I find this approach to be much cleaner and maintainable than trying to drop php variables directly into your javascript.
I had the same problem, and wanted to have a stand alone js which will have bunch of variables taken from config() or even from database, multi-language, and will be configurable, or even will work with query parameters.
Maybe it's a hard way, but i've created a route:
Route::get('/js-modules/test.js',function(){ return view('js-modules.test');})->name('my_js);
So in the view resources/views/js-modules/test.blade.php you can put your js code together with your PHP stuff.
Or you can route it to a controller and have even more background work. it looks a bit slow (in the browser) on the first run , but second request it'll be cashed and retrieved as the regular js file
And now you can link it to any of your pages with
<script src="{{route('my_js')}}"></script>

Alfresco- Pass variable values from js controller to freemarker

can anybody tell me what am I doing wrong?
I want to retrieve all my alfresco sites with this code (this should work):
model.sites = siteService.listSites(null, null, 0); // return type= List<Site>
And now i want to retrieve this list model.sites in my HTML freemarker template like this:
<body> ${sites} </body>
How can I view this sites list. I know i am getting it wrong in my ftl, but can't find a solution how to retrieve it.
You'll need to loop over the sites in your freemarker. Assuming you wanted a list of the site names, with commas between them, then your freemarker would instead want to look something like:
<body>
<#list sites as site>
${site.shortName}<#if site_has_next>,</#if>
</#list>
</body>

How can I get the equivalent of Rails.env.production? in application.js

I basically want to have the environment check done in javascript only, so I don't have to litter my view files with Rails.env.production? checks.
The easiest way to do this I believe is to set a javascript variable to the value of Rails.env and then add a method in application.js to check it. The best place is probably in your layout so in app/views/layouts/my_layout.html.erb something like:
<script type="text/javascript">
var rails_env = '<%= Rails.env %>';
</script>
Which you can then use in your javascript code.
I just learned that putting JS in HTML files is a bad idea for lots of reasons, and one should never need to do so.
So, the best way to solve this would be to do this:
In your view (.erb) file:
<div id="RAILS_ENV_CONSTANT" style="display:none"><%= Rails.env %></div>
At the top of your application.js file:
var RAILS_ENV = $('#RAILS_ENV_CONSTANT').text();
I'm not a fan of introducing a new variable, ie var rails_env = '<%= Rails.env %>' because it pollutes the global namespace. Will all JS files need this variable? Or all JS functions?
I would use something similar to #Magne, but instead of creating a hidden div, I'd just apply it to the body tag:
<body data-rails-env="<%= Rails.env %>">
Or in HAML (You are using HAML, right?!)
%body{ "data-rails-env" => Rails.env }
Then any script can pick it up:
$("body").data("rails-env")
no you cant check in your JS because JS is not serversided. the onliest way is to generate a JS file in relation to the environment nad include it or make an variable from the template

Playframework: Elegant way to pass values to javascript

Does anyone have an elegant solution to pass server values to javascript (that is not inline) in playframework? just like ${x} or &{'x'} inside html
Currently I can think of
<script type="text/javascript">
var x= ${x};
</script>
<script src="/public/javascripts/jsThatUsesX.js" type="text/javascript" ></script>
I'm thinking there is a better solution from play
It's not pretty, but that's the way I always end up doing it.
If the values that you're passing to JavaScript describe something in the DOM, you might consider using HTML 5 data attributes to place that information in the HTML. Then you can retrieve it with getAttribute. e.g. If your page is a blog post and you need to store the post ID you could use
<div class="post" data-post-id="77">
...
</div>
That way the data is separated out from the logic and you don't need to inline any JavaScript. You could also use a hidden form field.
What's wrong with that? I found myself doing things like
<script>
var trades = [${_trades.collect {models.Trade t -> t.price}.join(", ")}];
// ...
</script>
I like it the groovy way ;)

Register/Include javascript within RenderingTemplate

Problem description
Is it possible to register (include) javascript within RenderingTemplate? (RenderingTemplates are used to render list forms or fields)
By using
<SharePoint:RenderingTemplate ID="NewRelatedListItem" runat="server">
<Template>
<span id="part1">
<SharePoint:ScriptLink Name="SPFormFieldAssistant.js" Localizable="false" />
...
</span>
...
</Template>
</SharePoint:RenderingTemplate>
it couldn't be done - it didn't include script at HEAD area, but...:
Source http://img62.imageshack.us/img62/9826/ss20100324092808.png
Is something wrong with my code? Althought script IS at Layouts folder and I checked with Reflector that it uses Layouts folder if Localizable='False'.
I don't want this script to be loaded with every page, but only for forms.
Any ideas on how this could be achieved?
My idea that is not working...
My first idea was to add script programmatically with <% this.Page.ClientScript.RegisterClientScriptInclude("spffa", "/_layouts/SPFormFieldAssistant.js") %>, but it is not working, as that code evaluation is happening in Render method and i read somwhere that you cannot register client scripts within Render method, but usually is done within PreRender method. Pity
My second idea that is still not working
I thought i would create custom UserControl named RegisterClientScript and there within overriden PreRender method i would add scripts i need with client script manager (this.Page.ClientScript...) but, as with SharePoint:ScriptLink, my control also is rendered as text!
my control as text http://img693.imageshack.us/img693/3738/ss20100324115826.png
How do i overcome this and where's the catch?
Looks like you are missing the runat. Try this:
<SharePoint:ScriptLink Name="SPFormFieldAssistant.js" Localizable="false" runat="server" />
It turns out that you can directly add <script> tags to template!
<script src="/_layouts/SPFormFieldAssistant.js" type="text/javascript"></script>
Thank you for the notes however.
Sometime back I had a Similar requirement. For which I have included the script Register in the CreateChildControls method of the Field Control class.

Categories

Resources