sails js: add EJS template using jQuery - express

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>
Add Form
<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>
View results