v2.5.1
Giri┼č yap

jquery-data-api

Bildi─činiz gibi jQuery bir javascript k├╝t├╝phanesi. Yani di─čer frameworkler ile kar┼č─▒la┼čt─▒rmak sa├žma olur.

Ancak mevcut javascript frameworkleri gibi biraz daha reactive olsa dedi─čim ├žok zaman olmu┼čtu zaman─▒nda. Art─▒k ├žok fazla jquery kullanmasamda projelerinde hala kullananlar olabilece─čini d├╝┼č├╝nd├╝─č├╝m i├žin basit bir data-api sistemi geli┼čtirdim.

Detaylar i├žin github adresine bakmay─▒ unutmay─▒n:
https://github.com/tayfunerbilen/jquery-data-api

Kullanabilece─činiz Metodlar

Kullanabilece─činiz Nitelikler

├ľrnek Kullan─▒mlar

├ľrneklere bakarak bu scriptin ne yapt─▒─č─▒n─▒ daha iyi anlayabilirsiniz.


Not: Bu script'in hatalar─▒ olabilir. Javascript frameworkleri gibi ├žal─▒┼čmaz, belli kurallar dahilinde kodlar─▒n─▒za biraz reactivite katmak i├žin kullanabilirsiniz. SPA olu┼čturmak i├žin yeterli de─čildir, ├Ârneklerde basit bir SPA olu┼čturduk ancak bu scriptin amac─▒na ├žokta uygun bir ├Ârnek de─čil bunu akl─▒n─▒zdan ├ž─▒karmay─▒n :)

T├╝m Metodlar

setState() metodu

State tan─▒mlamak i├žin bu metodu ya da [data-state] niteli─čini kullanabilirsiniz.

setState('name', 'Tayfun');
setState('todos', [
    {
        text: 'todo 1',
        done: false
    },
    {
        text: 'todo 2',
        done: true
    }
])

getState() metodu

State de─čerini almak i├žin bu metodu kullanabilirsiniz. ├ľrne─čin;

<input type="text" data-state="name" placeholder="Bir ┼čeyler yaz─▒n..">
<button onclick="getName()">Ad─▒ getir</button>

<script>
function getName() {
    alert(getState('name')); // inputa girilen de─čer
    // ya da $state de─či┼čkenini kullanabilirsiniz
    alert($state.name); // inputa girilen de─čer
}
</script>

updateState() metodu

Mevcut state'i g├╝ncellemek i├žin kullanabilirsiniz. ├ľrne─čin;

<input type="text" data-state="name" />
<button onclick="updateState('name', 'Tayfun')">G├╝ncelle</button>

stateEffect() metodu

Tan─▒mlad─▒─č─▒n─▒z statelerde bir de─či┼čiklik oldu─čunda yakalamak i├žin kullanabilirsiniz. ├ľrne─čin;

<input type="text" data-state="name" placeholdre="Konsolda g├Ârmek i├žin yazmaya ba┼člay─▒n" /> <br>
<input type="text" data-state="surname" placeholdre="Erbilen" />

<script>
    stateEffect((newValue, oldValue, state) => {
        // newValue = yeni de─čer
        // oldValue = eski de─čer
        // state    = hangi state oldu─ču
        console.log('State de─či┼čti', newValue, state);
    }, ['name', 'surname'])
</script>

T├╝m Nitelikler

[data-state] niteli─či

De─či┼čebilir de─čerlerinizi tan─▒mlamak i├žin bu niteli─či kullanabilirsiniz. ├ľrne─čin;

<input type="text" data-state="name" value="Tayfun" />

B├╝t├╝n stateler $state global de─či┼čkenin alt─▒nda tutuluyor. Yani olu┼čturdu─čunuz state'e $state.key ┼čeklinde ya da getState('key') ┼čeklinde eri┼čebilirsiniz.

console.log($state.name); // Tayfun
console.log(getState('name')); // Tayfun

[data-value] niteli─či

[data-state] ile olu┼čturdu─čunuz state'e de─čer atamak i├žin kullanabilirsiniz. Ancak javascript ifadesi gibi ├žal─▒┼čaca─č─▒ i├žin e─čer string bir de─čer atayacaksan─▒z t─▒rnaklar i├žinde kullanman─▒z gerekiyor. Ayr─▒ca dizi vs.de tan─▒mlayabilirsiniz. ├ľrne─čin;

<select multiple data-state="skills" data-value="['php', 'js']">
    <option value="php">PHP</option>
    <option value="js">Javascript</option>
    <option value="python">Python</option>
    <option value="css">CSS</option>
</select>

<input type="text" data-state="name" data-value="'Tayfun'">

<!-- Alternatif olarak form elemanlar─▒na value ile de─čer verebilir ya da checked, selected gibi nitelikleri ekleyerekte state'in de─čerini olu┼čturmas─▒n─▒ sa─člayabilirsiniz -->
<input type="text" data-state="name2" value="Tayfun2">

