jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

init

Browse source
This commit is contained in:
Ilya Kantor 2014-10-26 22:10:13 +03:00
parent 06f61d8ce8
commit f301cb744d
2271 changed files with 103162 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
02-ui/05-widgets/04-template-lodash/01-table-template/solution.md Normal file
View file

@ -0,0 +1 @@
[edit src="solution"]Открыть в песочнице[/edit]

1
02-ui/05-widgets/04-template-lodash/01-table-template/solution/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"template-grid","plunk":"WCgkmKdOqsXrrzszbUUJ"}

57
02-ui/05-widgets/04-template-lodash/01-table-template/solution/index.html Executable file
View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid gray;
padding: 2px 5px;
text-align: center;
}
</style>
</head>
<body>
<div id="grid-holder"></div>
<script type="text/template" id="grid-template">
<table>
<thead>
<tr>
<th>Имя</th><th>Возраст</th>
</tr>
</thead>
<tbody>
<% for(var i=0; i<list.length; i++) { %>
<tr><td><%=list[i].name%></td><td><%=list[i].age%></td></tr>
<% } %>
</tbody>
</table>
</script>
<script>
var users = [
{name: "Вася", age: 10},
{name: "Петя", age: 15},
{name: "Женя", age: 20},
{name: "Маша", age: 25},
{name: "Даша", age: 30}
];
$('#grid-holder').html(
_.template( $('#grid-template').html().trim(), {list: users})
);
</script>
</body>
</html>

1
02-ui/05-widgets/04-template-lodash/01-table-template/solution/template-grid/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"template-grid","plunk":"WCgkmKdOqsXrrzszbUUJ"}

57
02-ui/05-widgets/04-template-lodash/01-table-template/solution/template-grid/index.html Executable file
View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid gray;
padding: 2px 5px;
text-align: center;
}
</style>
</head>
<body>
<div id="grid-holder"></div>
<script type="text/template" id="grid-template">
<table>
<thead>
<tr>
<th>Имя</th><th>Возраст</th>
</tr>
</thead>
<tbody>
<% for(var i=0; i<list.length; i++) { %>
<tr><td><%=list[i].name%></td><td><%=list[i].age%></td></tr>
<% } %>
</tbody>
</table>
</script>
<script>
var users = [
{name: "Вася", age: 10},
{name: "Петя", age: 15},
{name: "Женя", age: 20},
{name: "Маша", age: 25},
{name: "Даша", age: 30}
];
$('#grid-holder').html(
_.template( $('#grid-template').html().trim(), {list: users})
);
</script>
</body>
</html>

24
02-ui/05-widgets/04-template-lodash/01-table-template/task.md Normal file
View file

@ -0,0 +1,24 @@
# Шаблон для таблицы с пользователями
[importance 5]
Есть данные:
```js
var users = [
{name: "Вася", age: 10},
{name: "Петя", age: 15},
{name: "Женя", age: 20},
{name: "Маша", age: 25},
{name: "Даша", age: 30},
];
```
Выведите их в виде таблицы `TABLE/TR/TD` при помощи шаблона.
Результат:
[iframe src="solution"]
[edit src="task" task/]

1
02-ui/05-widgets/04-template-lodash/01-table-template/task/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"template-grid-src","plunk":"ipMkLlRAr84pFMGJpvnS"}

32
02-ui/05-widgets/04-template-lodash/01-table-template/task/index.html Executable file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
</head>
<body>
<div id="grid-holder"></div>
<script type="text/template" id="grid-template">
..ваш шаблон..
</script>
<script>
var users = [
{name: "Вася", age: 10},
{name: "Петя", age: 15},
{name: "Женя", age: 20},
{name: "Маша", age: 25},
{name: "Даша", age: 30},
];
// ваш код, чтобы сгенерировать таблицу с юзерами (table/tr/td) по шаблону и данным users
// выведите таблицу внутри #grid-holder
</script>
</body>
</html>