យើងបានដឹងរួចមកហើយថា ទំរង់នៃទំព័រនៅក្នុងកម្មវិធី SvelteKit ចែកចេញជាបីផ្នែកគឺ ផ្នែក ES6 នៅខាងលើ ផ្នែកពុម្ពគំរូ (template) នៅកណ្តាល និងផ្នែក CSS នៅខាងក្រោម។ ទំព័រដែលមានបីផ្នែកនេះត្រូវមានឈ្មោះនៅខាងចុងជា .svelte ដែលត្រូវចាត់ទុកថាជា សមាសភាគ (component) មួយនៅក្នុងកម្មវិធី SvelteKit ។ គ្រប់សមាសភាគទាំងអស់អាចត្រូវយកទៅប្រើនៅក្នុងសមាសភាគដទៃទៀតបាន។ យើងនឹងសិក្សាពីការយកសមាសភាគទៅប្រើប្រាស់នៅពេលខាងមុខនេះ។
យ៉ាងណាម៉ិញ គុណប្រយោជន៍នៃការបង្កើតផ្នែក ES6 គឺជាការផ្តល់លទ្ធភាពអោយយើងអាចយកអថេរនិងឬក្បួនខ្នាតនៅក្នុងផ្នែកនេះ ទៅប្រើប្រាស់នៅក្នុងផ្នែកពុម្ពគំរូ ដោយប្រើប្រាស់សញ្ញា { } ។
<!--src/routes/+page.svelte-->
<script>
let info = 0
function increase(){
info += 1
}
</script>
<h1>{info}</h1>
<input type="button" on:click={increase} value="បង្កើនតំលៃ" />
<style>
h1{
color: green;
}
</style>
យើងក៏អាចយកអថេរណាមួយនៅក្នុងផ្នែក ES6 ទៅប្រើប្រាស់ជាតំលៃសំរាប់លក្ខណៈ (attribute) ណាមួយនៅក្នុងផ្នែកពុម្ពគំរូ (template) បានដែរ។
<!--src/routes/+page.svelte-->
<script>
let src = "https://i.imgur.com/74ZmBmO.png"
let title = "រូបភាពនៃការប្រើប្រាស់អថេរ"
</script>
<img src={src} alt={title} />
ក្នុងករណីដែលឈ្មោះរបស់អថេរនិងឈ្មោះរបស់លក្ខណៈដូចគ្នា កញ្ចប់ SvelteKit ផ្តល់លទ្ធភាពអោយយើងអាចសរសេរយ៉ាងខ្លីថា៖
<!--src/routes/+page.svelte-->
<script>
let src = "https://i.imgur.com/74ZmBmO.png"
let title = "រូបភាពនៃការប្រើប្រាស់អថេរ"
</script>
<img {src} alt={title} />
ក្នុងករណីដែលនៅក្នុងកំរងអក្សរមួយ (string) មានធាតុ HTML នៅក្នុងនោះ ធាតុ HTML នោះនឹងគ្មានឥទ្ធិពលអ្វីទៅលើកំរងអក្សរឡើយ ហើយវានឹងត្រូវបង្ហាញដូចជាការសរសេរនៅក្នុងកំរងអក្សរ។
<!--src/routes/+page.svelte-->
<script>
let info = "ស្វាគមន៍មកកាន់កម្មវិធី <b>SvelteKit!</b>"
</script>
<p>{info}</p>
<style>
p{
color: green;
}
</style>
បើយើងចង់អោយធាតុ HTML មានឥទ្ធិពលទៅលើកំរងអក្សរ យើងត្រូវសរសេរថា {@html …} នៅពីមុខកំរងអក្សរនោះ នៅពេលយកវាមកប្រើនៅក្នុងផ្នែកពុម្ពគំរូ។
<!--src/routes/+page.svelte-->
<script>
let info = "ស្វាគមន៍មកកាន់កម្មវិធី <b>SvelteKit!</b>"
</script>
<p>{@html info}</p>
<style>
p{
color: green;
}
</style>
