I understand the general concept of assetic, which makes sense for site-wide script resources, but what about the javascript that is specific to one page or controller? How do you structure those, where would one keep them, and then how would they be added to the templates?
Typically what I do is create a 'controllers' folder inside my Resources\public\js folder and then create a file with the same name as the controller it's going to be used in. Then all you need to do in your twig template is include the file using the assetic <% javascripts %><% endjavascripts %> tag.
Related
I am trying to create a navbar for my site, and I wonder how to have ejs files automatically have code added from another ejs file. In flask in python it is done on the {% block title%} principle and in another file it is done {% extends 'base.html'%} and then {% block title%} This is title {% endblock%}
Does anyone know if this is possible in javascript?
I am using javascript express and the ejs rendering engine.
I think you need to use include statement, see https://ejs.co/#docs the "includes" part.
You can include (as if import) an ejs template with
<%- include('mifile', {mykey: mydata, mykey2: myotherdata}); %>
The only thing i don't like its the passing parameters explicitly from one template to another, that can be made many times at many levels (an include inside an included template).
I don't know if is there a base/parent template thing like in jinja2 (inheritance), I think not.
I'm working on a 3rd party script which will be loaded into the head of a website. For the project, I use webpack to compile the code and libraries.
I did some research to check if webpack brings in some possibilities but all that I saw is more or less static. Because I need to read some live data, precompiled HTML won't be a choice.
I also checked lodash template function but I couldn't load separate HTML files with variables into another variable.
So to be more clear here is an example of what I want to have (kind of):
HTML sometemplate.html file:
<div>
<%
// repeat items
_.each(items,function(item){
%>
<p><%- item.interests %></p>
<%
});
%>
</div>
And the main js needs such functionality:
let innerHtml = load_as_a_template('./sometemplate.html',items)
let newDomElem = document.createElement('div')
newDomElem.innerHTML = innerHtml
Does someone know a good library capable of loading separate HTML files into a variable and process placeholder variables?
I am currently working on cleaning up a little web app I've written in Mojolicious. As part of that cleanup I am separating out my javascript into the public directory from my html.ep files.
The problem I have though is I don't seem to be able to reference tag helpers any more, like 'url_for' or even referencing values in the stash such as '<% $stashvalue %>'.
Any idea's on how or if I can do this is very much appreciated.
cheers.
The stuff in the public directory is served statically, optimally by your webserver, not by Mojolicious or Plack, so that file does not get processed by Mojolicious, thus <% $stashvalue %> not meaning anything.
A solution would be to embed those parts of javascript that need to access server side variables in the mojo templates - rather ugly, but less code to be written.
Another one would be to make an ajax call from your javascript files, when they are loaded, and get the values sent by the server - more elegant, but more code to be written.
Another one that I can think of, would be to move those javascript files under a folder that gets processed by Mojolicious and include them parameterized - in your html.ep file that needs that js file, do :
<script type="text/javascript" src="http://example.com/url/served/by/mojo/?param1=<% $stashvalue %>¶m2=<% $stashvalue2 %>"></script>
And, in the controller that responds to /url/served/by/mojo/, render that js file, with the params replaced by the ones from the query. As an alternative, you could store/receive those params also on the session
As usually in Perl, there is more than one way to do it.
What I typically do is encapsulate most of my javascript in function calls or objects in pure javascript files. Then in my templates I include those pure javascript files and use the api that I built in those files from the template, interpolating the server-side variables into the arguments of the functions. You can peruse the code for Galileo to see several examples.
For example, see how this template passes stash values to this pure javascript file's functionality.
I have a Rails 3 view (for my_controller#show) which has a lot of JavaScript.
I'd like to move that JavaScript to a separate my_show.js file and then include that file using Rails' javascript_include_tag method. This works if I put my_show.js in the /public/javascripts directory. But I'd prefer to put the file in the same directory with the view with which it's associated.
Is it possible to configure rails such that I can use javascript_include_tag to include files outside /public/javascripts?
My solution right now is to make a partial called _my_show.html.haml. In this file I put my JavaScript code. Then I include the file with render.
I'm wondering if there's a preferred Rails 3 way to do what I want.
JAMMIT!
You could consider creating a route for the js file.
get '/my_controller/show_js.js' => 'my_controller#show_js'
And put your js content in views/my_controller/show_js.js.erb
Now, you should be able to include your js file by:
javascript_include_tag "/my_controller/show_js.js"
The upcoming Rails 3.1 includes the Sprockets gem to provide an Asset Pipeline feature that offers more flexibility in placement of JavaScript and other assets.
One can also use Sprockets independently of Rails 3.1.
I've a .js file in my public/javascript folder, I want to include a dynamicaly generated value in this file.
Is it possible to have a .js file dynamicaly generated, something like public/javascript/my_javascript.js.erb
Thanks
No, not in /public. But you can generate a js file from a standard Rails action, if you like. I wouldn't recommend this, because mixing backend with javascript code is one of the fastest ways to create an unmaintainable and confusing application.
A better solution might be to render a script tag in your layout (above the js includes) to dynamically set a js variable. Then use MY_VAR wherever you need it in the js.
<% javascript_tag do -%>
var MY_VAR = '<%= value_of_my_var || "defaultVal" %>';
<% end -%>
How about a javascript controller as detailed in this railscast:
http://railscasts.com/episodes/88-dynamic-select-menus
Now if you want to only instantiate this dynamic value at runtime then you could cache it or store in an instance variable, depending on where the data's coming from.
You can keep your existing javascript having it by storing the rails variable in a js variable in the dynamic file, as long as page load completed.
Yea don't do it, you are much better off keeping the code static and using rails to generate data, in say the form of a JSON.