[data-block] niteli─či

Bu nitelik i├žinde {$state.key} ┼čeklinde art─▒k stateleriniz dinamik olarak g├Âsterebilir ya da javascript ifadeleri yazabilirsiniz. ├ľrne─čin;

<div data-block>
    <input type="text" data-state="name" value="Tayfun" /> <br>
    De─čer = {$state.name}
</div>

ya da bir javascript ifadesine ├Ârnek vermek gerekirse

<div data-block>
    <input type="checkbox" data-state="accept" value="1" /> <br>
    ${$state.accept ? 'Kurallar─▒ kabul ettin' : 'L├╝tfen kurallar─▒ kabul et'}
</div>

bir ba┼čka ├Ârnek

<input type="number" data-state="num1" value="2" /> <br>
<input type="number" data-state="num2" value="3" />

<div data-block>
    {$state.num1 * $state.num2}
</div>

[data-disabled] niteli─či

Duruma g├Âre disabled niteli─či eklemek i├žin kullanabilirsiniz. ├ľrne─čin;

<input type="text" data-state="name" placeholder="Ad─▒n─▒z─▒ yaz─▒n"> <br>
<button data-disabled="!$state.name">G├Ânder</button>

[data-class] niteli─či

Duruma g├Âre class ekletmek i├žin kullanabilirsiniz. ├ľrne─čin;

<style>
.accepted {
    background: lime;
}
</style>

<label data-block data-class="[$state.accept, 'accepted']">
    <input type="checkbox" value="1" data-state="accept" />
    {$state.accept ? 'Kabul etti─činiz i├žin te┼čekk├╝rler' : 'Kurallar─▒ kabul et'}
</label>

[data-show] niteli─či

Duruma g├Âre gizleyip/g├Âstermek istedi─činiz alanlar i├žin kullanabilirsiniz. ├ľrne─čin;

<label>
    <input type="checkbox" data-state="accept_rules" value="1">
    Kurallar─▒ kabul edin
</label>

<div data-show="$state.accept_rules" style="padding: 10px; background: lime">
    buray─▒ kurallar─▒ kabul etti─činizde g├Âreceksiniz!
</div>

[data-expression] niteli─či

Javascript ifadeleri ├žal─▒┼čt─▒rmak i├žin kullanabilirsiniz. Genellikle [data-for] i├žinde kullan─▒rsan─▒z i┼činize ├žok yarayacakt─▒r. State g├╝ncellendi─činde otomatik olarak bu ifadede g├╝ncellenecektir. ├ľrne─čin;

<input type="text" data-state="name" value="Tayfun">
<button onclick="updateState('name', 'Murat')">─░smi De─či┼čtir</button>

<div data-expression="$state.name === 'Murat' ? 'Yanl─▒┼č isim' : 'Do─čru yoldas─▒n!'"></div>

[data-for] niteli─či

For d├Âng├╝s├╝nden bir fark─▒ yok. Kullan─▒rken [data-for] i├žinde state'i belirtiyoruz ve ilgili eleman─▒ i├žeride hangi isimle kullanaca─č─▒m─▒z─▒da [data-as] ile belirliyoruz. ├ľrne─čin;

<style>
li.done {
    background-color: lime;
}
</style>

<ul data-for="todos" data-as="todo">
    <template>
        <li class="{todo.done ? 'done' : ''}">
            {todo.name}
        </li>
    </template>
</ul>

<script>
const todos = [
    {
        name: 'todo 1',
        done: false
    },
    {
        name: 'todo 2',
        done: true
    }
];
setState('todos', todos);
</script>

[data-css] niteli─či

De─či┼čen de─čerlerinizi css olarak tan─▒mlamak isterseniz bu niteli─či kullanabilirsiniz. Daha sonra de─či┼čmesini istedi─činiz de─čeri data-css ten hemen sonra belirtin. Mesela background-color de─čeri i├žin [data-css-background-color=""] ┼čeklinde tan─▒mlama yapmal─▒s─▒n─▒z. ├ľrne─čin;

<style>
.box {
    width: 100px;
    height: 100px;
}
</style>

<div class="box" data-css data-css-color="$state.color === 'yellow' ? 'black' : 'white'" data-css-background-color="$state.color || 'blue'">box</div>

<select data-state="color">
    <option selected disabled>Renk se├žin</option>
    <option value="yellow">Sar─▒</option>
    <option value="red">K─▒rm─▒z─▒</option>
    <option value="black">Siyah</option>
</select>
tayfunerbilen
25 g├╝n ├Ânce yazd─▒ - 416 kez g├Âr├╝nt├╝lendi.
├ľnceki PHP ile JSON POST Verilerini Almak