Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<div class="Dossier__Search">
<input type="text" bind:value="query__search"/>
<ul class="search__people" class="{{class__search__people}}">
{{#each search__people as person}}
<li on:click="click__search__person(event, person)">
{{person.name}}
</li>
{{/each}}
</ul>
<div class="{{class__person}}">
<h1>{{possessive__name(person.name)}} Dossier</h1>
<Detail__Person ctx="{{ctx}}"></Detail__Person>
<h2>Family</h2>
{{#each family as person}}
<div class="person">
<h2>{{name}}</h2>
<div class="bio">{{{bio}}}</div>
</div>
{{/each}}
<h2>Collegues</h2>
{{#each collegues as person}}
<div class="person">
<h2>{{name}}</h2>
<div class="bio">{{{bio}}}</div>
</div>
{{/each}}
</div>
</div>
<script type="buble">
import {possessive__name} from 'names/lib'
import {search__people__agent} from 'people/agent'
import Detail__Person from 'people/Detail__Person.html'
export default {
oncreate,
ondestroy,
computed: {
family: (person, people) =>
people.filter(_person => person.in__family(_person)),
collegues: (person, people) =>
people.filter(_person => person.in__collegues(_person)),
person: ctx => ctx.person,
people: ctx => ctx.people,
class__person: person => !!person,
class__search__people: search__people =>
search__people && search__people.length
? 'visible'
: '',
},
helpers: {
possessive__name
},
methods: {
click__search__person
},
components: {
Detail__Person
}
}
function oncreate() {
const C = this
, ctx = C.get('ctx')
search__people__agent(ctx)
C.observe('query__search', observe__query__search)
ctx.search__people__agent.on('change', onchange__search__people)
C.unbind = unbind
function observe__query__search(query__search) {
ctx.search__people__agent.query(query__search)
}
function onchange__search__people() {
const {search__people} = ctx
C.set({search__people})
}
function unbind() {
ctx.search__people__agent.off('change', onchange__search__people)
}
}
function ondestroy() {
this.unbind()
}
function click__search__person(e, person) {
this.set({person})
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.