CODEWITHSUNDEEP
node.jsejssails.js
klanm
klanm

Reputation: 3258

include ejs-partial into script tag (sails.js)

function and I want to render an EJS-Partial or a Template with the returned data and finally append it to the DOM. I tried it with 

var html = <%- partial('comment') %>"

but this gives me an Error and I tried it with the EJS templates like this

var html = new EJS({url: '/comment.ejs'}).render(comment);

but here I have the problem, that the code doesn't recognize the view folder nor the assets folder where I also tried to copy my partial file into.

Here is the code snippet of my ajax-function

<script>
function postComment(){
   if ($('#inputContent').val() != ''){
       $.post( "/comment/create/", $('#commentForm').serializeArray(), function(comment) {
           //var html = new EJS({url: '/comment.ejs'}).render(comment);
           //var html = "<%- partial('comment') %>";
           $(html).appendTo('.comments').hide().fadeIn(2000);
           $('#inputContent').val('');
        });
   }
}
</script>

has anyone a solution for my problem? thank you very much

Upvotes: 2

Views: 3101

Answers (1)

JohnGalt
JohnGalt

Reputation: 2881

Here's an example that might help to get you where you want to go.

You can put a template in /assets/linker/template directory. The linker directory is created when you create a new sails app using the --linker argument. So, for example, let's say I have a template file called: addUser.ejs with the following code which adds a user to an existing table:

<tr data-id="<%- user.id %>" data-model="user">
        <% if (user.online) { %>
            <td><img src="./images/icon-online.png"></td>
        <% } else { %>
            <td> <img src="./images/icon-offline.png"></td>
        <% } %>
        <td><%= user.id %></td>
        <td><%- user.name %></td>
        <td><%- user.title %></td>
        <td><%- user.email %></td>
        <% if (user.admin) { %>
            <td> <img src="/images/admin.png"></td>
        <% } else { %>
            <td> <img src="/images/pawn.png"></td>
        <% } %> 
        <td><a href="/user/show/<%- user.id %>" class="btn btn-small btn-primary">Show</a></td>
        <td><a href="/user/edit/<%- user.id %>" class="btn btn-small btn-warning">Edit</a></td>
        <td><form action="/user/destroy/<%- user.id %>" method="POST">
            <input type="hidden" name="_method" value="delete"/>
            <input type="submit" class="btn btn-sm btn-danger" value="Delete"/>
            <input type="hidden" class="_csrf" name="_csrf" value="<%- _csrf %>" />
        </form></td>
    </tr>

I can now use that template, in this example, in a separate javascript file contained in /assets/linker/js with the following:

$( 'tr:last' ).after(

  JST['assets/linker/templates/addUser.ejs']( obj )
);

So this take the template and uses obj which I passed in with the template to produce the desired html that gets appended in the dom.

edit

In addition, go into Gruntfile.js around line 80 should be the following:

var templateFilesToInject = [
'linker/**/*.html'
 ];

Change *.html to *.ejs.

Finally, add the underscore.js library to your assets/linker/js directory.

It's also important to have the linker directory structure. I believe the Gruntfile.js are identical whether you use the --linker designation or not, so make a directory off assets called linker with sub directories of js, styles, and templates. Move the existing files under assets/js assets/styles under your new linker directory.

Upvotes: 3

Related Questions