sails blueprint view iterates over hidden properties of empty object - sails.js

I am new to sails, and trying to output a basic list coming from the find action from the blueprints.
Using an example view from the docs:
<ul>
<% _.each(data, function (project) { %>
<li><%= project.name %></li>
<% }) %>
</ul>
and checking the value of matchingRecords in the node-inspector returns [] (which i expected).
The view however lists 2 items with value undefined, see image below:
If I add data into the model, it iterates over the json returned by the blueprint char by char. I must be doing something wrong, but I am kind of stumped. I originally used Jade, and thought maybe there is something wonky with the template adapter, but as I said, ejs gives me a very similar result.
What I am doing wrong ?

It seems there is a bug in sails at the moment of writing.
An issue has been opened on Github https://github.com/balderdashy/sails/issues/3932

Related

EJS include functions defined in a separate ejs file

I am trying to include an ejs file that contains functions for setting up my views. These functions were defined to be used a helpers. I have tried using:
<% include helpers.ejs %>
But when I try to use the function from this file:
<% module_start('$body', [{name:'display',value:'block'}], 'body'); %>
I get the error:
Reference Error: module_start is not defined
When I copy over the code from 'helpers.ejs' to my original view file, 'test.ejs', it works as expected. I have gone through several answers and,
am still confused what am I doing wrongly in this case.
Thanks for your help in advance.
After some grueling hours of trying every conceived solutions out there, I have landed upon a solution that is working. The solution was borrowed from:
EJS Functions
Looking at the solution presented in this code, I updated my 'helpers.ejs' to 'helpers.js'. Following this, I added the exported functions from 'helpers.js' to the ejs render context object:
const ejs_helpers = require('path/to/helpers.js');
...
ejs.renderFile('filename', { helpers:ejs_helpers, ...}, (err,data)=>{});
In the ejs view file:
<%- helpers.function_name(params); %>
This considerably changes how I initially approached the problem. With plain ejs helper file, the functions include HTML in between the control flow statements. In the case presented here, the functions returns plain string. Notice the '-' with the 'Scriptlet' tag.
Hope this helps someone.

Multiple form inputs for the same field

