Question

我正在尝试使用jQuery附加EJS模板，我不确定我做的是否正确。

视图/形式/间 - form.ejs

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

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

\资产\接头\ JS \定制functions.js

（文档）$。就绪（函数（）{

$('#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">

在找不到文件时失败的替代解决方案（custom-functions.js文件）

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

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

我该如何实现这样的事情？

Answer 1

你想做什么不会工作......

问题是服务器已经呈现模板并将结果发送到客户端。此外，客户端无法访问服务器上的视图文件。

像KnockoutJS这样的Ajax框架可能更接近您所寻找的内容，但还有其他框架。

在这里......我决定让你成为一个小提琴

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

SO也想要代码，所以这里是一个重复

<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>

Answer 2

你在布局中包含了jst.js吗？默认情况下它应该在你使用Sails JS时存在。

sails js：使用jQuery添加EJS模板

2 个答案: