Getting undefine trying to get the ObjectId of a Collection - javascript

i'm making a voting system for a Message Board app using Backbone.
The problem here is that when i try to get the objectId of an object and set it as a "rel" attribute in a certain tag the attribute is set as "undefined" .
<% if(models.length>0) {
_.each(models, function(value, key, list) {%>
<tr>
<td><%= value.attributes.username %></td>
<td><%= value.attributes.message %></td>
<td>
<table>
<tr>
<td><a id="voteUp" class="btn btn-default btn-sm" rel="<%= value.attributes.objectId%> "><img width="30" src="img/appbar.thumbs.up.png"/></a></td>
<td width="30">
+<%= value.attributes.thumbsup %>
</td>
<td>
<a id="voteDown" class="btn btn-default btn-sm" rel=" <%= value.attributes.objectId %> "><img width="30" src="img/appbar.thumbs.down.png"/></a>
</td>
<td width="30">
-<%= value.attributes.thumbsdown %>
</td>
</tr>
</table>
</td>
</tr>
<% });
In my DB on Parse the objectId is show but i only can access to username, message, thumbsup, thumbsdown.
Here is my jsfiddle with my complete home.html and app.js

I think you should debug the backbone/parse collection layer and first determine what TYPE reference you are dealing with??
attributes OR objects at the level of entries in the backbone collection
The answer to that determines how you get backbone to unwrap the individual collection entries.
Note this thread remembering that parse referents can be a little finicky regarding the valueOf(objectId).
If you are getting other field values OK from the target class and the objectId is the only one with bug, then this is definitely the issue.

Related

NodeJS : Href of a table element

Maybe I'm missing out something basic
But for some reason this code is not working :
<tr class="students">
<td><%=it%></td>
<td class="rollNo" href="/documents/getDocs"><%=stud %></td>
<td><%=classroom.studentNames[stud]%></td>
</tr>
The table is getting displayed, but nothing happens on clicking
Please help
<td> elements don't have href attributes. Use an anchor:
<td class="rollNo"><%=stud %></td>

Window and alert object/function not available in Underscore template?

I am trying to access a variable called teams in my Underscore template and is proving to be one of the most difficult things I have ever had to do. But my question right now is - why can't I call alert() or window.alert() inside my template javascript code?
here is the template:
<script id="user-home-main-table-template" type="text/template">
<table class="table">
<thead>
<tr>
<th>Club</th>
<th>Sport</th>
<th>Delete?</th>
</tr>
</thead>
<tbody>
<%
if(teams == null){
alert('teams is null'); //alert is not defined
window.alert('teams is null'); //window is not defined either
var teams = {};
}
for(var i=0; i
<teams.length; i++) { %>
<tr>
<td>
<a class="font-big" href='/users/<%=user._id%>/teams/<%=teams[i]._id%>/teamDashboard'>
<%=teams[i].club %>
</a>
</td>
<td>
<a class="font-big" href='/users/<%=user._id%>/teams/<%=teams[i]._id%>/teamDashboard'>
<%=teams[i].sport %>
</a>
</td>
<td>
<a class="btn btn-warning" onclick=window.userHomeMainTableView.deleteTeam('<%=teams[i]._id%>');>delete</a>
</td>
</tr>
<% } %>
</tbody>
</table>
</script>
for some reason alert() and window.alert() are not available inside this template script. Is there a good reason for this?
Yes, there is a good reason for it.
Your template is executed with the data you pass into it.
From the documentation:
When you evaluate a template function, pass in a data object that has properties corresponding to the template's free variables
var compiled = _.template("hello: <%= name %>");
compiled({name: 'moe'});
=> "hello: moe"
So, when you send your data to the template, it does not contains a window property - nor should it!
If you need to debug the function execution, simply step inside the template execution during runtime. In Chrome, while in debug mode, you can "Step Into" by pressing F11.

Ruby on Rails: error when using unobtrusive JavaScript to update partial

I am using Rails 3.2.13, and I'm trying to update a 'summary' partial after creating a 'child' item.
I have a template and template tasks, and what I am trying to do is update the partial on the 'show' view, which is a summary that indicates how many tasks are allocated to the template. I am doing this in the create.js.erb of the template task.
Here are the contents of _template-summary.html.erb:
<div id="template-summary-details">
<table class="table table-striped">
<tbody>
<tr>
<td><span class="fa fa-th-list"></span> No. of tasks</td>
<td><%= #template.templatetasks.count %></td>
</tr>
<tr>
<td><span class="fa fa-clock-o"></span> Total task days</td>
<td>
<%= #template.templatetasks.sum(:days) %>
</td>
</tr>
<tr>
<td><span class="fa fa-check-square-o"></span> No. of checklists</td>
<td>
<%= #template.templatetasks.count(:checklist_id) %>
</td>
</tr>
</tbody>
</table>
</div>
And here are the contents of create.js.erb:
<% #template = Template.where("id = ?", #templatetask.template_id?) %>
$("#template-summary-details").replaceWith("<%= escape_javascript(render partial: "templates/template-summary", locals: {template: #template}) %>");
<% if #templatetask.parent_id? %>
$('#templatetasks'+<%= #templatetask.parent_id %>).prepend('<%= j render(#templatetask) %>');
<% else %>
$('#templatetasks').prepend('<%= j render(#templatetask) %>');
<% end %>
The problem is that I am getting the following error:
undefined method `where' for ActionView::Template:Class
I have also tried using find but haven't gotten that to work either.
How else would I pass the #template to the partial during the creation of a template task?
You first problem is that you have a name clash between the Rails class ActionView::Template and your Template model class. You can work around that by referring to your model class as ::Template (a top-level Ruby class). e.g.
<% #template = ::Template.where("id = ?", #templatetask.template_id).first %>
But that is just a round about way of doing a primary key lookup which is simpler with find:
<% #template = ::Template.find(#templatetask.template_id) %>
Even easier, if you have already set up a belongs_to association from TemplateTask to Template you could just refer to the related object directly:
<% #template = #templatetask.template %>
That would probably get you a bit further but if you want to make your partials more reusable its might be better to avoid having them refer to instance variables (e.g. #template). Instead the partial should refer to a local template variable that you pass into the render method via the locals hash (which you are already doing).

How to replace an empty selector inside the underscorejs template

I have 2 backbone nested views that render a table of products for a shopping cart.
Every view has its own underscore template. When the cart is empty only the main view will render replacing the empty div with: "cart is empty". Unfortunately the following solution didn't work:
<div class="container">
<div class="twelve columns">
<table class="standard-table">
<thead>
<tr>
<th>Remove</th>
<th>Product code</th>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody class="cart-table-body">
<% if (typeof(product_id)=="undefined") { %>
<tr>
<td>cart is empty</td>
</tr>
<% } %>
</tbody>
</table>
</div>
</div>
The nested template
<td><i class="icon-remove-sign"></i></td>
<td><%= product_id %></td>
<td><%= product_name %></td>
<td><%= price %></td>
<td><%= quantity %></td>
<td><%= price*quantity %></td>
I think, you never pass product_id into the first template, meaning it always shows cart is empty. You should pass there some flag variable like products_length or empty_cart so the template could check if cart is empty.
Also with this approach you need a way to check whether you add first product and in that case replace existing innards of cart-table-body (cart is empty message) with a first added product view element. Then append views of following elements.

How to get only loaded JSON keys and values from jquerymx Model?

I'm trying to write an ejs Template, which shows all key's and values from an javascript MVC Model. According to this this answer, I've tried the following:
Person.findOne({id: 51}, function(person) {
$("#editcustomerform").html('./html/person_2.ejs', person);
});
The ejs looks like this:
<form id="personForm">
<table class="ui-widget-content table">
<thead ><tr>
<th style=" width: 100px">Feld</th>
<th>Inhalt</th>
</tr></thead>
<tbody>
<% $.each(this, function(key, value){ %>
<tr>
<td><%= key %>:</td>
<td><input name="<%= key %>" id="<%= key %>" type="text" size="30" maxlength="30" value="<%= value %>"></td>
</tr>
<% }) %>
</tbody>
</table>
The loaded Data looks like the following:
{"id":51,"name":"Max","age":20}
Everything is working. The problem is, that all attributes like constructor, Class, update, etc. are shown in the form.
I didn't found a function from JavascriptMVC, which gives me only the loaded Json data.
Do I need to parse the attributes id, name and age manually or is there a better way?
Use .hasOwnProperty() to tell whether a property belongs to the object itself or was inherited from Object.

Categories