VF
я забыл совсем
Size: a a a
2020 November 06
11
просто в примере сначала фильтр, потом сорт. вот по одному вопросу на каждый
VF
спасибо попробую
PM
товарищи сами его упоминают, если что =)
я вроде явно показал чем он хорош. Зачем сюда скидывать какие-то графики сравнения строк кода? А потом мне тыкать о чем то? =)
я вроде явно показал чем он хорош. Зачем сюда скидывать какие-то графики сравнения строк кода? А потом мне тыкать о чем то? =)
пока я от тебя видел только то, чем он плох)
PM
сравниваете, дак сравнивайте нормально. То что можно делать в реакте свелт никогда не сможет сделать потому что у него не JSX.
вот с этим могу согласиться. естественно рантайм всегда дает больше возможностей чем билдтайм, потому что меньше не известных. с другой стороны а нужно ли оно, чтобы жертвовать ясностью.
PM
А в сторе кроме как сабскрибшеном низя получить информацию о сторе в другом методе?
const store =function (val) {
const _store = writable(val);
return {
method() {
const $store = get(store);
// do something
},
...store
};
}PM
если я правильно понял
PM
Vitaliy Fain
А в свелте есть контроль входящих данных при реактивности, нужна последовательность типа before after?
нет. сторы - это примитивные обсерверабл на основе которых ты уже можешь написать практически любое кастомное решение, с контролем последовательности или как угодно. с другой стороны, сторы - это контракт, поэтому для пушей мощи можно брать штуки вроде rxjs и сахар $store будет работать и с ним. по крайней мере на получение данных
PM
Vitaliy Fain
$: $buffer = $data; $: $sorting <input on:input={ ()=> $buffer = $data.filter(callback) } / $buffer.sort(func(sorting.orderBy)) writeble store sorting.orderBy = "DESC" / <select on:change={e = $sorting.orderBy = e.target.value}><option value="ASC">ASC<option>
сложно понять так, но вроде бы:
const data = writable([]);
const sorting = writable({ orderBy: 'ASC' });
const buffer = derived([ data, sorting ], ($data, $sorting) => {
return $data.filter(() => {
// do filtring
}).sort(() => {
// do sorting
});
});
PM
Vitaliy Fain
$: $buffer = $data; $: $sorting <input on:input={ ()=> $buffer = $data.filter(callback) } / $buffer.sort(func(sorting.orderBy)) writeble store sorting.orderBy = "DESC" / <select on:change={e = $sorting.orderBy = e.target.value}><option value="ASC">ASC<option>
кстати можно просто:
<select bind:value={$sorting.orderBy}>PM
не понял, но кажется в примере есть еще некий текст для фильрации, который не был явным образом показан. типа поискового запроса. это вообще что-то вроде фильтров и поиска для данных с сервера?
VF
Спасибо большое, попробую сегодня, это просто тестовый проект с рутиными задачами, на данный момент данные хранятся локально без сервера, но потом хочу дописать фетчинг некоторых данных чтобы модифицировали текущие сохраненные на локалке
PM
например, вот типичная задача фильтры + сортировка + запрос к серверу, которую я решаю с помощью сторов + asyncable стора:
const filters = writable({/* any filters */});
const sorting = writable({/* any sorting */});
const data = asyncable(fetchData, null, [ filters, sorting ]);
{#await $data}
Data is loading....
{:then data}
// show data
{:catch err}
Error on fetch: {err}
{/await}PM
<input bind:value={$filters.foo}>
<input bind:value={$filters.bar}>
<select bind:value={$sorting.orderBy}>PM
в fetchData разбираются фильтры и сортировка, применяются к апи и делается fetch запрос
PM
data - асинхронный стор, но если данные не асинхронные, а синхронные, например, загруженные заранее/сохраненные локально, тогда простой derived подойдет
PM
функцию fetchData хорошо бы еще дебаунсить
PM
если пойти дальше, то можно взять svelte-pathfinder и сразу писать еще в и УРЛ фильтры и сортинг:
<input bind:value={$query.foo}>
<input bind:value={$query.bar}>
<select bind:value={$query.orderBy}>PM
const data = asyncable(fetchData, null, [ query ]);
PM
тогда при перезагрузке страницы состояния полей и данных восстановятся автоматически