Integers Being Added to Array - javascript

I'm trying to use an array of objects to simplify maintaining a list of HTML buttons. Here's my code:
<% links = [{url:"https://github.com/drguildo", icon:"github"}, %>
<% {url:"http://www.flickr.com/photos/drguildo/", icon:"flickr"}, %>
<% {url:"http://instagram.com/therac25", icon:"instagram"}, %>
<% {url:"http://www.last.fm/user/drguildo", icon:"lastfm"}] %>
<% for link in links: %>
<img src="/img/icons/<%= link.icon %>.png" />
<% end %>
The problem is the resulting array looks like this:
[object Object],16,[object Object],17,[object Object],18,[object Object]
which messes up the output. Why are the objects interspersed with integers and how can I prevent it?
I'm probably doing this in a very sub-optimal way (I'm new to DocPad, ECO and CoffeeScript) so any suggestions on how to improve my code would be appreciated.

You don't want to be creating an array like this within the template. The point of eco templates it to separate the logic/data from the presentation. Declare the data separately, then use it to render the template.
Like this
eco = require "eco"
fs = require "fs"
template = fs.readFileSync __dirname + "/views/test.html.eco", "utf-8"
console.log eco.render template, links: [
{url:"https://github.com/drguildo", icon:"github"},
{url:"http://www.flickr.com/photos/drguildo/", icon:"flickr"},
{url:"http://instagram.com/therac25", icon:"instagram"},
{url:"http://www.last.fm/user/drguildo", icon:"lastfm"}
]
and then just
<% for link in #links: %>
<img src="/img/icons/<%= link.icon %>.png" />
<% end %>

Related

Pull post image in rails display in div

