I’m trying to figure out how to group array items, but no luck.
I’m modifying the the pull to refresh component page from kitchen sink. Basically, I want “Painting 01” to be in the same media-list-row as “Artist 01”, also with specific “picUrl” and “itemHref”. Please help - thanks.
Below is my html code:
<div class="page-content ptr-content" data-ptr-mousewheel="true" @ptr:refresh="loadMore">
<div class="ptr-preloader">
<div class="preloader"></div>
<div class="ptr-arrow"></div>
</div>
<div class="list media-list">
<ul>
{{#each items}}
<li class="item-content">
<div class="item-media"><a href="/{{itemHref}}/" class="link" taget="_blank"><img src="{{picUrl}}" width="44"/></a></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">{{artwork}}</div>
</div>
<div class="item-subtitle">{{artist}}</div>
</div>
</li>
{{/each}}
</ul>
</div>
</div>
below is my script without the proper grouping…
<script>
return {
data: function () {
return {
items: [
{
picUrl: 'https://cdn.framework7.io/placeholder/abstract-88x88-1.jpg',
artwork: 'Mona Lisa',
artist: 'Leonardo da Vinci',
itemHref: 'about'
},
{
picUrl: 'https://cdn.framework7.io/placeholder/abstract-88x88-2.jpg',
artwork: 'Starry Night',
artist: 'Vincent van Gogh',
itemHref: 'about2'
},
],
artworks: ['Painting 01', 'Painting 02', 'Painting 03', 'Painting 04'],
artists: ['Artist 01', 'Artist 02', 'Artist 03', 'Artist 04']
}
},
methods: {
loadMore: function (e, done) {
var self = this;
var $ = self.$$;
setTimeout(function () {
// Add new item
self.items.push({
picUrl: 'https://cdn.framework7.io/placeholder/abstract-88x88-' + Math.round(Math.random() * 10) + '.jpg',
itemHref: 'about' + Math.round(Math.random() * 10),
artwork: self.artworks[Math.floor(Math.random() * self.artworks.length)],
artist: self.artists[Math.floor(Math.random() * self.artists.length)],
})
// Update state to rerender
self.$setState({
items: self.items,
});
// Done
done();
}, 1000);
}
}
}
</script>