smack/sample.html at master · kaa/smack · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
	<script src="jquery.smack.js" type="text/javascript"></script>
</head>
<body>
	<script type="text/template" id="template">
		<div>
		<a data-bind="href: blogUrl">Home</a>
		<h1 data-bind="title"></h1>
		<p>
			Published <abbr data-bind="friendlyDate,title:date"></abbr>
			<span data-bind="in {category}, "></span>
			<span data-bind="!'by <strong>{authorNick|authorName}</strong>.'"></span>
		</p>
		<ul>
			<li data-bind="#tags"><a data-bind=".,href:'?tag={.}'"></a></li>
		</ul>
		<p data-bind="?admin"><a href="#">Edit</a></p>
		<p data-bind="?!admin"><a href="#">Report</a></p>
		<div data-bind="!content"></div>
		<h3 data-bind="'Comments ({comments.length})'"></h3>
		<ul>
			<li data-bind="#comments">
				<strong data-bind="author"></strong>
				<p data-bind="text"></p>
				<p data-bind="?likes.length">Liked by <em data-bind="#likes,'{.} '"></em></p>
			</li>
		</ul>
		</div>
	</script>
	<script type="text/javascript">
		var element = $($("#template").html())
			.smack({
				admin: false,
				blogUrl: "http://example.com",
				authorName: "Bob Bobson",
				category: "javascript",
				title: "Hello world",
				date: "2014-01-01",
				friendlyDate: "Yesterday",
				tags: ["tiny","template","jquery"],
				content: "<p>This is a simple <strong>smack</strong> template.</p>",
				comments: [
					{author: "bob", text: "Great stuff!", likes: ["Cecil", "Mallory"]},
					{author: "alice", text: "Indeed!", likes: []}
				]
			});
		element.appendTo(document.body);
	</script>
</body>
</html>