Cannot display variable from controller in erb file - erb

I begin learning ruby and rails this week. So I follow some tutorial in the book I found in my school library.
I get to the point where I have main_controller.rb:
class MainController < ApplicationController
def welcome
#my_var = 5
end
end
and for my welcome.html.erb:
<h1>Welcome to the My Application</h1>
We currently have <%= #my_var %> visitors.
but when i run my server, all i got from localhost:3000/main/welcome is:
Welcome to the My Application We
currently have visitors.
as if the everything in <%= %> was not executed.
and I also try to insert puts 'welcome method is executed' to the main_controller.rb
and it does print the line.
So any help? I thank you in advance,
Fajarmf

Try <%=h #my_var %>

maybe you are rendering the page before you set the instance variables

There has no problem on your code, but when you change the code you need to refresh you browsers.

Related

fixed urls on polymer

I'm working with polymer and I'm testing all in my local environment and all is working as expected, but the problem is when I'll move it into production, where the url shouldn't be the same as in my local. In node.js I can set it via the config.json file and catch it with app.get('config') or something like that, but in polymer I cant get it, and the only chance I have is to create another endpoint with all the config.json config file, but, and here is the best part, I should hardcode this url in polymer!! (so annoying). There is some way or library or component or something that I'm missing ?
Thanks in advance guys! StackOverflow and the users helped my a lot!
UPDATE
The thing is that I'm using custom elements (because I had handlebars too and there is a little problem with the {{}}) so, in the custom elements that I created I have this (for example in the core-ajax call):
<core-ajax id="login" auto="false" method="POST" contentType="application/json" url="/app/middle/login" ....></core-ajax>
as you can see the url is a little bit hardcoded, I want to use something like this (this is what I have on the node.js endpoint application):
router.post(endpoint.login, function (req, res) {
and I want to got something like that over polymer
<core-ajax id="login" auto="false" method="POST" contentType="application/json" url="{{login}}" ... ></core-ajax>
<script>
Polymer('log-form', {
login: endpoint.login,
ready: function () {
....
})
});
</script>
I'ts more clear now? I'm not so strong on english language.
Thanks Guys, for all!

Where do I put the Angular code in this Mean.js app to make this list sortable?

Following the advice of #Pavlo to use https://github.com/angular-ui/ui-sortable,
I have this repeating list that I want to make sortable.
<div ui-sortable ng-model="regions" class="list-group region-list">
<a data-ng-repeat="region in regions" data-ng-href="#!/regions/{{region._id}}" class="list-group-item">
<h4 class="list-group-item-heading" data-ng-bind="region.name"></h4>
</a>
</div>
Following the advice of #nrodic and added 'ui.sortable' to config.js.
var applicationModuleVendorDependencies = ['ngResource', 'ngCookies', 'ngAnimate', 'ngTouch', 'ngSanitize', 'ui.router', 'ui.bootstrap', 'ui.utils', 'ui.sortable'];
However, when I add that I get the following message:
"ui.sortable: jQuery should be included before AngularJS!"
Any further help is appreciated.
Thank you.
The answer depends on your application's modules. To register dependency in main module you can edit public/config.js and add 'ui.sortable' to existing list:
var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate',
'ui.router', 'ui.bootstrap', 'ui.utils', 'ui.sortable'];
If you are registering your own module and want to enable ui.sortable there, then look for file public/modules/<my-module>/*module.js and add dependency there:
ApplicationConfiguration.registerModule('<my-module>', ['ui.sortable']);
Hope this helps.
I had the exact same problem. Try these steps:
bower install jquery --save
add 'public/lib/jquery/dist/jquery.min.js',
'public/lib/jquery-ui/jquery-ui.min.js,
in front of angular.js in config\env\all.js
add 'ui.sortable' in applicationModuleVendorDependencies located in public/config.js
Following these steps should fix the problem.

Call javascript functions on another file from an EJS templates in Harp.js

Trying to make a website with Harp.js here. I use ejs templates, and want to store some useful javascript functions in a central file. How do I do that? I tried to use
<% include _render_util.js %>
But it does not work (seems like js file is not parsed).
Any ideas?
Thanks!
Although there are ways of making this work (sometimes), it's not something that was deliveratly built into Harp.js. Forcing this behaviour often takes time to debug and causes unexpected issues.
Here is a quick experiment I made that works (I didn't throughly test it):
helpers.ejs
I created a say_hello function that takes a name and outputs the string Hello, {name}.
<%
say_hello = function (name) {
return 'Hello, ' + name;
}
%>
index.ejs
I include helpers.ejs (the file mentioned above) in the first line and then use the function in the second line. That outputs <h1>Hello, beautiful</h1>.
<% include helpers.ejs %>
<h1><%= say_hello("beautiful") %></h1>
Example gist: https://gist.github.com/jorgepedret/816c2b3985ad12cef022
There's an open issue on GitHub discussing this issue https://github.com/sintaxi/harp/issues/272
This example is more of a hack than a recommended solution. I've seen cases where it breaks in unexpected ways.

How do I escape EJS template code in node.js to be evaluated on the client side?

I use node.js/ejs on the server side and backbone.js on the client side.
Both server side and client side use the same templating style.
So the problem is, if I put template code meant for the client inside a template it still get's parsed on the server side.
If found out that something like this works:
<%- "<%= done ? 'done' : '' %\>" %>
However, IMHO this uglifies the code in a way which makes the whole point of using templates useless.
How would you approach this?
Is there a way to define blocks of code inside EJS-templates which do not get parsed like a {literal}-tag used in other templating languages?
Update: For now I use backbone's _.templateSettings to use different delimiters on the client side.
Update: Here's a similar solution in a JSP context: Underscore.js Templates Within JSP
The way I have dealt with this is to override the opening and closing tags on node so that the 2 instances of ejs are lookgin for different tags.
On node you can pass in options
{open:'<%',close:'%>'}
In my case I use <% and <# for my two versions. Then in node ejs template I have something like this (where name is from backbone and everyauth obviously from node):
<% if(everyauth.loggedIn) %><h1><#= name #></h1><% } %>
I assume the question could be read as following because it was this thread Google provide me at first link:
“How I can escape EJS template code delimiter tag only for limited items?”
tl;dr:
Use <%# %> to break the original parsing code (e.g. <<%# %>%= done ? 'done' : '' %<%# %>> will done the following unparsed code <%= done ? 'done' : '' %>)
Long explanation
Imagine a case I decide to change % by ? using { delimiter: '?' } option (that could be the case here, because we want not to use the same has Backbone.js).
Great, that solves your problem. Imagine now later, for some reason, you use your templating system to generate an XML. This XML will start with <?xml version="1.0" encoding="UTF-8"?>.
You will facing the same issue again. What do? You will change the delimiter again? And after that, you will change again? etc. No, for punctual escaping, what we should is just to be capable to say “Not parse this part of the document as EJS”.
So a trick is to avoid EJS understand it's an EJS delimiter parser. So avoid it (in our current case) parse <? (or <% in an original case).
So by simply adding <?# ?> to break the parsing, you will add nothing (the # item is for EJS comment) and you will avoid parser to understand <<?# ?>?xml version="1.0" encoding="UTF-8"?<?# ?>>. The output will be <?xml version="1.0" encoding="UTF-8"?>
Conclusion
In a punctual necessity to avoid EJS parsing, you can just trick the parser to produce the output you need by using <%# %> as a delimiter tag breaker.
For sure, probably in your case, you can just use the marked answer because you will use the EJS tag in a lot of cases.
Well, the way that I currently approach this is to use require.js with the text plugin; this allows me to include the templates using AJAX during development time and have them all compiled into an optimized/minified single file bundle during deploy time.
Of course, if you don't use require.js for dependency management of the rest of your JS code this doesn't work nearly as well, but I can't stand to do javascript dev without require.js anymore now that I'm used to it anyway.
Alternately, there may be other similar technologies that you could use to solve the same problem.
I use backbone.layout.manager on both the client and server side, because I want my templates to be exactly the same.
The way I solved the template delimiter issue was to render the page on the server side, then inject the raw backbone templates.
With new ejs you can add a custom delimiter at client side :
https://github.com/mde/ejs#custom-delimiters
eg :
Custom delimiters can be applied on a per-template basis, or globally:
var ejs = require('ejs'),
users = ['geddy', 'neil', 'alex'];
// Just one template
ejs.render('<?= users.join(" | "); ?>', {users: users}, {delimiter: '?'});
// => 'geddy | neil | alex'
// Or globally
ejs.delimiter = '$';
ejs.render('<$= users.join(" | "); $>', {users: users});
// => 'geddy | neil | alex'

Question on using mustache partials with couchapp and evently

I have been evaluating couchdb for a project and am using couchapp to develop the prototype. So far all I can only say it that it is an awesome tool. I have however run across a problem (which is surely caused by ignorance of the tool) that I cannot seem to get mustache partials to work and the reason for that I believe is that evently can't find the definitions of the partials I am using.
example out of a message queue evently template (evently/queues/_change/mustache.html)
<div class="queue">{{>queue_info}}</div>
...
and I have a queue_info.html with something like
<h2>{{name}}</h2>
where do I place the "queue_info.html" so that evently would find it and insert it properly? If I put it in the same directory as mustache.html it doesn't work.
Best regards,
Vukasin
ok i have figured this out so I am writing to help anyone who might run into the same issue in the future:
if you have data:
{ "queue_info": { "name": "queuename", "owner": "user1" }, "messages": [...] }
and you want to render the "queue_info" part using a partial you will need to create the partial called "queue_info" (it is important that the partial is called the same as the field) and place it in a file "queue_info.html" located in the subdirectory "partials" of the evently directory you are working in).
so we have evently/queues/_change/mustache.html
<div class="queue">
{{>queue_info}}
{{#messages}}
<div class="message">
author: {{author}}
message: {{text}}
</div>
{{/messages}}
</div>
and evently/queues/_change/partials/queue_info.html
Queue: {{name}}
Owner: {{owner}}
when we push this couchapp to the server we get a result which cascades as expected.
Hope this helps someone :-)

Resources