[client] entrance -> public timeline: use nested tag

This commit is contained in:
otofune 2017-03-01 02:46:43 +00:00
parent d1b1113857
commit c49c9f16f5
1 changed files with 36 additions and 23 deletions

View File

@ -1,5 +1,33 @@
<mk-public-timeline> <mk-public-timeline>
<article each={ posts }> <inside-renderer each="{ posts }"></inside-renderer>
<style>
:scope
display block
</style>
<script>
this.mixin('api');
this.posts = [];
this.isFetching = true;
this.on('mount', () => {
this.api('posts', {
limit: 5,
include_reposts: false,
include_replies: false
}).then(posts => {
this.update({
isFetching: false,
posts: posts
});
});
});
</script>
</mk-public-timeline>
<inside-renderer>
<article>
<img src={ user.avatar_url + '?thumbnail&size=64' } alt="avatar"/> <img src={ user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
<div> <div>
<header> <header>
@ -7,7 +35,7 @@
<span class="username">@{ user.username }</span> <span class="username">@{ user.username }</span>
</header> </header>
<div class="body"> <div class="body">
<div class="text">{ text }</div> <div class="text" ref="text"></div>
</div> </div>
</div> </div>
</article> </article>
@ -59,28 +87,13 @@
</style> </style>
<script> <script>
this.mixin('api'); this.mixin('text');
this.mixin('text')
this.posts = [];
this.isFetching = true;
this.on('mount', () => { this.on('mount', () => {
this.api('posts', { this.mixin('text');
limit: 5, const tokens = this.analyze(this.text);
include_reposts: false, const text = this.compile(tokens);
include_replies: false this.refs.text.innerHTML = text;
}).then(data => {
const posts = data.map(datum => {
const tokens = this.analyze(datum.text);
datum.text = this.compile(tokens);
return datum;
});
this.update({
isFetching: false,
posts: posts
});
});
}); });
</script> </script>
</mk-public-timeline> </inside-renderer>