I have a Rails model called request_form. In the form I have multiple boxes that can be selected, similar to the "What can we craft for you section" in the following site http://mostlyserious.io/get-started/
I have a field called number_of_guests that can be a handful of values depending on which section is clicked. I plan on using javascript to grab the value of the clicked element and assigning it to the request_no_of_guest param. However, in the form I have that same field rendered 5 times to allow for each selection. What is the best way about this? Is there a better way to handle this? I thought about creating a controller method that loops through each instance of that request_no_of_guests param and determining which instance is populated and then sending that up.
Is this the best way to handle this case?
Well as you did not provide any useful detail I will answer as I understood the question.
Let’s have a quick look at what this might look like. To do so, we’ll imagine a demo app into which you can enter the name of a professor and select their various areas of expertise.
Professor has a field expertise which is String.
The form can be as follows:
<%= label_tag 'expertise_physics', 'Physics' %>
<%= check_box_tag 'professor[expertise][]', 'Physics', checked('Physics'), id: 'expertise_physics' %>
<%= label_tag 'expertise_maths', 'Maths' %>
<%= check_box_tag 'professor[expertise][]', 'Maths', checked('Maths'), id: 'expertise_maths' %>
alter app/controllers/professors_controller.rb
from
params.require(:professor).permit(:name, :expertise)
to
params.require(:professor).permit(:name, expertise:[])
Then in app/models/professor.rb
before_save do
self.expertise.gsub!(/[\[\]\"]/, "") if attribute_present?("expertise")
end
and in /app/helpers/professors_helper.rb
def checked(area)
#professor.expertise.nil? ? false : #professor.expertise.match(area)
end
This way you can grab the different values selected in the form into the expertise attribute, however this is not recommended if you are planning to query the selected options. The right way would be create a new model called Expertise and then create the relationship professor has_many expertises.
But if you are looking for something simple, then use the above code.

How to pass a list of image filenames from Docpad to browser client

I want to get a list of filenames from a directory in my Docpad project and then pass them to the client for preloading. What is the best way to do this?
What I have been trying is to extract a list of file names from the directory and then pass them to the client via the document.
So I have a collection, like so in docpad.coffee:
collections:
myImages: ->
#getFilesAtPath({relativeOutDirPath: 'images'})
And then in the footer of my html, I've been trying something like this:
<script>
var images = <%= #getCollection('myImages').toJSON() %>
</script>
This however is not coming even close to working. What I really want to do is have images set to an array of urls pointing to the files. But I can't seem to figure out how this would be done. The Docpad documentation and the Query-Engine documentation are simply to sparse.
Anyone have any ideas? Or is there a totally different way to think about this? Is there a way to hand over a variable directly from the Node/Docpad backend to the client, by passing the need to pass it along with the HTML?
Not sure why you want to separate it as a script (btw if you want you can really put it in a separate script if it is called js.eco). I guess it is just for clear separation.
This is how it will work:
<script>
var images = [];
<%for obj in #getCollection("myImages").toJSON(): %>
images.push('<%= obj.url %>');
<% end %>
console.log(images[0]);
</script>
So you will have an array with url's only. I've put there an info to print out in console first element to show it works.

jQuery+JS computed selector

Sorry for the bad wording of the title, but here's my problem. Suppose I have a list where every item has a class:
<ol>
<li class="chapter">Chapter 1</li>
<li class="chapter">Chapter 2</li>
...
I want to select the item which is corresponding to make the user's current chapter, which is known by javascript, in bold. So if the user is on Chapter 2 I would do something like:
$(".chapter:eq(2)").css("font-weight", "bold");
But I can't do
$(".chapter:eq("+currentChapter+")").css("font-weight", "bold");
as it gives me Uncaught SyntaxError: Unexpected identifier
Any help would be appreciated.
Edit: I'm using a template to insert the variables but I have verified that currentChapter is in fact defined and the number I expect it to be.
function fetchContent(startSlide) {ldelim}
var chapterSize = {$chapterSize};
var currentChapter = {$chapter};
var chapterName = "{$chapterName}";
alert(typeof(currentChapter)); // number
alert(currentChapter); //e.g. 3 works
alert(currentChapter + "aaa"); //e.g. 3aaa
$(".chapter:eq("+currentChapter+")").css("font-weight", "bold"); // doesn't work
Try a different approach, fetch all elements and then select only the one you want (I know it's best to select your element right in the selector, but just to try it out).
$(".chapter").eq(currentChapter).css("font-weight", "bold");
Also, looking at your code, it seems like currentChapter is a local variable inside the fetchContent function. Are you sure you can access that variable when you are calling the jQuery function? Try to check the existence and value of the currentChapter variable right before calling the jQuery function which is causing you problems.
EDIT
From the jQuery documentation jQuery :eq() selector
Because :eq() is a jQuery extension and not part of the CSS
specification, queries using :eq() cannot take advantage of the
performance boost provided by the native DOM querySelectorAll()
method. For better performance in modern browsers, use
$("your-pure-css-selector").eq(index) instead.

Asp MVC 2: Typed Editor Template

(I reference this tutorial in this text)
I want to use the Html.EditorFor (or Html.Editor) helpers.
If a UserControl needs additional data it is passed via
...EditorFor(model => model.Album, new { Artists = Model.Artists, ... })
In the UserControl it's accessed via ViewData[stringKey], ie
... new SelectList(ViewData["Artists"] as IEnumerable, ...
To me this smells a little fishy as I would prefer a strongly typed ViewModel which ensures that specific data is available.
I'm now a little bit stuck as I don't know wheater there's a "typed way" to find or I should accept this way as-is.
How did you solve this issue? Any help appreciated!
Lg
warappa
I would probably change my view model so that I don't need to pass this additional information. You could make for example an album has a collection of artists. Now all tha you will have to do is:
<%: Html.EditorFor(model => model.Album) %>
And in your editor template:
<%: Html.DropDownListFor(x => x.SelectedArtist, new SelectList(Model.Artists)) %>