i've created a JS grid and i'm trying to pull the logo image and display in div data-thumbnail
How do i add the link to pull post images?
<%- model_class = Post -%>
<div class="spacer spacer-big"></div>
<div class="container" style="padding-right:50px;padding-left:50px;">
<div id="grid">
<div class="box">
<div data-thumbnail= "TRYING TO GET POST LOGO HERE" </div>
I inserted this <%=image_tag post.logoimage.url %> between the quotation marks but i'm still getting an error.
Fix
You'll need to do this:
<%= content_tag :div, "", data: { thumbnail: #post.logoimage.url } %>
Here's info on content_tag for you
This should be accompanied with the following controller action:
#app/controllers/your_controller.rb
Class YourController < ApplicationController
def action
#post = Post.first #-> sets the post object
end
end
--
Data
The error you receive is as follows:
undefined local variable or method `post'
This means your view is calling a non-existent object (variable) (post). The solution to this is to make sure that post is set correctly. And to do this, you need to either use the controller (as per Rails' MVC pattern, or set it in the view:
<% post = Post.first %>
<%= content_tag :div, "", data: { thumbnail: #post.logoimage.url } %>
The problem is that <%- model_class = Post -%> defines model_class as a class, not an object of a class. It should be like <%- model_class = Post.first -%> to get an object.
So you should define your post, that you probably meant by first line. It should be:
<% post = Post.first %>
then you can use this post:
<%=image_tag post.logoimage.url%>
So it is already a tag. You can wrap it in any other.

How to load partial into view when a link is clicked?

I have a list of user 'submissions' in my Rails app, and when a user submission is clicked, I would like the full submission to load into the view, without having to go to a new page.
Here's the code for the list of submissions:
<div id="submission-list-container">
<% current_user.submissions.each do |i| %>
<a href='#'>
<div id="post-container">
<%= i.title %>
</div>
</a>
<% end %>
</div>
The partial I have created, <%= render "show", :submission => i %>,, works fine, but I would like the full submission to be loaded into the view (index.html.erb), when that link above is clicked. Is there a good method for doing this? Should I just do something else like an AJAX call in JavaScript? I like these partials because it feels more clean and organized to seperate code.
My partial is pretty simple at the moment:
<%= submission.title %>
<%= dat_markdown(submission.content) %>
You can do this using a TitlePane in the Dojo Toolkit, and probably there's a similar widget with jQueryUI.
I can only speak to the Dojo Toolkit's version
You would do something like:
<div data-dojo-type="dijit/TitlePane" data-dojo-props="href: '/blah', title: '<%= submission.title %>', open: false">
You can include this in your application layout for lite usage of dojo, loaded from a CDN:
<script data-dojo-config="async: true, parseOnLoad: true"></script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script>
The TitlePane is wired up so that when it is expanded, it will autoload the content that is provided to the href parameter.
While this isn't exactly a rails solution directly, it can be used as an alternative.
For a Rails Solution, you can simply use an AJAX call to a controller that renders the partial. You may even be able to hook it up using the
def blah
#submission = Submission.find(...)
respond_to do |format|
format.html # default render
format.js # js behavior
end
end
then a blah.html.erb
<%= render partial: 'submission/submission', object: #submission %>
with the partial
<div id='submission-<%= submission.id %>'>
<div id='submission-<%= submission.id %>-title'><%= link_to(submission.title, 'blah/blah', remote: true) %></div>
<div id='submission-<%= submission.id %>-content'></div>
</div>
and a blah.js.erb
$.get('/submission/content', function(data) { $('#submission-<%= #submission.id %>-content').html(data) } );
and an entry into the submissions_controller with route
def content
#submission = Submission.find(...)
render text: #submission.content
end
This probably isn't an exact solution, but hopefully it'll put you on the right path.

backbone templates: index.jst.eco to index.jst.ejs

Specific question: this code works in a backbone template index.jst.eco, but it doesn't work in index.jst.ejs
<ui>
<% for entry in #entries.models: %>
<li> <%= entry.get('name') %></li>
<% end %>
</ui>
I'd like to know why (i.e. how to fix it for ejs), and, more generally, is there comprehensive documentation for how to write code in ejs templates? I can't find anything that goes into detail. As I've been playing around with ejs and eco, I've noticed the presence or absence of a : or a bracket can make a huge impact but I can't figure out how to know what to use and when.
I'm willing to use jst.eco or jst.ejs depending on which syntax has better documentation.
Just encountered this problem, here's my solution!
<% entries.each(function(entry){%>
<li><%= entry.get('name') %></li>
<% });%>
This is how that eco code would be written in jst.ejs.
<% for (var i = 0; i < entries.length; i++) { %>
<li> <%= entries.models[i].get('name') %></li>
<% } %>
However, I can't get it to work with a for entry in entries.models iterator
From what I've known, jst.eco format is CoffeeScript embedded into jst template, and jst.ejs will only work with JavaScript. That's why in your case it can render this JavaScript iteration:
<% for (var i = 0; i < entries.length; i++) { %>
but not this CoffeeScript interation:
<% for entry in #entries.models: %>

Underscore Templating - Partials (with RequireJS)

I am using the tpl! plugin for RequireJS to import and compile my templates into my application - similar to the text! plugin:
define([
"tpl!../templates/newsfeed.html",
"tpl!../templates/friends.html",
"tpl!../templates/tag.html",
"tpl!../templates/tags.html",
], function (renderNewsfeed, renderFriends, renderTag, renderTags) { … });
This all works great, but I have got to a stage where I would ideally like to use some form of partials.
Currently, if I want to use a template inside a template, I would have to pass the compiled partial to the template I am rendering, like so:
$('body').append(renderTags({
tags: tags,
renderTag: renderTag
}));
Then, In my template:
<section class="tags-list">
<h1 class="h4 hidden">Tags</h1>
<% _.each(tags, function (tag) { %>
<%= renderTag({ tag: tag }) %>
<% }); %>
</section>
If I do not pass the compiled partial onto the template, then it's not going to find it.
My question is, how could I do this better? If the templates I defined as dependencies in my RequireJS definition were available to the variable scope of the templates themselves (globally), then I probably wouldn't have to pass the compiled partial to the template?
Secondly, it would be really nice to have the same kind of dependency definitions that are available to use with RequireJS but for templates:
define([
'tpl!../templates/tag.html'
], function (renderTag) {
// Obviously this can't be straight HTML, but you get the idea
<section class="tags-list">
<h1 class="h4 hidden">Tags</h1>
<% _.each(tags, function (tag) { %>
<%= renderTag({ tag: tag }) %>
<% }); %>
</section>
});
I might be on a completely different planet here. If I am, would somebody please kindly explain how they use templates. Perhaps I need to switch templating engine?
The solution I come up with was to actually use require() inside the template, to fetch the required partials, for example:
<%
require([
"tpl!../templates/partials/tags.html",
"tpl!../templates/partials/spotify-search.html",
"tpl!../templates/partials/popup.html"
], function (renderTags, renderSpotifySearch, renderPopup) { %>
// Template code goes here
// Partial example:
<%= renderTags({ tags: tags }); %>
<%
}); %>

jquery ajax rendering of a new post in ruby on rails

I'm trying to render the creation of a post with jquery ajax but I can't seem to get it to work correctly. It seems to render the post with very strange (I think nonexistent) styling and the flash message appears only after the page is refreshed. The post also get formatted correctly after the page is refreshed.
Here's the javascript:
$("#micropost_form").before('<div id="flash_notice"><%= escape_javascript(flash.delete(:notice))%></div>');
$("#user_info").html("<%= pluralize(current_user.microposts.count, "micropost") %>");
$("#feed_items").prepend(" <%= escape_javascript(render(:partial => #micropost)) %>")
$("#micropost_form")[0].reset();
The body of my application layout:
<body>
<div class="container">
<%= render 'layouts/header' %>
<section class="round">
<div id="flash_notice"><%= render 'shared/flash_messages'%></div>
<%= yield %>
</section>
<%= render 'layouts/footer' %>
<%= debug(params) if Rails.env.development? %>
</div>
</body>
Here's my home page (rendered in the yield of the application layout):
<table class="front" summary="For signed-in users">
<tr>
<td class="main">
<h1 class="micropost">What's happening?</h1>
<%= render 'shared/micropost_form' %>
<%= render 'shared/feed' %>
</td>
<td class="sidebar round">
<%= render 'shared/user_info' %>
<%= render 'shared/stats' %>
</td>
</tr>
</table>
Here's my feed partial:
<% unless #feed_items.empty? %>
<table id="feed_items" class="microposts" summary="User microposts">
<%= render :partial => 'shared/feed_item', :collection => #feed_items %>
</table>
<%= will_paginate #feed_items %>
<% end %>
My flash messages partial:
<% flash.each do |key, value| %>
<div class="<%= key %>"><%= value %></div>
<% end %>
Let me know if there's any other code I should post.
So what am I doing wrong? If you want to look at all the code and run it locally to get a better understanding of what's happening, you can find it here: https://github.com/meltzerj/sample_app
When you're using ajax, you need to use flash.now for flash messages. See docs here. Rails is looking for a page refresh/redirect to push and pop from the flash hash stack, using now will set it immediately, then you can access it as above. You can use flash.now in replace of your regular flash usage in the controller. Something like this is very typical:
if #object.save
flash.now[:notice] = "Object successfully created"
else
...
end
So that will fix your flash issue.
As for the weird content/styling, it's a bit hard to comment without actually seeing the markup. The only thing that looks odd to me is the render :partial => #micropost
I'm not sure if #micropost is just a string, but you'd normally do something like render :partial => 'path/to/partial', :object => #micropost
Again it's almost impossible to say without seeing all the other markup

Categories

Resources