I have an expression in my underscore template like this:
'<%= a %> div <%= b %> is <%= a/b %>'
I would like to limit the number of decimal counts to a specific number. Is it possible in underscore.js?
Expected:
'10 div 3 is 3.33'
but actually I see:
'10 div 3 is 3.333333333'
Just use Number.prototype.toFixed():
<%= a %> div <%= b %> is <%= (a/b).toFixed(2) %>
var tpl, content;
tpl = $('#division-tpl').html();
content = _.template(tpl)({a: 10, b: 3, digits: 2});
$('#content').html(content);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script type="text/template" id="division-tpl">
<%= a %> div <%= b %> is <%= (a/b).toFixed(digits) %>
</script>
<div id="content"></div>
Related
Here I have a requirement to use yield in a partial other than application.html.erb , when I try this in partial it was showing me the blank value and if I try the yield in application.html.erb it was showing the value.
application.html.erb
body>
<div id="main-container">
<%= content_for?(:page_header) ? yield(:page_header) : (render :partial => "/shared/home_header") %>
<div id="middle-container">
<%= yield %>
</div>
<div id="bottom-container">
<%= render "/shared/bottom_partial" %>
</div>
index.html.erb
<% content_for :page_header do %>
<%= render :partial => "/shared/employer_header" %>
<% end %>
<% content_for :page_name do %>
<p>My Account</p>
<% end %>
<div>
xxxxxxxxxxxxxx
xxxxxxxxxxxxxx
</div>
/shared/_employer_header.html.erb
<div class="heading" >
<%= yield(:page_name) %>
</div>
When I am trying like above I am getting blank value in yield :page_name in employer header if I try the yield :page name in application.html.erb I am getting the value.Can any one help me to sort this out.Thank'U'.
Swap the order of your two content_fors so the :page_name is defined before the partial is rendered.
index.html.erb
<% content_for :page_name do %>
<p>My Account</p>
<% end %>
<% content_for :page_header do %>
<%= render :partial => "/shared/employer_header" %>
<% end %>
Need some help in css.
i have an array of products and m displaying it using each loop. I wanna show two products in each row. do you know how to do it? currently i am using 50% width of div so two products will come in div.
Is there any other way?
Here is code:
<div id="product_list" >
<% if #products.size <= 0 %>
<h1/>No products found</h1>
<% else %>
<% #products.each do |p| %>
<div class="products">
<div><%= image_tag p.photos.first.avatar.url(:big) if p.photos.size > 0 %>
</div>
</div>
<% end %>
<% end %>
</div>
div product_list is main div
div products is 50%.
So it displays 2 div under main.
But this behaves weird when filters based on category etc. Is there any good way for this?
You can use
I many times handle such situation like this, try if it works for you.
pseudo code:
<div id="product_list" >
<% if #products.size <= 0 %>
<h1/>No products found</h1>
<% else %>
<ul><li class="products">
<% #products.each do |p| %>
<%= (count%2==0):'</li><li>':''; %>
<div><%= image_tag p.photos.first.avatar.url(:big) if p.photos.size > 0 %>
</div>
<% end %>
</li></ul>
<% end %>
</div>
I have a form that submits correctly without jquery validate, but does not with jquery validate. Using jquery validate, it correctly shows when the field has less than 6 characters, and the error goes away when it is 6+. However, clicking on the button does nothing. The validate script is:
<% content_for :head do %>
<script type="text/javascript">
$(document).ready(function () {
alert("document ready");
$("#new_hotel").validate({
debug: true,
rules: {
"hotel[name]": {required: true, minlength: 6},
}
});
});
My form is this:
<div class="modal-body">
<%= form_for #hotel do |f| %>
<%= f.label :name %>
<%= f.text_field :name%>
<div class="modal-footer">
<a class="btn" data-dismiss="modal" aria-hidden="true">Cancel</a>
<%= f.submit 'Create Hotel' , :class => 'btn btn-primary', :type => 'submit' %>
</div>
<% end %>
I have a partial that contains a header, a subheader and potentially one or more buttons. It is used on many different pages. Often the pages don't need buttons, so I just pass in the header and an optional subheader to the partial. However sometimes the pages need one or more buttons and the only way I've managed to allow for an arbitrary number of buttons to be passed in is using content_for. My partial looks like this:
<% if defined? page_title %>
<header class="pageHeader">
<div class="page-details">
<h3><%= page_title %></h3>
<% if defined? page_subtitle %>
<p><%= page_subtitle %></p>
<% end %>
</div>
<ul class="crud-menu nav-pills">
<%= content_for :page_header_buttons %>
</ul>
</header>
<% end %>
This use of content_for nasty. Is there any way I can pass the list items / buttons into this partial? How else could I deal with this situation?
You could transform this partial into a layout:
<% if defined? page_title %>
<header class="pageHeader">
<div class="page-details">
<h3><%= page_title %></h3>
<% if defined? page_subtitle %>
<p><%= page_subtitle %></p>
<% end %>
</div>
<ul class="crud-menu nav-pills">
<%= yield %>
</ul>
</header>
<% end %>
And you would render it like that:
<%= render layout: "your_partial_above", locals: { page_title: "page title } do %>
<%= render "partial_with_your_buttons" %>
<% end %>
say I'm looping through an array of products, how would I go about assigning a container div within that loop. For instance I want output like so:
<div class="page">
<p>product1</p>
<p>product2</p>
<p>product3</p>
<p>product4</p>
</div>
<div class="page">
<p>product5</p>
<p>product6</p>
<p>product7</p>
<p>product8</p>
</div>
I tried something like this:
<% #products.each_with_index do |product, index| %>
<% if index%4 == 0 %>
<div class="page">
<%end%>
<p><%= product.data %>
<% if index%4 == 0 %>
</div>>
<%end%>
<% end %>
But as expected it will only surround every 4th product with the container. I'm thinking that I'm going to need two loops in order for this to work, but how can I do this without duplicating data?
Edit
When using alternatives to each_with_index is there any way to keep a track of the index using this method? There are also some conditional attributes that get set based on the index value.
For example:
style=<%= index == 0 ? "top:5px;" : ""%>
<% #products.each_slice(4) do |slice| %>
<div class="page">
<% slice.each do |product| %>
<p><%= product.data %></p>
<% end %>
</div>
<% end %>
Another approach:
<% while group = #products.take 4 %>
<div class="page">
<% group.each do |product| %>
<p><%= product.data %></p>
<% end %>
</div>
<% end %>
The Rails method to split an array into groups of equal size is ary.in_groups_of(number)
<% #products.in_groups_of(4, false) do |group| %>
<div class="page">
<% group.each do |product| %>
<p><% product.data %></p>
<% end %>
</div>
<% end %>
Much nicer in Haml :)
- #products.in_groups_of(4, false) do |group|
.page
- group.each do |product|
%p= product.data
You can get the absolute product index with #products.index(product) or the group index with
<% #products.in_groups_of(4, false).each_with_index do |group, group_index| %>
<div class="page">
<% #products.each_with_index do |product, index| %>
<p><% product.data %></p>
<% if index % 4 == 3 %>
</div><div class="page">
<% end %>
<% end %>
</div>
(edit: forgot my end tag!)