Здраствуйте! Имеется следующая проблема - есть отдельный html-файл с таблицей, которую нужно отрендерить на главной странице (для подключения использую require.js)
Есть данные, полученные с помощью метода fetch(). Проблема состоит в том, что переменные не рендерятся на странице... Если я заключаю их в тег script - вообще пропадает таблица...
Вот мой код.Что я делаю неправильно?
define([
"underscore",
"backbone",
"jquery",
"pages/RestaurantPage/collections/UsersCollection",
"text!pages/RestaurantPage/templates/UsersTable.html"
],
function(_, Backbone, $, UsersCollection, UsersTable) {
return Backbone.View.extend({
el: $('#data_table'),
render: function() {
that = this;
var users = new UsersCollection;
users.fetch({
success: function(users) {
var template = _.template($('#data_table').html(), {
'users': users.toArray()
});
that.$el.html(UsersTable);
}
});
}
});
});
HTML:
<table align="center" border="1" cellpadding="1" cellspacing="1" >
<caption>
All users
</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Last name</th>
<th scope="col">Login</th>
<th scope="col">Email</th>
<th scope="col">Role</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
<th scope="col">
<form id="deleteall" method="post" action="/deleteall" name="deleteall"></form>
<div class="small success btn">
<input type="submit" value="X" form="deleteall" />
</div>
</th>
</tr>
</thead>
<tbody>
<% _.each(users, function(user, key, list) { %>
<tr>
<td><%- user.get('l_name') %></td>
<td><%- user.get('f_name') %></td>
<td><%- user.get('email') %></td>
<td><%- user.get('id_role') %></td>
<% }) %>
<td>
<div class="small success btn">
<a href='/edit_user?id={{usr.id}}'>Edit</a>
</div>
</td>
<td>
<div class="small success btn">
<input type='button' onclick="document.location='/delete_user?id={{usr.id}}'"
value="Delete" />
</div>
</td>
<td><input form="deleteall" name="ch_{{usr.id}}" type="checkbox" value=
"{{usr.id}}" style="align:center;" /></td>
</tr>
</tbody>
</table>
IndexPage:
<!DOCTYPE html>
<head>
<title>Title</title>
</head>
<body>
<div class="row navbar metro" id="nav1"></div>
<div id = "content"></div>
<table id = "data_table"></table>
<link rel="stylesheet" type="text/css"
href="static/css/gumby.css">
<script type=text/javascript data-main="static/js/main.js"src="static/js/libs/requirejs/require.js"></script>
</body>
</html>
Простой
Средний