sails js: add EJS template using jQuery

Question

I am trying append EJS templates using jQuery, I am not sure if what I am doing is right.

views/form/room-form.ejs

<form>
...
    <div class="add_room_inputs">
        <%- include partials/add_room %>
    </div>

    <div id="NewAddRoomForm">
        <p>Add new form</p>
    </div>
...
</form>

\assets\linker\js\custom-functions.js

$(document).ready(function(){

$('#NewAddRoomForm').click(function() {
    $('.add_room_inputs').append('<%- include /assets/linker/templates/add-room-input.ejs %>');
});

}

/assets/linker/templates/room-input.ejs

<input name="rooms[]" class="form-control" placeholder="Room Name" type="text">

alternative solution (custom-functions.js file) which fails on file not found

 var html = new EJS({url: '/assets/linker/templates/add-room-input.ejs.ejs'}).render();

 $('#NewAddRoomForm').click(function() {
    $('.add_room_inputs').append(html);
 });

How can I implement such thing?

Answer 1

Did you include jst.js in the layout? by default it should be there as you are using Sails JS.

Answer 2

What you're trying to do wont work...

The problem is that the server has already rendered the template and sent the result to the client. Also the client doesn't have access to the view files on the server.

An Ajax framework like KnockoutJS is probably closer to what you are looking for, but there are others.

Here...I decided to make you a fiddle

http://jsfiddle.net/8D34n/23/

SO wants code too so here is a repaste

<form>
  <h1 data-bind="text: form_title"></h1>
  <a href="javascript:void(0)" data-bind="click: addForm">Add Form</a>
  <br><br>
  <div id="NewAddRoomForm" data-bind="foreach: form_list">
      <div data-bind="text: 'Form '+($index() + 1)"></div>
      <input data-bind="value: name" /><br>
      <input data-bind="value: age" />
  </div>
  <br><br>
</form>

<a href="javascript:void(0)" data-bind="click: ShowResults">View results</a>