CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>Fortgeschrittenes Svelte: Reaktivität, Lebenszyklus, Barrierefreiheit - Lernen Sie Webentwicklung | MDN</title><link rel="alternate" title="Advanced Svelte: Reactivity, lifecycle, accessibility" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_reactivity_lifecycle_accessibility" hrefLang="en"/><link rel="alternate" title="Svelte 进阶：响应式、生命周期以及无障碍" href="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_reactivity_lifecycle_accessibility" hrefLang="zh"/><link rel="alternate" title="Fortgeschrittenes Svelte: Reaktivität, Lebenszyklus, Barrierefreiheit" href="https://developer.mozilla.org/de/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_reactivity_lifecycle_accessibility" hrefLang="de"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="Im letzten Artikel haben wir unserer To-Do-Liste weitere Funktionen hinzugefügt und begonnen, unsere App in Komponenten zu organisieren. In diesem Artikel fügen wir die finalen Funktionen der App hinzu und teilen unsere App weiter in Komponenten auf. Wir werden lernen, wie man mit Reaktivitätsproblemen umgeht, die sich auf die Aktualisierung von Objekten und Arrays beziehen. Um häufige Fallen zu vermeiden, müssen wir tiefer in das Reaktivitätssystem von Svelte eintauchen. Außerdem werden wir uns mit der Lösung einiger Barrierefreiheitsprobleme im Bereich des Fokusmanagements beschäftigen und mehr."/><meta property="og:url" content="https://developer.mozilla.org/de/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_reactivity_lifecycle_accessibility"/><meta property="og:title" content="Fortgeschrittenes Svelte: Reaktivität, Lebenszyklus, Barrierefreiheit - Lernen Sie Webentwicklung | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="de"/><meta property="og:description" content="Im letzten Artikel haben wir unserer To-Do-Liste weitere Funktionen hinzugefügt und begonnen, unsere App in Komponenten zu organisieren. In diesem Artikel fügen wir die finalen Funktionen der App hinzu und teilen unsere App weiter in Komponenten auf. Wir werden lernen, wie man mit Reaktivitätsproblemen umgeht, die sich auf die Aktualisierung von Objekten und Arrays beziehen. Um häufige Fallen zu vermeiden, müssen wir tiefer in das Reaktivitätssystem von Svelte eintauchen. Außerdem werden wir uns mit der Lösung einiger Barrierefreiheitsprobleme im Bereich des Fokusmanagements beschäftigen und mehr."/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/de/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_reactivity_lifecycle_accessibility"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.f565372a.js"></script><link href="/static/css/main.3d9e7a02.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-javascript document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/de/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container "><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/de/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/de/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/de/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/de/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/de/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/de/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/de/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/de/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class=" "><a href="/de/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Build web projects usable for all</p></div></a></li><li class="apis-link-container desktop-only "><a href="/de/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container active"><button type="button" id="learn-button" class="top-level-entry menu-toggle" aria-controls="learn-menu" aria-expanded="false">Learn</button><a href="/de/docs/Learn_web_development" class="top-level-entry">Learn</a><ul id="learn-menu" class="submenu learn hidden inline-submenu-lg" aria-labelledby="learn-button"><li class="apis-link-container mobile-only "><a href="/de/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/de/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/de/docs/Learn_web_development/Core/Structuring_content" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/de/docs/Learn_web_development/Core/Styling_basics" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/de/docs/Learn_web_development/Core/Scripting" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/de/docs/Learn_web_development/Core/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/de/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/de/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/de/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/de/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/de/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/de/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fde%2Fdocs%2FLearn_web_development%2FCore%2FFrameworks_libraries%2FSvelte_reactivity_lifecycle_accessibility" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fde%2Fdocs%2FLearn_web_development%2FCore%2FFrameworks_libraries%2FSvelte_reactivity_lifecycle_accessibility" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Lernen Sie Webentwicklung</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development/Core" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Kern-Lernmodule</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries" class="breadcrumb" property="item" typeof="WebPage"><span property="name">JavaScript-Frameworks und -Bibliotheken</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_reactivity_lifecycle_accessibility" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">Fortgeschrittenes Svelte: Reaktivität, Lebenszyklus, Barrierefreiheit</span></a><meta property="position" content="4"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>Deutsch<span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="en-US" href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_reactivity_lifecycle_accessibility" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_reactivity_lifecycle_accessibility" class="button submenu-item"><span>中文 (简体)</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="container"><div class="notecard experimental localized-content-note"><p><a href="https://github.com/orgs/mdn/discussions/741" class="external"><strong>Experiment</strong>: Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.</a></p></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In diesem Artikel</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#coden_sie_mit_uns">Coden Sie mit uns</a></li><li class="document-toc-item "><a class="document-toc-link" href="#arbeit_an_der_komponente_moreactions">Arbeit an der Komponente MoreActions</a></li><li class="document-toc-item "><a class="document-toc-link" href="#reaktivitätsprobleme_aktualisierung_von_objekten_und_arrays">Reaktivitätsprobleme: Aktualisierung von Objekten und Arrays</a></li><li class="document-toc-item "><a class="document-toc-link" href="#fertigstellen_unserer_moreactions-komponente">Fertigstellen unserer MoreActions-Komponente</a></li><li class="document-toc-item "><a class="document-toc-link" href="#arbeiten_mit_dem_dom_fokus_auf_die_details">Arbeiten mit dem DOM: Fokus auf die Details</a></li><li class="document-toc-item "><a class="document-toc-link" href="#erforschen_von_problemen_mit_der_tastaturzugänglichkeit_in_unserer_to-do-app">Erforschen von Problemen mit der Tastaturzugänglichkeit in unserer To-Do-App</a></li><li class="document-toc-item "><a class="document-toc-link" href="#erstellen_einer_newtodo-komponente">Erstellen einer NewTodo-Komponente</a></li><li class="document-toc-item "><a class="document-toc-link" href="#arbeiten_mit_dom-knoten_mithilfe_der_direktive_bindthisdom_node">Arbeiten mit DOM-Knoten mithilfe der Direktive <code>bind:this={dom_node}</code></a></li><li class="document-toc-item "><a class="document-toc-link" href="#komponentenlebenszyklus_und_die_onmount-funktion">Komponentenlebenszyklus und die <code>onMount()</code>-Funktion</a></li><li class="document-toc-item "><a class="document-toc-link" href="#warten_auf_die_aktualisierung_des_dom_mit_der_tick_funktion">Warten auf die Aktualisierung des DOM mit der <code>tick()</code> Funktion</a></li><li class="document-toc-item "><a class="document-toc-link" href="#hinzufügen_von_funktionalität_zu_html-elementen_mit_der_useaction-direktive">Hinzufügen von Funktionalität zu HTML-Elementen mit der <code>use:action</code>-Direktive</a></li><li class="document-toc-item "><a class="document-toc-link" href="#komponentenbindung_methoden_und_variablen_von_komponenten_mit_bindthiscomponent-direktive_bereitstellen">Komponentenbindung: Methoden und Variablen von Komponenten mit <code>bind:this={component}</code>-Direktive bereitstellen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#der_bisherige_code">Der bisherige Code</a></li><li class="document-toc-item "><a class="document-toc-link" href="#zusammenfassung">Zusammenfassung</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/de/docs/Learn_web_development/Getting_started">Einstiegsmodule</a></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup">Umgebung einrichten</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software">Installation grundlegender Software</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web">Surfen im Web</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors">Code-Editor</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files">Umgang mit Dateien</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Command_line">Leitfaden für die Befehlszeilen-Einführung</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website">Ihre erste Website</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like">Wie wird Ihre Website aussehen?</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content">HTML: Erstellen der Inhalte</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content">CSS: Gestaltung des Inhalts</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity">JavaScript: Interaktivität hinzufügen</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website">Veröffentlichen Ihrer Website</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Web_standards">Webstandards</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works">How the web works</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model">Das Modell der Webstandards</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites">Wie Browser Websites laden</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills">Soziale Kompetenzen</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning">Forschung und Lernen</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork">Zusammenarbeit und Teamarbeit</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes">Workflows und Prozesse</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews">Erfolgreich in Vorstellungsgesprächen</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn_web_development/Core">Kernmodule</a></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Structuring_content">Inhalte mit HTML strukturieren</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax">Grundlegende HTML-Syntax</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata">Was befindet sich im Kopf? Metadaten einer Webseite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs">Überschriften und Absätze in HTML</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance">Hervorhebung und Wichtigkeit</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Lists">Listen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Structuring_documents">Strukturierung von Dokumenten</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features">Erweiterte Textfunktionen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Creating_links">Erstellen von Links</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter">Herausforderung: Eine E-Mail korrekt auszeichnen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content">Herausforderung: Strukturierung einer Inhaltsseite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_images">HTML-Bilder</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio">HTML video und audio</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page">Herausforderung: Mozilla Splash-Seite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics">Grundlagen von HTML-Tabellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Table_accessibility">Barrierefreiheit von HTML-Tabellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Planet_data_table">Herausforderung: Strukturierung einer Planeten-Datentabelle</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_forms">Formulare und Schaltflächen in HTML</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML">Debugging von HTML</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Styling_basics">Grundlagen des CSS-Stylings</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/What_is_CSS">Was ist CSS?</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Getting_started">Einstieg in CSS</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page">Herausforderung: Gestaltung einer Biografie-Seite</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Basic_selectors">Grundlagen der CSS-Selektoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors">Attribut-Selektoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements">Pseudoklassen und Pseudoelemente</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Combinators">Kombinatoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Box_model">Das Box-Modell</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts">Umgang mit Konflikten</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Values_and_units">CSS-Werte und -Einheiten</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Sizing">Größenbestimmung von Elementen in CSS</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders">Hintergründe und Rahmen</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Overflow">Überlaufender Inhalt</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Images_media_forms">Bilder, Medien und Formularelemente</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Tables">Tabellen stylen</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS">Debugging CSS</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension">Herausforderung: Grundlegendes CSS-Verständnis</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper">Herausforderung: Erstellung eines ansprechenden Briefpapiers</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box">Herausforderung: Eine cool aussehende Box</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Text_styling">CSS-Textgestaltung</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Fundamentals">Grundlegendes zur Text- und Schriftgestaltung</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Styling_lists">Listen gestalten</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Styling_links">Gestaltung von Links</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Web_fonts">Webfonts</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage">Herausforderung: Setzen einer Startseite für eine Gemeinschaftsschule</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/CSS_layout">CSS-Layout</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Introduction">Einführung in CSS-Layout</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Floats">Floats</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Positioning">Platzierung</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Flexbox">Flexbox</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Grids">CSS-Grid-Layout</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Responsive_Design">Responsives Design</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Media_queries">Grundlagen von Media Query</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension">Herausforderung: Grundlegendes Verständnis von Layouts</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Scripting">Dynamisches Scripting mit JavaScript</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Scripting/What_is_JavaScript">Was ist JavaScript?</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/A_first_splash">Erster Einblick in JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/What_went_wrong">Was ist schiefgelaufen? JavaScript-Fehlerbehebung</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Variables">Speichern der benötigten Informationen — Variablen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Math">Grundlegende Mathematik in JavaScript – Zahlen und Operatoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Strings">Umgang mit Text — Zeichenketten in JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Useful_string_methods">Nützliche String-Methoden</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Arrays">Arrays</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Silly_story_generator">Herausforderung: Blödsinnige Geschichtengenerator</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Conditionals">Entscheidungen in Ihrem Code treffen — Konditionalen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Loops">Code-Schleifen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Functions">Funktionen — wiederverwendbare Codeblöcke</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Build_your_own_function">Erstellen Sie Ihre eigene Funktion</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Return_values">Funktionsrückgabewerte</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Events">Einführung in Ereignisse</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Event_bubbling">Ereignis-Bubbling</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Image_gallery">Herausforderung: Bildergalerie</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Object_basics">JavaScript-Objektgrundlagen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/DOM_scripting">Einführung in DOM-Scripting</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Network_requests">Netzwerkanfragen mit JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/JSON">Arbeiten mit JSON</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript">Debugging JavaScript and handling errors</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries">JavaScript-Frameworks und -Bibliotheken</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/Introduction">Einführung in client-seitige Frameworks</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/Main_features">Hauptmerkmale von Frameworks</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started">Erste Schritte mit React</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning">Beginn unserer React To-Do-Liste</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_components">Komponenten in unserer React-App erstellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state">React Interaktivität: Events und State</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering">Reaktivität in React: Bearbeiten, Filtern, bedingtes Rendern</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility">Barrierefreiheit in React</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_resources">React-Ressourcen</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Accessibility">Barrierefreiheit</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility">Was ist Barrierefreiheit?</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Tooling">Barrierefreiheitstools und unterstützende Technologien</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/HTML">HTML: Eine gute Grundlage für Barrierefreiheit</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript">CSS and JavaScript Zugänglichkeitsbest Practices</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics">WAI-ARIA Grundlagen</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Multimedia">Barrierefreie Multimedia-Inhalte</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Mobile">Mobile Accessibility</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting">Herausforderung: Barrierefreiheits-Fehlerbehebung</a></li></ol></details></li><li><a href="/de/docs/Learn_web_development/Core/Design_for_developers">Design für Entwickler:innen</a></li><li><a href="/de/docs/Learn_web_development/Core/Version_control">Versionskontrolle</a></li><li class="section"><a href="/de/docs/Learn_web_development/Extensions">Erweiterungsmodule</a></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects">Advanced JavaScript objects</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes">Objektprototypen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming">Objektorientierte Programmierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript">Klassen in JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice">Objektbaupraxis</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features">Herausforderung: Hinzufügen von Funktionen zu unserem hüpfenden Ball-Demo</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs">Client-seitige Web-APIs</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction">Einführung in Web-APIs</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs">Video- und Audio-APIs</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics">Zeichnen von Grafiken</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage">Client-seitiger Speicher</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs">Third-party APIs</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Async_JS">Asynchrones JavaScript</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Introducing">Einführung in asynchrones JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Promises">Anleitung zur Verwendung von Promises</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API">Wie man eine Promise-basierte API implementiert</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers">Einführung in Worker</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations">Herausforderung: Animationen sequenzieren</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Forms">Webformulare — Arbeiten mit Benutzerdaten</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Your_first_form">Ihr erstes Formular</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form">Wie man ein Webformular strukturiert</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls">Grundlegende native Formularsteuerungen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/HTML5_input_types">Die HTML5-Eingabetypen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Other_form_controls">Andere Formularelemente</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Styling_web_forms">Styling von Webformularen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling">Fortgeschrittenes Formular-Styling</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes">UI-Pseudoklassen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Form_validation">Client-seitige Formularvalidierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data">Senden von Formulardaten</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools">Verständnis für clientseitige Tools</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Overview">Überblick über Client-seitige Tools</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Package_management">Grundlagen des Paketmanagements</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain">Einführung in eine vollständige Werkzeugkette</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Deployment">Bereitstellung unserer App</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side">Serverseitige Programmierung</a></summary><ol><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps">Erste Schritte auf der Serverseite</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction">Einführung in die Server-Seite</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview">Überblick über Client-Server</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks">Server-seitige Web-Frameworks</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security">Website-Sicherheit</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django">Django Web-Framework (Python)</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Introduction">Einführung in Django</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/development_environment">Einrichten einer Django-Entwicklungsumgebung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website">Django Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website">Django-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Models">Django Tutorial Teil 3: Verwenden von Modellen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site">Django Tutorial Teil 4: Die Django Admin-Seite</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Home_page">Django Tutorial Teil 5: Erstellen unserer Homepage</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views">Django Tutorial Teil 6: Generische Listen- und Detailansichten</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Sessions">Django-Tutorial Teil 7: Sitzungs-Framework</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Authentication">Django-Tutorial Teil 8: Benutzer-Authentifizierung und -Berechtigungen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Forms">Django Tutorial Teil 9: Arbeiten mit Formularen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Testing">Django Tutorial Teil 10: Testen einer Django-Webanwendung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Deployment">Django-Tutorial Teil 11: Bereitstellung von Django für die Produktion</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security">Django Webanwendungssicherheit</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog">Bewertung: DIY Django Mini-Blog</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs">Express Web-Framework (Node.js)</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction">Einführung in Express/Node</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment">Einrichten einer Node-Entwicklungsumgebung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website">Express-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose">Express-Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose)</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes">Express Tutorial Teil 4: Routen und Controller</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Teil 5: Bibliotheksdaten anzeigen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms">Express Tutorial Teil 6: Arbeiten mit Formularen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment">Express Tutorial Teil 7: Bereitstellung im Produktionsumfeld</a></li></ol></details></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Performance">Web-Performance</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Performance/why_web_performance">Das "Warum" der Web-Performance</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/What_is_web_performance">Was ist Web-Performance?</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/Perceived_performance">Wahrgenommene Leistung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/Measuring_performance">Leistungsmessung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/Multimedia">Multimedia: Bilder</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/video">Multimedia: video</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/JavaScript">JavaScript-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/HTML">HTML-Performance-Optimierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/CSS">CSS-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/business_case_for_performance">Der geschäftliche Nutzen der Web-Performance</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Testing">Tests</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Introduction">Einführung in das Cross-Browser-Testing</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Testing_strategies">Strategien zur Durchführung von Tests</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS">Umgang mit häufigen HTML- und CSS-Problemen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Feature_detection">Implementierung der Funktionsprüfung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Automated_testing">Einführung in automatisiertes Testen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment">Einrichtung Ihrer eigenen Testautomatisierungsumgebung</a></li></ol></details></li><li><a href="/de/docs/Learn_web_development/Extensions/Transform_animate">CSS transformieren und animieren</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Security_privacy">Sicherheit und Datenschutz</a></li><li class="section">Weitere Ressourcen</li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Howto">Häufige Probleme lösen</a></summary><ol><li><a href="/de/docs/Learn_web_development/Howto/Solve_HTML_problems">Häufige HTML-Probleme lösen</a></li><li><a href="/de/docs/Learn_web_development/Howto/Solve_CSS_problems">Häufige CSS-Probleme lösen</a></li><li><a href="/de/docs/Learn_web_development/Howto/Solve_JavaScript_problems">Häufige JavaScript-Probleme lösen</a></li><li><a href="/de/docs/Learn_web_development/Howto/Web_mechanics">Webmechanik</a></li><li><a href="/de/docs/Learn_web_development/Howto/Tools_and_setup">Tools und Einrichtung</a></li><li><a href="/de/docs/Learn_web_development/Howto/Design_and_accessibility">Design und Barrierefreiheit</a></li></ol></details></li><li><a href="/de/docs/Learn_web_development/About">Über</a></li><li><a href="/de/docs/Learn_web_development/Educators">Ressourcen für Lehrkräfte</a></li><li><a href="/de/docs/Learn_web_development/Changelog">Änderungsprotokoll</a></li></ol></div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In diesem Artikel</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#coden_sie_mit_uns">Coden Sie mit uns</a></li><li class="document-toc-item "><a class="document-toc-link" href="#arbeit_an_der_komponente_moreactions">Arbeit an der Komponente MoreActions</a></li><li class="document-toc-item "><a class="document-toc-link" href="#reaktivitätsprobleme_aktualisierung_von_objekten_und_arrays">Reaktivitätsprobleme: Aktualisierung von Objekten und Arrays</a></li><li class="document-toc-item "><a class="document-toc-link" href="#fertigstellen_unserer_moreactions-komponente">Fertigstellen unserer MoreActions-Komponente</a></li><li class="document-toc-item "><a class="document-toc-link" href="#arbeiten_mit_dem_dom_fokus_auf_die_details">Arbeiten mit dem DOM: Fokus auf die Details</a></li><li class="document-toc-item "><a class="document-toc-link" href="#erforschen_von_problemen_mit_der_tastaturzugänglichkeit_in_unserer_to-do-app">Erforschen von Problemen mit der Tastaturzugänglichkeit in unserer To-Do-App</a></li><li class="document-toc-item "><a class="document-toc-link" href="#erstellen_einer_newtodo-komponente">Erstellen einer NewTodo-Komponente</a></li><li class="document-toc-item "><a class="document-toc-link" href="#arbeiten_mit_dom-knoten_mithilfe_der_direktive_bindthisdom_node">Arbeiten mit DOM-Knoten mithilfe der Direktive <code>bind:this={dom_node}</code></a></li><li class="document-toc-item "><a class="document-toc-link" href="#komponentenlebenszyklus_und_die_onmount-funktion">Komponentenlebenszyklus und die <code>onMount()</code>-Funktion</a></li><li class="document-toc-item "><a class="document-toc-link" href="#warten_auf_die_aktualisierung_des_dom_mit_der_tick_funktion">Warten auf die Aktualisierung des DOM mit der <code>tick()</code> Funktion</a></li><li class="document-toc-item "><a class="document-toc-link" href="#hinzufügen_von_funktionalität_zu_html-elementen_mit_der_useaction-direktive">Hinzufügen von Funktionalität zu HTML-Elementen mit der <code>use:action</code>-Direktive</a></li><li class="document-toc-item "><a class="document-toc-link" href="#komponentenbindung_methoden_und_variablen_von_komponenten_mit_bindthiscomponent-direktive_bereitstellen">Komponentenbindung: Methoden und Variablen von Komponenten mit <code>bind:this={component}</code>-Direktive bereitstellen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#der_bisherige_code">Der bisherige Code</a></li><li class="document-toc-item "><a class="document-toc-link" href="#zusammenfassung">Zusammenfassung</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="de"><header><h1>Fortgeschrittenes Svelte: Reaktivität, Lebenszyklus, Barrierefreiheit</h1></header><div class="section-content"><ul class="prev-next"><li><a class="button secondary" href="/de/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_components"><span class="button-wrap"> Zurück </span></a></li><li><a class="button secondary" href="/de/docs/Learn_web_development/Core/Frameworks_libraries"><span class="button-wrap"> Übersicht: JavaScript-Frameworks und -Bibliotheken</span></a></li><li><a class="button secondary" href="/de/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_stores"><span class="button-wrap"> Weiter </span></a></li></ul> <p>Im letzten Artikel haben wir unserer To-Do-Liste weitere Funktionen hinzugefügt und begonnen, unsere App in Komponenten zu organisieren. In diesem Artikel fügen wir die finalen Funktionen der App hinzu und teilen unsere App weiter in Komponenten auf. Wir werden lernen, wie man mit Reaktivitätsproblemen umgeht, die sich auf die Aktualisierung von Objekten und Arrays beziehen. Um häufige Fallen zu vermeiden, müssen wir tiefer in das Reaktivitätssystem von Svelte eintauchen. Außerdem werden wir uns mit der Lösung einiger Barrierefreiheitsprobleme im Bereich des Fokusmanagements beschäftigen und mehr.</p> <figure class="table-container"><table> <tbody> <tr> <th scope="row">Voraussetzungen:</th> <td> <p> Es wird mindestens empfohlen, dass Sie mit den Kernsprachen <a href="/de/docs/Learn_web_development/Core/Structuring_content">HTML</a>, <a href="/de/docs/Learn_web_development/Core/Styling_basics">CSS</a> und <a href="/de/docs/Learn_web_development/Core/Scripting">JavaScript</a> vertraut sind und über Kenntnisse im Umgang mit dem <a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Command_line">Terminal/Befehlszeile</a> verfügen. </p> <p> Sie benötigen ein Terminal mit installiertem Node und npm, um Ihre App zu kompilieren und zu bauen. </p> </td> </tr> <tr> <th scope="row">Zielsetzung:</th> <td> Lernen Sie einige fortgeschrittene Svelte-Techniken im Zusammenhang mit der Lösung von Reaktivitätsproblemen, Problemen mit der Tastaturzugänglichkeit im Zusammenhang mit dem Komponentenlebenszyklus und mehr. </td> </tr> </tbody> </table></figure> <p>Wir konzentrieren uns auf einige Barrierefreiheitsprobleme im Zusammenhang mit dem Fokusmanagement. Dazu verwenden wir Techniken zum Zugriff auf DOM-Knoten und zur Ausführung von Methoden wie <a href="/de/docs/Web/API/HTMLElement/focus"><code>focus()</code></a> und <a href="/de/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>. Wir lernen auch, wie man Event-Listener für DOM-Elemente deklariert und bereinigt.</p> <p>Auch müssen wir ein wenig über den Komponentenlebenszyklus lernen, um zu verstehen, wann diese DOM-Knoten im DOM eingebaut und entfernt werden und wie wir auf sie zugreifen können. Wir werden auch über die <code>action</code>-Direktive lernen, die es uns ermöglicht, die Funktionalität von HTML-Elementen auf eine wiederverwendbare und deklarative Weise zu erweitern.</p> <p>Schließlich lernen wir noch mehr über Komponenten. Bisher haben wir gesehen, wie Komponenten Daten mithilfe von <code>props</code> teilen und mit ihren Eltern durch Ereignisse und bidirektionale Datenbindung kommunizieren. Jetzt werden wir sehen, wie Komponenten auch Methoden und Variablen zur Verfügung stellen können.</p> <p>Die folgenden neuen Komponenten werden im Verlauf dieses Artikels entwickelt:</p> <ul> <li><code>MoreActions</code>: Zeigt die Schaltflächen <em>Alle auswählen</em> und <em>Abgeschlossene entfernen</em> an und löst die entsprechenden Ereignisse aus, die zur Handhabung ihrer Funktionalität erforderlich sind.</li> <li><code>NewTodo</code>: Zeigt das <code><input></code>-Feld und die Schaltfläche <em>Hinzufügen</em> zum Hinzufügen eines neuen To-Dos an.</li> <li><code>TodosStatus</code>: Zeigt die Überschrift "x von y Aufgaben abgeschlossen" an.</li> </ul></div><section aria-labelledby="coden_sie_mit_uns"><h2 id="coden_sie_mit_uns"><a href="#coden_sie_mit_uns">Coden Sie mit uns</a></h2><div class="section-content"></div></section><section aria-labelledby="git"><h3 id="git"><a href="#git">Git</a></h3><div class="section-content"><p>Klone Sie das GitHub-Repo (falls Sie es noch nicht gemacht haben) mit:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>git clone https://github.com/opensas/mdn-svelte-tutorial.git </code></pre></div> <p>Um den aktuellen Stand der App zu erreichen, führen Sie aus</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>cd mdn-svelte-tutorial/05-advanced-concepts </code></pre></div> <p>Oder laden Sie direkt den Inhalt des Ordners herunter:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npx degit opensas/mdn-svelte-tutorial/05-advanced-concepts </code></pre></div> <p>Denken Sie daran, <code>npm install && npm run dev</code> auszuführen, um Ihre App im Entwicklungsmodus zu starten.</p></div></section><section aria-labelledby="repl"><h3 id="repl"><a href="#repl">REPL</a></h3><div class="section-content"><p>Um mit uns im REPL zu coden, beginnen Sie bei</p> <p><a href="https://svelte.dev/repl/76cc90c43a37452e8c7f70521f88b698?version=3.23.2" class="external" target="_blank">https://svelte.dev/repl/76cc90c43a37452e8c7f70521f88b698?version=3.23.2</a></p></div></section><section aria-labelledby="arbeit_an_der_komponente_moreactions"><h2 id="arbeit_an_der_komponente_moreactions"><a href="#arbeit_an_der_komponente_moreactions">Arbeit an der Komponente MoreActions</a></h2><div class="section-content"><p>Nun werden wir uns um die Schaltflächen <em>Alle auswählen</em> und <em>Abgeschlossene entfernen</em> kümmern. Lassen Sie uns eine Komponente erstellen, die dafür zuständig ist, die Schaltflächen anzuzeigen und die entsprechenden Ereignisse auszulösen.</p> <ol> <li> <p>Erstellen Sie eine neue Datei, <code>components/MoreActions.svelte</code>.</p> </li> <li> <p>Bei einem Klick auf die erste Schaltfläche wird ein <code>checkAll</code>-Ereignis ausgelöst, das signalisiert, dass alle To-Dos ausgewählt/abgewählt werden sollen. Bei einem Klick auf die zweite Schaltfläche wird ein <code>removeCompleted</code>-Ereignis ausgelöst, das signalisiert, dass alle abgeschlossenen To-Dos entfernt werden sollen. Fügen Sie den folgenden Inhalt in Ihre <code>MoreActions.svelte</code>-Datei ein:</p> <div class="code-example"><div class="example-header"><span class="language-name">svelte</span></div><pre class="brush: svelte notranslate"><code><script> import { createEventDispatcher } from "svelte"; const dispatch = createEventDispatcher(); let completed = true; const checkAll = () => { dispatch("checkAll", completed); completed = !completed; }; const removeCompleted = () => dispatch("removeCompleted"); </script> <div class="btn-group"> <button type="button" class="btn btn__primary" on:click={checkAll}>{completed ? 'Check' : 'Uncheck'} all</button> <button type="button" class="btn btn__primary" on:click={removeCompleted}>Remove completed</button> </div> </code></pre></div> <p>Wir haben auch eine <code>completed</code>-Variable hinzugefügt, um zwischen dem Auswählen und Abwählen aller Aufgaben zu wechseln.</p> </li> <li> <p>Zurück in <code>Todos.svelte</code>, werden wir unsere <code>MoreActions</code>-Komponente importieren und zwei Funktionen erstellen, um die von der <code>MoreActions</code>-Komponente ausgelösten Ereignisse zu verarbeiten.</p> <p>Fügen Sie die folgende Import-Anweisung unter den bestehenden hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import MoreActions from "./MoreActions.svelte"; </code></pre></div> </li> <li> <p>Fügen Sie dann die beschriebenen Funktionen am Ende des <code><script></code>-Abschnitts hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const checkAllTodos = (completed) => todos.forEach((t) => (t.completed = completed)); const removeCompletedTodos = () => (todos = todos.filter((t) => !t.completed)); </code></pre></div> </li> <li> <p>Gehen Sie nun zum Ende des Markup-Abschnitts von <code>Todos.svelte</code> und ersetzen Sie das <code><div class="btn-group"></code>-Element, das wir in <code>MoreActions.svelte</code> kopiert haben, durch einen Aufruf der <code>MoreActions</code>-Komponente, wie folgt:</p> <div class="code-example"><div class="example-header"><span class="language-name">svelte</span></div><pre class="brush: svelte notranslate"><code> <MoreActions on:checkAll={(e) => checkAllTodos(e.detail)} on:removeCompleted={removeCompletedTodos} /> </code></pre></div> </li> <li> <p>Gehen Sie zurück zur App und probieren Sie es aus. Sie werden feststellen, dass die Schaltfläche <em>Abgeschlossene entfernen</em> einwandfrei funktioniert, aber die Schaltfläche <em>Alle auswählen</em>/<em>Abwählen</em> einfach stillschweigend nicht funktioniert.</p> </li> </ol> <p>Um herauszufinden, was hier passiert, müssen wir etwas tiefer in die Svelte-Reaktivität eintauchen.</p></div></section><section aria-labelledby="reaktivitätsprobleme_aktualisierung_von_objekten_und_arrays"><h2 id="reaktivitätsprobleme_aktualisierung_von_objekten_und_arrays"><a href="#reaktivitätsprobleme_aktualisierung_von_objekten_und_arrays">Reaktivitätsprobleme: Aktualisierung von Objekten und Arrays</a></h2><div class="section-content"><p>Um zu sehen, was passiert, können wir das <code>todos</code>-Array aus der <code>checkAllTodos()</code>-Funktion in der Konsole protokollieren.</p> <ol> <li> <p>Aktualisieren Sie Ihre bestehende <code>checkAllTodos()</code>-Funktion auf das Folgende:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const checkAllTodos = (completed) => { todos.forEach((t) => (t.completed = completed)); console.log("todos", todos); }; </code></pre></div> </li> <li> <p>Gehen Sie zurück zu Ihrem Browser, öffnen Sie die DevTools-Konsole und klicken Sie mehrmals auf <em>Alle auswählen</em>/<em>Abwählen</em>.</p> </li> </ol> <p>Sie werden bemerken, dass das Array jedes Mal erfolgreich aktualisiert wird, wenn Sie den Knopf drücken (die <code>completed</code>-Eigenschaften der <code>todo</code>-Objekte werden zwischen <code>true</code> und <code>false</code> umgeschaltet), aber Svelte ist sich dessen nicht bewusst. Das bedeutet auch, dass in diesem Fall eine reaktive Anweisung wie <code>$: console.log('todos', todos)</code> nicht sehr nützlich sein wird.</p> <p>Um herauszufinden, warum dies geschieht, müssen wir verstehen, wie Reaktivität in Svelte bei der Aktualisierung von Arrays und Objekten funktioniert.</p> <p>Viele Web-Frameworks verwenden die Virtual-DOM-Technik, um die Seite zu aktualisieren. Im Grunde ist der virtuelle DOM eine im Speicher befindliche Kopie des Inhalts der Webseite. Das Framework aktualisiert diese virtuelle Darstellung, die dann mit dem "echten" DOM synchronisiert wird. Dies ist viel schneller als das direkte Aktualisieren des DOM und erlaubt dem Framework, viele Optimierungstechniken anzuwenden.</p> <p>Diese Frameworks führen standardmäßig im Grunde genommen unseren gesamten JavaScript-Code bei jeder Änderung erneut gegen diesen virtuellen DOM aus und wenden verschiedene Methoden an, um teure Berechnungen zwischenzuspeichern und die Ausführung zu optimieren. Sie versuchen kaum bis gar nicht zu verstehen, was unser JavaScript-Code tut.</p> <p>Svelte verwendet keine virtuelle DOM-Darstellung. Stattdessen analysiert und untersucht es unseren Code, erstellt einen Abhängigkeitsbaum und generiert dann den erforderlichen JavaScript-Code, um nur die Teile des DOM zu aktualisieren, die aktualisiert werden müssen. Dieser Ansatz generiert in der Regel optimalen JavaScript-Code mit minimalem Overhead, hat jedoch auch seine Einschränkungen.</p> <p>Manchmal kann Svelte Änderungen an beobachtbaren Variablen nicht erkennen. Denken Sie daran, dass Sie Svelte mitteilen müssen, dass eine Variable sich geändert hat, indem Sie ihr einen neuen Wert zuweisen. Eine einfache Regel, die Sie im Kopf behalten sollten, ist, dass <strong>der Name der aktualisierten Variable auf der linken Seite der Zuordnung erscheinen muss.</strong></p> <p>Zum Beispiel im folgenden Code:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const foo = obj.foo; foo.bar = "baz"; </code></pre></div> <p>Svelte wird Referenzen auf <code>obj.foo.bar</code> nicht aktualisieren, es sei denn, Sie folgen es mit <code>obj = obj</code>. Das liegt daran, dass Svelte Objektverweise nicht verfolgen kann, sodass wir ihm explizit mitteilen müssen, dass sich <code>obj</code> geändert hat, indem wir eine Zuweisung durchführen.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Wenn <code>foo</code> eine Top-Level-Variable ist, können Sie Svelte einfach mitteilen, <code>obj</code> zu aktualisieren, wann immer <code>foo</code> sich ändert, mithilfe der folgenden reaktiven Anweisung: <code>$: foo, obj = obj</code>. Damit definieren wir <code>foo</code> als Abhängigkeit, und wann immer es sich ändert, wird Svelte <code>obj = obj</code> ausführen.</p> </div> <p>In unserer <code>checkAllTodos()</code>-Funktion, wenn wir ausführen:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>todos.forEach((t) => (t.completed = completed)); </code></pre></div> <p>wird Svelte <code>todos</code> nicht als geändert markieren, weil es nicht weiß, dass wir, wenn wir unsere <code>t</code>-Variable innerhalb der <code>forEach()</code>-Methode aktualisieren, auch das <code>todos</code>-Array modifizieren. Und das ergibt Sinn, denn sonst wäre Svelte sich über das Innenleben der <code>forEach()</code>-Methode bewusst; dasselbe wäre also für jede Methode wahr, die an jedes Objekt oder Array angehängt ist.</p> <p>Nichtsdestotrotz gibt es verschiedene Techniken, die wir anwenden können, um dieses Problem zu lösen, und alle betreffen die Zuweisung eines neuen Werts an die beobachtete Variable.</p> <p>Wie wir bereits gesehen haben, könnten wir einfach Svelte mitteilen, die Variable mit einer Selbstzuweisung zu aktualisieren, so:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const checkAllTodos = (completed) => { todos.forEach((t) => (t.completed = completed)); todos = todos; }; </code></pre></div> <p>Dies wird das Problem lösen. Intern wird Svelte <code>todos</code> als geändert kennzeichnen und die scheinbar redundante Selbstzuweisung entfernen. Abgesehen von der Tatsache, dass es seltsam aussieht, ist es völlig in Ordnung, diese Technik zu verwenden, und manchmal ist es der prägnanteste Weg, es zu tun.</p> <p>Wir könnten auch auf das <code>todos</code>-Array per Index zugreifen, wie folgt:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const checkAllTodos = (completed) => { todos.forEach((t, i) => (todos[i].completed = completed)); }; </code></pre></div> <p>Zuweisungen an Eigenschaften von Arrays und Objekten — z.B. <code>obj.foo += 1</code> oder <code>array[i] = x</code> — funktionieren genauso wie Zuweisungen an die Werte selbst. Wenn Svelte diesen Code analysiert, kann es erkennen, dass das <code>todos</code>-Array modifiziert wird.</p> <p>Eine weitere Lösung besteht darin, ein neues Array an <code>todos</code> zuzuweisen, das eine Kopie aller To-Dos mit der entsprechend aktualisierten <code>completed</code>-Eigenschaft enthält, wie folgt:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const checkAllTodos = (completed) => { todos = todos.map((t) => ({ ...t, completed })); }; </code></pre></div> <p>In diesem Fall verwenden wir die <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array/map"><code>map()</code></a>-Methode, welche ein neues Array mit den Ergebnissen der Ausführung der bereitgestellten Funktion für jedes Element zurückgibt. Die Funktion gibt eine Kopie jedes To-Dos zurück, indem sie die <a href="/de/docs/Web/JavaScript/Reference/Operators/Spread_syntax">Spreizsyntax</a> verwendet und die Eigenschaft des <code>completed</code>-Werts entsprechend überschreibt. Diese Lösung hat den zusätzlichen Vorteil, ein neues Array mit neuen Objekten zurückzugeben und die ursprüngliche <code>todos</code>-Array-Mutation völlig zu vermeiden.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Svelte erlaubt es uns, verschiedene Optionen anzugeben, die beeinflussen, wie der Compiler funktioniert. Die Option <code><svelte:options immutable={true}/></code> teilt dem Compiler mit, dass Sie versprechen, keine Objekte zu mutieren. Dies ermöglicht es, bei der Überprüfung, ob sich Werte geändert haben, weniger konservativ zu sein und einfacheren sowie leistungsfähigeren Code zu generieren. Weitere Informationen zu <code><svelte:options></code> finden Sie in der <a href="https://svelte.dev/docs/special-elements#svelte-options" class="external" target="_blank">Svelte-Optionen-Dokumentation</a>.</p> </div> <p>All diese Lösungen beinhalten eine Zuweisung, bei der die aktualisierte Variable auf der linken Seite der Gleichung steht. Jede dieser Techniken ermöglicht es Svelte zu erkennen, dass unser <code>todos</code>-Array geändert wurde.</p> <p><strong>Wählen Sie eine aus und aktualisieren Sie Ihre <code>checkAllTodos()</code>-Funktion entsprechend. Jetzt sollten Sie in der Lage sein, alle Ihre To-Dos auf einmal zu markieren und zu entmarkieren. Probieren Sie es aus!</strong></p></div></section><section aria-labelledby="fertigstellen_unserer_moreactions-komponente"><h2 id="fertigstellen_unserer_moreactions-komponente"><a href="#fertigstellen_unserer_moreactions-komponente">Fertigstellen unserer MoreActions-Komponente</a></h2><div class="section-content"><p>Wir werden unserem Element ein Usability-Detail hinzufügen. Wir deaktivieren die Schaltflächen, wenn keine Aufgaben zu bearbeiten sind. Dazu werden wir das <code>todos</code>-Array als Prop empfangen und die <code>disabled</code>-Eigenschaft jeder Schaltfläche entsprechend setzen.</p> <ol> <li> <p>Aktualisieren Sie Ihre <code>MoreActions.svelte</code>-Komponente wie folgt:</p> <div class="code-example"><div class="example-header"><span class="language-name">svelte</span></div><pre class="brush: svelte notranslate"><code><script> import { createEventDispatcher } from 'svelte'; const dispatch = createEventDispatcher(); export let todos; let completed = true; const checkAll = () => { dispatch('checkAll', completed); completed = !completed; } const removeCompleted = () => dispatch('removeCompleted'); $: completedTodos = todos.filter((t) => t.completed).length; </script> <div class="btn-group"> <button type="button" class="btn btn__primary" disabled={todos.length === 0} on:click={checkAll}>{completed ? 'Check' : 'Uncheck'} all</button> <button type="button" class="btn btn__primary" disabled={completedTodos === 0} on:click={removeCompleted}>Remove completed</button> </div> </code></pre></div> <p>Wir haben auch eine reaktive <code>completedTodos</code>-Variable deklariert, um die <em>Abgeschlossene entfernen</em>-Schaltfläche zu aktivieren oder zu deaktivieren.</p> </li> <li> <p>Vergessen Sie nicht, das Prop innerhalb von <code>Todos.svelte</code> in <code>MoreActions</code> zu übergeben, wo die Komponente aufgerufen wird:</p> <div class="code-example"><div class="example-header"><span class="language-name">svelte</span></div><pre class="brush: svelte notranslate"><code><MoreActions {todos} on:checkAll={(e) => checkAllTodos(e.detail)} on:removeCompleted={removeCompletedTodos} /> </code></pre></div> </li> </ol></div></section><section aria-labelledby="arbeiten_mit_dem_dom_fokus_auf_die_details"><h2 id="arbeiten_mit_dem_dom_fokus_auf_die_details"><a href="#arbeiten_mit_dem_dom_fokus_auf_die_details">Arbeiten mit dem DOM: Fokus auf die Details</a></h2><div class="section-content"><p>Nachdem wir alle erforderlichen Funktionen der App abgeschlossen haben, konzentrieren wir uns auf einige Barrierefreiheitsmerkmale, die die Benutzerfreundlichkeit unserer App sowohl für Tastaturnutzer als auch für Screenreader-Nutzer verbessern.</p> <p>In ihrem aktuellen Zustand hat unsere App einige Probleme mit der Tastaturzugänglichkeit im Zusammenhang mit dem Fokusmanagement. Lassen Sie uns diese Probleme genauer betrachten.</p></div></section><section aria-labelledby="erforschen_von_problemen_mit_der_tastaturzugänglichkeit_in_unserer_to-do-app"><h2 id="erforschen_von_problemen_mit_der_tastaturzugänglichkeit_in_unserer_to-do-app"><a href="#erforschen_von_problemen_mit_der_tastaturzugänglichkeit_in_unserer_to-do-app">Erforschen von Problemen mit der Tastaturzugänglichkeit in unserer To-Do-App</a></h2><div class="section-content"><p>Derzeit stellen Tastaturbenutzer fest, dass der Fokusfluss unserer App nicht sehr vorhersehbar oder kohärent ist.</p> <p>Wenn Sie auf das Eingabefeld oben in unserer App klicken, sehen Sie eine dicke, gestrichelte Umrandung um dieses Eingabefeld. Diese Umrandung ist Ihr visueller Indikator dafür, dass der Browser aktuell auf dieses Element fokussiert ist.</p> <p>Wenn Sie ein Mausenutzer sind, haben Sie möglicherweise diesen visuellen Hinweis übersprungen. Aber wenn Sie ausschließlich mit der Tastatur arbeiten, ist es von entscheidender Bedeutung, dass man weiß, welches Steuerelement den Fokus hat. Es zeigt uns an, welches Steuerelement unsere Tastenanschläge empfangen wird.</p> <p>Wenn Sie die <kbd>Tab</kbd>-Taste wiederholt drücken, sehen Sie den gestrichelten Fokusindikator zwischen allen fokussierbaren Elementen auf der Seite wechseln. Wenn Sie den Fokus auf die <em>Bearbeiten</em>-Schaltfläche bewegen und <kbd>Enter</kbd> drücken, verschwindet der Fokus plötzlich und Sie können nicht mehr feststellen, welches Steuerelement unsere Tastenanschläge empfangen wird.</p> <p>Wenn Sie die <kbd>Escape</kbd>- oder <kbd>Enter</kbd>-Taste drücken, passiert außerdem nichts. Und wenn Sie auf <em>Abbrechen</em> oder <em>Speichern</em> klicken, verschwindet der Fokus erneut. Für einen Nutzer, der mit der Tastatur arbeitet, wird dieses Verhalten bestenfalls verwirrend sein.</p> <p>Wir möchten auch einige Benutzerfreundlichkeitsmerkmale hinzufügen, wie das Deaktivieren der <em>Speichern</em>-Schaltfläche, wenn erforderliche Felder leer sind, das Fokussieren bestimmter HTML-Elemente oder das automatische Auswählen von Inhalten, wenn ein Texteingabefeld fokussiert wird.</p> <p>Um all diese Funktionen zu implementieren, benötigen wir programmgesteuerten Zugang zu DOM-Knoten, um Funktionen wie <a href="/de/docs/Web/API/HTMLElement/focus"><code>focus()</code></a> und <a href="/de/docs/Web/API/HTMLInputElement/select"><code>select()</code></a> auszuführen. Wir müssen auch <a href="/de/docs/Web/API/EventTarget/addEventListener"><code>addEventListener()</code></a> und <a href="/de/docs/Web/API/EventTarget/removeEventListener"><code>removeEventListener()</code></a> verwenden, um spezifische Aufgaben auszuführen, wenn das Steuerelement den Fokus erhält.</p> <p>Das Problem besteht darin, dass alle diese DOM-Knoten von Svelte zur Laufzeit dynamisch erstellt werden. Daher müssen wir warten, bis sie erstellt und dem DOM hinzugefügt wurden, um sie verwenden zu können. Dazu müssen wir etwas über den <a href="https://learn.svelte.dev/tutorial/onmount" class="external" target="_blank">Komponentenlebenszyklus</a> lernen, um zu verstehen, wann wir auf sie zugreifen können — mehr dazu später.</p></div></section><section aria-labelledby="erstellen_einer_newtodo-komponente"><h2 id="erstellen_einer_newtodo-komponente"><a href="#erstellen_einer_newtodo-komponente">Erstellen einer NewTodo-Komponente</a></h2><div class="section-content"><p>Lassen Sie uns beginnen, unser neues To-Do-Formular in seine eigene Komponente zu extrahieren. Mit dem Wissen, das wir bisher haben, können wir eine neue Komponentendatei erstellen und den Code anpassen, um ein <code>addTodo</code>-Ereignis auszulösen und den Namen des neuen To-Dos mit den zusätzlichen Details zu übergeben.</p> <ol> <li> <p>Erstellen Sie eine neue Datei, <code>components/NewTodo.svelte</code>.</p> </li> <li> <p>Fügen Sie die folgenden Inhalte hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">svelte</span></div><pre class="brush: svelte notranslate"><code><script> import { createEventDispatcher } from 'svelte'; const dispatch = createEventDispatcher(); let name = ''; const addTodo = () => { dispatch('addTodo', name); name = ''; } const onCancel = () => name = ''; </script> <form on:submit|preventDefault={addTodo} on:keydown={(e) => e.key === 'Escape' && onCancel()}> <h2 class="label-wrapper"> <label for="todo-0" class="label__lg">What needs to be done?</label> </h2> <input bind:value={name} type="text" id="todo-0" autoComplete="off" class="input input__lg" /> <button type="submit" disabled={!name} class="btn btn__primary btn__lg">Add</button> </form> </code></pre></div> <p>Hier binden wir das <code><input></code> an die <code>name</code>-Variable mit <code>bind:value={name}</code> und deaktivieren die <em>Hinzufügen</em>-Schaltfläche, wenn sie leer ist (d.h. keinen Textinhalt hat) mit <code>disabled={!name}</code>. Wir kümmern uns auch um die <kbd>Escape</kbd>-Taste mit <code>on:keydown={(e) => e.key === 'Escape' && onCancel()}}</code>. Wann immer die <kbd>Escape</kbd>-Taste gedrückt wird, führen wir <code>onCancel()</code> aus, das einfach die <code>name</code>-Variable bereinigt.</p> </li> <li> <p>Jetzt müssen wir es aus der <code>Todos</code>-Komponente importieren und verwenden und die <code>addTodo()</code>-Funktion aktualisieren, um den Namen des neuen To-Dos zu empfangen.</p> <p>Fügen Sie die folgende <code>import</code>-Anweisung unter den anderen in <code>Todos.svelte</code> hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import NewTodo from "./NewTodo.svelte"; </code></pre></div> </li> <li> <p>Und aktualisieren Sie die <code>addTodo()</code>-Funktion wie folgt:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function addTodo(name) { todos = [...todos, { id: newTodoId, name, completed: false }]; } </code></pre></div> <p><code>addTodo()</code> empfängt jetzt den Namen des neuen To-Dos direkt, sodass wir die <code>newTodoName</code>-Variable nicht mehr benötigen, um ihr ihren Wert zu geben. Unsere <code>NewTodo</code>-Komponente kümmert sich darum.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Die <code>{ name }</code>-Syntax ist nur eine Abkürzung für <code>{ name: name }</code>. Diese stammt direkt aus JavaScript und hat nichts speziell mit Svelte zu tun, abgesehen davon, dass sie etwas Inspiration für Sveltes eigene Abkürzungen liefert.</p> </div> </li> <li> <p>Schließlich für diesen Abschnitt ersetzen Sie das NewTodo-Formular-Markup durch einen Aufruf zur <code>NewTodo</code>-Komponente, wie folgt:</p> <div class="code-example"><div class="example-header"><span class="language-name">svelte</span></div><pre class="brush: svelte notranslate"><code> <NewTodo on:addTodo={(e) => addTodo(e.detail)} /> </code></pre></div> </li> </ol></div></section><section aria-labelledby="arbeiten_mit_dom-knoten_mithilfe_der_direktive_bindthisdom_node"><h2 id="arbeiten_mit_dom-knoten_mithilfe_der_direktive_bindthisdom_node"><a href="#arbeiten_mit_dom-knoten_mithilfe_der_direktive_bindthisdom_node">Arbeiten mit DOM-Knoten mithilfe der Direktive <code>bind:this={dom_node}</code></a></h2><div class="section-content"><p>Nun möchten wir, dass das <code><input></code>-Element der <code>NewTodo</code>-Komponente jedes Mal, wenn die Schaltfläche <em>Hinzufügen</em> gedrückt wird, den Fokus zurückerlangt. Dafür benötigen wir einen Verweis auf den DOM-Knoten des Eingabefelds. Svelte bietet eine Möglichkeit, dies mit der Direktive <code>bind:this={dom_node}</code> zu tun. Wenn angegeben, sobald die Komponente montiert ist und der DOM-Knoten erstellt wird, weist Svelte der angegebenen Variablen einen Verweis auf den DOM-Knoten zu.</p> <p>Wir werden eine <code>nameEl</code>-Variable erstellen und sie mit <code>bind:this={nameEl}</code> an das Eingabefeld binden. Dann werden wir nach dem Hinzufügen des neuen To-Dos innerhalb von <code>addTodo()</code> <code>nameEl.focus()</code> aufrufen, um das <code><input></code>-Feld erneut zu fokussieren. Dasselbe werden wir tun, wenn der Nutzer die <kbd>Escape</kbd>-Taste drückt, mit der <code>onCancel()</code>-Funktion.</p> <p>Aktualisieren Sie die Inhalte von <code>NewTodo.svelte</code> wie folgt:</p> <div class="code-example"><div class="example-header"><span class="language-name">svelte</span></div><pre class="brush: svelte notranslate"><code><script> import { createEventDispatcher } from 'svelte'; const dispatch = createEventDispatcher(); let name = ''; let nameEl; // reference to the name input DOM node const addTodo = () => { dispatch('addTodo', name); name = ''; nameEl.focus(); // give focus to the name input } const onCancel = () => { name = ''; nameEl.focus(); // give focus to the name input } </script> <form on:submit|preventDefault={addTodo} on:keydown={(e) => e.key === 'Escape' && onCancel()}> <h2 class="label-wrapper"> <label for="todo-0" class="label__lg">What needs to be done?</label> </h2> <input bind:value={name} bind:this={nameEl} type="text" id="todo-0" autoComplete="off" class="input input__lg" /> <button type="submit" disabled={!name} class="btn btn__primary btn__lg">Add</button> </form> </code></pre></div> <p>Probieren Sie die App aus: Geben Sie einen neuen To-Do-Namen in das <code><input></code>-Feld ein, drücken Sie <kbd>tab</kbd>, um den Fokus auf die <em>Hinzufügen</em>-Schaltfläche zu legen, und dann drücken Sie <kbd>Enter</kbd> oder <kbd>Escape</kbd>, um zu sehen, wie das Eingabefeld den Fokus zurückerlangt.</p></div></section><section aria-labelledby="automatisches_fokussieren_unseres_eingabefelds"><h3 id="automatisches_fokussieren_unseres_eingabefelds"><a href="#automatisches_fokussieren_unseres_eingabefelds">Automatisches Fokussieren unseres Eingabefelds</a></h3><div class="section-content"><p>Die nächste Funktion wird unserem <code>NewTodo</code>-Komponente ein <code>autofocus</code>-Prop hinzufügen, um zu ermöglichen, dass das <code><input></code>-Feld beim Laden der Seite fokussiert wird.</p> <ol> <li> <p>Unser erster Versuch ist wie folgt: Fügen wir das <code>autofocus</code>-Prop hinzu und rufen Sie einfach <code>nameEl.focus()</code> aus dem <code><script></code>-Block auf. Aktualisieren Sie den ersten Teil des <code><script></code>-Abschnitts von <code>NewTodo.svelte</code> (die ersten vier Zeilen) so, dass er so aussieht:</p> <div class="code-example"><div class="example-header"><span class="language-name">svelte</span></div><pre class="brush: svelte notranslate"><code><script> import { createEventDispatcher } from 'svelte'; const dispatch = createEventDispatcher(); export let autofocus = false; let name = ''; let nameEl; // reference to the name input DOM node if (autofocus) nameEl.focus(); </code></pre></div> </li> <li> <p>Gehen Sie jetzt zurück zur <code>Todos</code>-Komponente und übergeben Sie das <code>autofocus</code>-Prop in den <code><NewTodo></code>-Komponentenaufruf, wie folgt:</p> <div class="code-example"><div class="example-header"><span class="language-name">svelte</span></div><pre class="brush: svelte notranslate"><code> <NewTodo autofocus on:addTodo={(e) => addTodo(e.detail)} /> </code></pre></div> </li> <li> <p>Wenn Sie Ihre App jetzt ausprobieren, werden Sie sehen, dass die Seite jetzt leer ist und in Ihrer DevTools-Webkonsole eine Fehlermeldung erscheint, die etwa lautet: <code>TypeError: nameEl is undefined</code>.</p> </li> </ol> <p>Um zu verstehen, was hier passiert, sprechen wir mehr über den <a href="https://learn.svelte.dev/tutorial/onmount" class="external" target="_blank">Komponentenlebenszyklus</a>, den wir bereits früher erwähnt haben.</p></div></section><section aria-labelledby="komponentenlebenszyklus_und_die_onmount-funktion"><h2 id="komponentenlebenszyklus_und_die_onmount-funktion"><a href="#komponentenlebenszyklus_und_die_onmount-funktion">Komponentenlebenszyklus und die <code>onMount()</code>-Funktion</a></h2><div class="section-content"><p>Wenn eine Komponente instanziiert wird, führt Svelte den Initialisierungscode (d. h. den <code><script></code>-Abschnitt der Komponente) aus. Aber in diesem Moment sind alle Knoten, die die Komponente ausmachen, noch nicht am DOM angebracht; tatsächlich existieren sie noch nicht einmal.</p> <p>Also, wie können Sie wissen, wann die Komponente bereits erstellt und am DOM montiert ist? Die Antwort ist, dass jede Komponente einen Lebenszyklus hat, der beginnt, wenn sie erstellt wird, und endet, wenn sie zerstört wird. Es gibt eine Handvoll Funktionen, die es Ihnen ermöglichen, Code zu entscheidenden Momenten während dieses Lebenszyklus auszuführen.</p> <p>Diejenige, die Sie am häufigsten verwenden werden, ist <code>onMount()</code>, die es uns ermöglicht, einen Rückruf auszuführen, sobald die Komponente am DOM montiert ist. Lassen Sie uns das ausprobieren und sehen, was mit der <code>nameEl</code>-Variablen passiert.</p> <ol> <li> <p>Fügen Sie zu Beginn des <code><script></code>-Bereichs von <code>NewTodo.svelte</code> die folgende Zeile hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import { onMount } from "svelte"; </code></pre></div> </li> <li> <p>Und diese Zeilen am Ende:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>console.log("initializing:", nameEl); onMount(() => { console.log("mounted:", nameEl); }); </code></pre></div> </li> <li> <p>Entfernen Sie nun die Zeile <code>if (autofocus) nameEl.focus()</code>, um den Fehler zu vermeiden, den wir zuvor gesehen haben.</p> </li> <li> <p>Die App wird jetzt wieder funktionieren und Sie sehen im Konsole:</p> <pre class="brush: plain notranslate">initializing: undefined mounted: <input id="todo-0" class="input input__lg" type="text" autocomplete="off"> </pre> <p>Wie Sie sehen können, ist während der Komponenteninitialisierung <code>nameEl</code> undefiniert, was Sinn macht, da der <code><input></code>-Knoten noch nicht existiert. Nachdem die Komponente montiert wurde, weist Svelte der <code>nameEl</code>-Variablen dank der <code>bind:this={nameEl}</code>-Direktive einen Verweis auf den <code><input></code>-DOM-Knoten zu.</p> </li> <li> <p>Um die Autofokus-Funktionalität zum Laufen zu bringen, ersetzen Sie den vorherigen <code>console.log()</code>/<code>onMount()</code>-Block, den Sie hinzugefügt haben, durch dies:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>onMount(() => autofocus && nameEl.focus()); // if autofocus is true, we run nameEl.focus() </code></pre></div> </li> <li> <p>Gehen Sie erneut zu Ihrer App und Sie werden nun sehen, dass das <code><input></code>-Feld beim Seitenaufruf fokussiert ist.</p> </li> </ol> <div class="notecard note"> <p><strong>Hinweis:</strong> Sie können sich die anderen <a href="https://svelte.dev/docs/svelte" class="external" target="_blank">Lebenszyklusfunktionen in der Svelte-Dokumentation</a> ansehen und sie im <a href="https://learn.svelte.dev/tutorial/onmount" class="external" target="_blank">interaktiven Tutorial</a> in Aktion sehen.</p> </div></div></section><section aria-labelledby="warten_auf_die_aktualisierung_des_dom_mit_der_tick_funktion"><h2 id="warten_auf_die_aktualisierung_des_dom_mit_der_tick_funktion"><a href="#warten_auf_die_aktualisierung_des_dom_mit_der_tick_funktion">Warten auf die Aktualisierung des DOM mit der <code>tick()</code> Funktion</a></h2><div class="section-content"><p>Nun kümmern wir uns um die Details des Fokusmanagements in der <code>Todo</code>-Komponente. Zuallererst möchten wir, dass ein <code>Todo</code>-Komponente das Bearbeitungs-<code><input></code> aktiviert, wenn wir den Bearbeitungsmodus betreten, indem wir seine <em>Bearbeiten</em>-Schaltfläche drücken. Auf die gleiche Weise, wie wir es zuvor gesehen haben, erstellen wir eine <code>nameEl</code>-Variable innerhalb von <code>Todo.svelte</code> und rufen <code>nameEl.focus()</code> auf, nachdem wir die <code>editing</code>-Variable auf <code>true</code> gesetzt haben.</p> <ol> <li> <p>Öffnen Sie die Datei <code>components/Todo.svelte</code> und fügen Sie eine <code>nameEl</code>-Variablendeklaration direkt unter Ihre <code>editing</code>- und <code>name</code>-Deklarationen hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let nameEl; // reference to the name input DOM node </code></pre></div> </li> <li> <p>Aktualisieren Sie jetzt Ihre <code>onEdit()</code>-Funktion wie folgt:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function onEdit() { editing = true; // enter editing mode nameEl.focus(); // set focus to name input } </code></pre></div> </li> <li> <p>Und schließlich binden Sie <code>nameEl</code> an das <code><input></code>-Feld, indem Sie es folgendermaßen aktualisieren:</p> <div class="code-example"><div class="example-header"><span class="language-name">svelte</span></div><pre class="brush: svelte notranslate"><code><input bind:value={name} bind:this={nameEl} type="text" id="todo-{todo.id}" autocomplete="off" class="todo-text" /> </code></pre></div> </li> <li> <p>Wenn Sie jedoch die aktualisierte App ausprobieren, erhalten Sie einen Fehler, der etwa so lautet: "TypeError: nameEl is undefined" in der Konsole, wenn Sie die <em>Bearbeiten</em>-Schaltfläche eines To-Dos drücken.</p> </li> </ol> <p>Also, was passiert hier? Wenn Sie einen Komponentenstatus in Svelte aktualisieren, aktualisiert es das DOM nicht sofort. Stattdessen wartet es bis zum nächsten Microtask, um zu sehen, ob es noch andere Änderungen gibt, die angewendet werden müssen, einschließlich in anderen Komponenten. Das tut es, um unnötige Arbeit zu vermeiden und dem Browser zu ermöglichen, die Dinge effizienter zu batchen.</p> <p>In diesem Fall, wenn <code>editing</code> <code>false</code> ist, ist das Bearbeitungs-<code><input></code> nicht sichtbar, weil es nicht im DOM existiert. Innerhalb der <code>onEdit()</code>-Funktion setzen wir <code>editing = true</code> und versuchen sofort darauf, auf die <code>nameEl</code>-Variable zuzugreifen und <code>nameEl.focus()</code> auszuführen. Das Problem hier ist, dass Svelte das DOM noch nicht aktualisiert hat.</p> <p>Eine Möglichkeit, dieses Problem zu lösen, besteht darin, <a href="/de/docs/Web/API/Window/setTimeout"><code>setTimeout()</code></a> zu verwenden, um den Aufruf von <code>nameEl.focus()</code> bis zum nächsten Ereigniszyklus zu verzögern und Svelte die Möglichkeit zu geben, das DOM zu aktualisieren.</p> <p>Versuchen Sie dies jetzt:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function onEdit() { editing = true; // enter editing mode setTimeout(() => nameEl.focus(), 0); // asynchronous call to set focus to name input } </code></pre></div> <p>Die obige Lösung funktioniert, ist aber eher unelegant. Svelte bietet einen besseren Weg, um mit diesen Fällen umzugehen. Die <a href="https://learn.svelte.dev/tutorial/tick" class="external" target="_blank"><code>tick()</code>-Funktion</a> gibt ein Promise zurück, das aufgelöst wird, sobald alle ausstehenden Statusänderungen auf das DOM angewendet wurden (oder sofort, wenn keine ausstehenden Statusänderungen vorliegen). Versuchen wir es jetzt.</p> <ol> <li> <p>Importieren Sie zunächst <code>tick</code> am Anfang des <code><script></code>-Bereichs neben Ihrem bestehenden Import:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import { tick } from "svelte"; </code></pre></div> </li> <li> <p>Rufen Sie als Nächstes <code>tick()</code> mit <a href="/de/docs/Web/JavaScript/Reference/Operators/await"><code>await</code></a> von einer <a href="/de/docs/Web/JavaScript/Reference/Statements/async_function">asynchronen Funktion</a> auf; aktualisieren Sie <code>onEdit()</code> wie folgt:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>async function onEdit() { editing = true; // enter editing mode await tick(); nameEl.focus(); } </code></pre></div> </li> <li> <p>Wenn Sie es jetzt ausprobieren, werden Sie sehen, dass alles wie erwartet funktioniert.</p> </li> </ol> <div class="notecard note"> <p><strong>Hinweis:</strong> Um ein weiteres Beispiel der Verwendung von <code>tick()</code> zu sehen, besuchen Sie das <a href="https://learn.svelte.dev/tutorial/tick" class="external" target="_blank">Svelte-Tutorial</a>.</p> </div></div></section><section aria-labelledby="hinzufügen_von_funktionalität_zu_html-elementen_mit_der_useaction-direktive"><h2 id="hinzufügen_von_funktionalität_zu_html-elementen_mit_der_useaction-direktive"><a href="#hinzufügen_von_funktionalität_zu_html-elementen_mit_der_useaction-direktive">Hinzufügen von Funktionalität zu HTML-Elementen mit der <code>use:action</code>-Direktive</a></h2><div class="section-content"><p>Als nächstes möchten wir, dass der Name <code>input</code> automatisch den gesamten Text bei Fokus selektiert. Und wir möchten dies auf eine solche Weise entwickeln, dass es problemlos auf jedes HTML-<code><input></code> wiederverwendet und auf deklarativer Weise angewendet werden kann. Wir werden diese Anforderung als Vorwand nutzen, um ein sehr mächtiges Feature zu zeigen, das Svelte uns bietet, um Funktionalität zu regulären HTML-Elementen hinzuzufügen: <a href="https://svelte.dev/docs/svelte-action" class="external" target="_blank">Actions</a>.</p> <p>Um den Text eines DOM-Input-Knotens auszuwählen, müssen wir <a href="/de/docs/Web/API/HTMLInputElement/select"><code>select()</code></a> aufrufen. Um diese Funktion jedes Mal aufzurufen, wenn der Knoten den Fokus erhält, brauchen wir einen Event-Listener wie diesen:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>node.addEventListener("focus", (event) => node.select()); </code></pre></div> <p>Und, um Speicherlecks zu vermeiden, sollten wir auch die Funktion <a href="/de/docs/Web/API/EventTarget/removeEventListener"><code>removeEventListener()</code></a> aufrufen, wenn der Knoten zerstört wird.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> All dies ist nur Standard-WebAPI-Funktionalität; nichts davon ist spezifisch für Svelte.</p> </div> <p>Wir könnten all dies in unserer <code>Todo</code>-Komponente erreichen, wann immer wir das <code><input></code> zum DOM hinzufügen oder entfernen, aber wir müssten sehr vorsichtig sein, den Event-Listener nach dem Hinzufügen des Knotens zum DOM hinzuzufügen und den Listener zu entfernen, bevor der Knoten aus dem DOM entfernt wird. Darüber hinaus wäre unsere Lösung nicht sehr wiederverwendbar.</p> <p>Hier kommen Svelte-Actions ins Spiel. Im Wesentlichen lassen sie uns eine Funktion ausführen, wann immer ein Element dem DOM hinzugefügt wurde, und nachdem es vom DOM entfernt wurde.</p> <p>In unserem unmittelbaren Anwendungsfall werden wir eine Funktion namens <code>selectOnFocus()</code> definieren, die einen Knoten als Parameter empfängt. Die Funktion wird einen Event-Listener zu diesem Knoten hinzufügen, sodass wann immer es den Fokus erhält, es den Text auswählt. Dann wird es ein Objekt mit einer <code>destroy</code>-Eigenschaft zurückgeben. Die <code>destroy</code>-Eigenschaft ist das, was Svelte nach dem Entfernen des Knotens aus dem DOM ausführt. Hier werden wir den Listener entfernen, um sicherzustellen, dass wir kein Speicherleck hinterlassen.</p> <ol> <li> <p>Lassen Sie uns die Funktion <code>selectOnFocus()</code> erstellen. Fügen Sie Folgendes am Ende des <code><script></code>-Abschnitts von <code>Todo.svelte</code> hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function selectOnFocus(node) { if (node && typeof node.select === "function") { // make sure node is defined and has a select() method const onFocus = (event) => node.select(); // event handler node.addEventListener("focus", onFocus); // when node gets focus call onFocus() return { destroy: () => node.removeEventListener("focus", onFocus), // this will be executed when the node is removed from the DOM }; } } </code></pre></div> </li> <li> <p>Jetzt müssen wir dem <code><input></code> sagen, dass es diese Funktion mit der <a href="https://svelte.dev/docs/element-directives#use-action" class="external" target="_blank"><code>use:action</code></a>-Direktive verwenden soll:</p> <div class="code-example"><div class="example-header"><span class="language-name">svelte</span></div><pre class="brush: svelte notranslate"><code><input use:selectOnFocus /> </code></pre></div> <p>Mit dieser Direktive sagen wir Svelte, dass es diese Funktion ausführen soll, indem es den DOM-Knoten des <code><input></code> als Parameter übergibt, sobald die Komponente am DOM montiert ist. Es wird auch für die Ausführung der <code>destroy</code>-Funktion verantwortlich sein, wenn die Komponente vom DOM entfernt wird. Damit erledigt die <code>use</code>-Direktive den Komponentenlebenszyklus für uns.</p> <p>In unserem Fall würde unser <code><input></code> so enden: Aktualisieren Sie das erste Label/Input-Paar der Komponente (innerhalb der Bearbeitungsvorlage) wie folgt:</p> <div class="code-example"><div class="example-header"><span class="language-name">svelte</span></div><pre class="brush: svelte notranslate"><code><label for="todo-{todo.id}" class="todo-label">New name for '{todo.name}'</label> <input bind:value={name} bind:this={nameEl} use:selectOnFocus type="text" id="todo-{todo.id}" autocomplete="off" class="todo-text" /> </code></pre></div> </li> <li> <p>Probieren Sie es aus. Gehen Sie zu Ihrer App, drücken Sie die <em>Bearbeiten</em>-Schaltfläche eines To-Dos, drücken Sie dann <kbd>Tab</kbd>, um den Fokus vom <code><input></code> wegzunehmen. Klicken Sie nun auf das <code><input></code>, und Sie werden sehen, dass der gesamte Eingabetext ausgewählt wird.</p> </li> </ol></div></section><section aria-labelledby="die_aktion_wiederverwendbar_machen"><h3 id="die_aktion_wiederverwendbar_machen"><a href="#die_aktion_wiederverwendbar_machen">Die Aktion wiederverwendbar machen</a></h3><div class="section-content"><p>Machen wir diese Funktion nun wirklich über Komponenten hinweg wiederverwendbar. <code>selectOnFocus()</code> ist einfach eine Funktion ohne Abhängigkeit zur <code>Todo.svelte</code>-Komponente, sodass wir sie einfach in eine Datei extrahieren und von dort aus verwenden können.</p> <ol> <li> <p>Erstellen Sie eine neue Datei, <code>actions.js</code>, im <code>src</code>-Ordner.</p> </li> <li> <p>Geben Sie ihr den folgenden Inhalt:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>export function selectOnFocus(node) { if (node && typeof node.select === "function") { // make sure node is defined and has a select() method const onFocus = (event) => node.select(); // event handler node.addEventListener("focus", onFocus); // when node gets focus call onFocus() return { destroy: () => node.removeEventListener("focus", onFocus), // this will be executed when the node is removed from the DOM }; } } </code></pre></div> </li> <li> <p>Jetzt importieren Sie es von innerhalb <code>Todo.svelte</code>; fügen Sie die folgende Importanweisung direkt unter den anderen hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import { selectOnFocus } from "../actions.js"; </code></pre></div> </li> <li> <p>Und entfernen Sie die <code>selectOnFocus()</code>-Definition aus <code>Todo.svelte</code>, da wir sie dort nicht mehr benötigen.</p> </li> </ol></div></section><section aria-labelledby="unsere_aktion_wiederverwendbar_machen"><h3 id="unsere_aktion_wiederverwendbar_machen"><a href="#unsere_aktion_wiederverwendbar_machen">Unsere Aktion wiederverwendbar machen</a></h3><div class="section-content"><p>Um die Wiederverwendbarkeit unserer Aktion zu demonstrieren, verwenden wir sie in <code>NewTodo.svelte</code>.</p> <ol> <li> <p>Importieren Sie <code>selectOnFocus()</code> aus <code>actions.js</code> in diese Datei ebenfalls, wie zuvor:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import { selectOnFocus } from "../actions.js"; </code></pre></div> </li> <li> <p>Fügen Sie die <code>use:selectOnFocus</code>-Direktive zu dem <code><input></code> hinzu, so:</p> <div class="code-example"><div class="example-header"><span class="language-name">svelte</span></div><pre class="brush: svelte notranslate"><code><input bind:value={name} bind:this={nameEl} use:selectOnFocus type="text" id="todo-0" autocomplete="off" class="input input__lg" /> </code></pre></div> </li> </ol> <p>Mit wenigen Codezeilen können wir Funktionalität zu regulären HTML-Elementen auf eine sehr wiederverwendbare und deklarative Weise hinzufügen. Es braucht nur ein <code>import</code> und eine kurze Direktive wie <code>use:selectOnFocus</code>, die klar ihren Zweck beschreibt. Und das erreichen wir ohne die Notwendigkeit, ein benutzerdefiniertes Wrapper-Element wie <code>TextInput</code>, <code>MyInput</code> oder Ähnliches zu erstellen. Darüber hinaus können Sie einem Element so viele <code>use:action</code>-Direktiven hinzufügen, wie Sie möchten.</p> <p>Auch mussten wir uns nicht mit <code>onMount()</code>, <code>onDestroy()</code> oder <code>tick()</code> auseinandersetzen — die <code>use</code>-Direktive kümmert sich für uns um den Komponentenlebenszyklus.</p></div></section><section aria-labelledby="weitere_verbesserungen_von_aktionen"><h3 id="weitere_verbesserungen_von_aktionen"><a href="#weitere_verbesserungen_von_aktionen">Weitere Verbesserungen von Aktionen</a></h3><div class="section-content"><p>Im vorherigen Abschnitt, während wir mit den <code>Todo</code>-Komponenten arbeiteten, mussten wir mit <code>bind:this</code>, <code>tick()</code>, und <code>async</code>-Funktionen umgehen, nur um dem <code><input></code> den Fokus zu geben, sobald es dem DOM hinzugefügt wurde.</p> <ol> <li> <p>So können wir es stattdessen mit Aktionen implementieren:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const focusOnInit = (node) => node && typeof node.focus === "function" && node.focus(); </code></pre></div> </li> <li> <p>Und dann benötigen wir in unserer Markup nur eine weitere <code>use:</code>-Direktive:</p> <div class="code-example"><div class="example-header"><span class="language-name">svelte</span></div><pre class="brush: svelte notranslate"><code><input bind:value={name} use:selectOnFocus use:focusOnInit /> </code></pre></div> </li> <li> <p>Unsere <code>onEdit()</code>-Funktion kann jetzt viel einfacher sein:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function onEdit() { editing = true; // enter editing mode } </code></pre></div> </li> </ol> <p>Als letztes Beispiel, bevor wir weitermachen, gehen wir zurück zu unserer <code>Todo.svelte</code>-Komponente und geben der <em>Bearbeiten</em>-Schaltfläche den Fokus, nachdem der Benutzer auf <em>Speichern</em> oder <em>Abbrechen</em> gedrückt hat.</p> <p>Wir könnten versuchen, einfach unsere <code>focusOnInit</code>-Aktion erneut zu verwenden, indem wir <code>use:focusOnInit</code> zur <em>Bearbeiten</em>-Schaltfläche hinzufügen. Aber dann würden wir einen subtilen Fehler einführen. Wenn Sie ein neues To-Do hinzufügen, wird der Fokus auf die <em>Bearbeiten</em>-Schaltfläche des kürzlich hinzugefügten To-Dos gelegt. Das passiert, weil die <code>focusOnInit</code>-Aktion ausgeführt wird, wenn die Komponente erstellt wird.</p> <p>Das ist nicht das, was wir wollen — wir wollen, dass die <em>Bearbeiten</em>-Schaltfläche nur dann den Fokus erhält, wenn der Benutzer auf <em>Speichern</em> oder <em>Abbrechen</em> gedrückt hat.</p> <ol> <li> <p>Gehen Sie zurück zu Ihrer <code>Todo.svelte</code>-Datei.</p> </li> <li> <p>Zunächst erstellen wir ein Flag namens <code>editButtonPressed</code> und initialisieren es mit <code>false</code>. Fügen Sie dies direkt unter Ihren anderen Variablendefinitionen hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let editButtonPressed = false; // track if edit button has been pressed, to give focus to it after cancel or save </code></pre></div> </li> <li> <p>Als Nächstes modifizieren wir die Funktionalität der <em>Bearbeiten</em>-Schaltfläche, um dieses Flag zu speichern, und erstellen die Aktion dafür. Aktualisieren Sie die <code>onEdit()</code>-Funktion wie folgt:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function onEdit() { editButtonPressed = true; // user pressed the Edit button, focus will come back to the Edit button editing = true; // enter editing mode } </code></pre></div> </li> <li> <p>Darunter fügen Sie die folgende Definition für <code>focusEditButton()</code> hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const focusEditButton = (node) => editButtonPressed && node.focus(); </code></pre></div> </li> <li> <p>Schließlich <code>use</code> wir die <code>focusEditButton</code>-Aktion auf der <em>Bearbeiten</em>-Schaltfläche, wie folgt:</p> <div class="code-example"><div class="example-header"><span class="language-name">svelte</span></div><pre class="brush: svelte notranslate"><code><button type="button" class="btn" on:click={onEdit} use:focusEditButton> Edit<span class="visually-hidden"> {todo.name}</span> </button> </code></pre></div> </li> <li> <p>Gehen Sie zurück und probieren Sie Ihre App erneut aus. An diesem Punkt wird jedes Mal, wenn die <em>Bearbeiten</em>-Schaltfläche dem DOM hinzugefügt wird, die <code>focusEditButton</code>-Aktion ausgeführt, aber es wird nur dann dem Knopf den Fokus geben, wenn das <code>editButtonPressed</code>-Flag <code>true</code> ist.</p> </li> </ol> <div class="notecard note"> <p><strong>Hinweis:</strong> Wir haben hier nur die Oberfläche von Aktionen gekratzt. Aktionen können auch reaktive Parameter haben, und Svelte lässt uns erkennen, wenn sich einer dieser Parameter ändert. So können wir Funktionalität hinzufügen, die sich gut in das reaktive System von Svelte einfügt. Für eine detailliertere Einführung in Aktionen sollten Sie das <a href="https://learn.svelte.dev/tutorial/actions" class="external" target="_blank">interaktive Svelte-Tutorial</a> oder die <a href="https://svelte.dev/docs/element-directives#use-action" class="external" target="_blank">Svelte <code>use:action</code>-Dokumentation</a> in Betracht ziehen.</p> </div></div></section><section aria-labelledby="komponentenbindung_methoden_und_variablen_von_komponenten_mit_bindthiscomponent-direktive_bereitstellen"><h2 id="komponentenbindung_methoden_und_variablen_von_komponenten_mit_bindthiscomponent-direktive_bereitstellen"><a href="#komponentenbindung_methoden_und_variablen_von_komponenten_mit_bindthiscomponent-direktive_bereitstellen">Komponentenbindung: Methoden und Variablen von Komponenten mit <code>bind:this={component}</code>-Direktive bereitstellen</a></h2><div class="section-content"><p>Es gibt noch eine Barrierefreiheitsproblematik. Wenn der Nutzer die <em>Löschen</em>-Schaltfläche drückt, verschwindet der Fokus.</p> <p>Die letzte Funktion, die wir in diesem Artikel betrachten werden, besteht darin, dass der Fokus auf die Statusüberschrift gesetzt wird, nachdem ein To-Do gelöscht wurde.</p> <p>Warum die Statusüberschrift? In diesem Fall wurde das Element, das den Fokus hatte, gelöscht, daher gibt es keinen klaren Kandidaten, um den Fokus zu erhalten. Wir haben die Statusüberschrift gewählt, weil sie sich in der Nähe der To-Do-Liste befindet und eine Möglichkeit ist, visuelles Feedback über das Entfernen der Aufgabe zu geben sowie anzuzeigen, was für Screenreader-Benutzer passiert ist.</p> <p>Zuerst werden wir die Statusüberschrift in ihre eigene Komponente extrahieren.</p> <ol> <li> <p>Erstellen Sie eine neue Datei, <code>components/TodosStatus.svelte</code>.</p> </li> <li> <p>Fügen Sie die folgenden Inhalte hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">svelte</span></div><pre class="brush: svelte notranslate"><code><script> export let todos; $: totalTodos = todos.length; $: completedTodos = todos.filter((todo) => todo.completed).length; </script> <h2 id="list-heading"> {completedTodos} out of {totalTodos} items completed </h2> </code></pre></div> </li> <li> <p>Importieren Sie die Datei am Anfang von <code>Todos.svelte</code>, indem Sie die folgende Importanweisung unter den anderen hinzufügen:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import TodosStatus from "./TodosStatus.svelte"; </code></pre></div> </li> <li> <p>Ersetzen Sie die <code><h2></code>-Statusüberschrift in <code>Todos.svelte</code> durch einen Aufruf der <code>TodosStatus</code>-Komponente und übergeben <code>todos</code> als Prop, so:</p> <div class="code-example"><div class="example-header"><span class="language-name">svelte</span></div><pre class="brush: svelte notranslate"><code><TodosStatus {todos} /> </code></pre></div> </li> <li> <p>Sie können auch ein wenig aufräumen, indem Sie die <code>totalTodos</code>- und <code>completedTodos</code>-Variablen aus <code>Todos.svelte</code> entfernen. Entfernen Sie einfach die Zeilen <code>$: totalTodos = …</code> und <code>$: completedTodos = …</code> und entfernen Sie auch den Verweis auf <code>totalTodos</code>, wenn wir <code>newTodoId</code> berechnen, und verwenden Sie stattdessen <code>todos.length</code>. Ersetzen Sie dazu den Block, der mit <code>let newTodoId</code> beginnt, durch diesen:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>$: newTodoId = todos.length ? Math.max(...todos.map((t) => t.id)) + 1 : 1; </code></pre></div> </li> <li> <p>Alles funktioniert wie erwartet — wir haben gerade das letzte Stück Markup in seine eigene Komponente extrahiert.</p> </li> </ol> <p>Jetzt müssen wir einen Weg finden, um der <code><h2></code>-Statusbeschreibung nach dem Entfernen eines To-Dos den Fokus zu geben.</p> <p>Bisher haben wir gesehen, wie man Informationen über <code>props</code> an eine Komponente sendet und wie eine Komponente über Ereignisse oder bidirektionale Datenbindung mit ihrem Elternteil kommunizieren kann. Das Kind könnte eine Referenz auf den <code><h2></code>-Knoten mit <code>using bind:this={dom_node}</code> erhalten und ihn durch bidirektionale Datenbindung nach außen freigeben. Aber das würde die Komponentenkapselung brechen; den Fokus darauf zu setzen, sollte seine eigene Verantwortung sein.</p> <p>Wir benötigen also, dass die <code>TodosStatus</code>-Komponente eine Methode bereitstellt, die Ihr Elternteil aufrufen kann, um den Fokus darauf zu legen. Es ist ein sehr häufiges Szenario, dass eine Komponente benötigt wird, um ein Verhalten oder Informationen für den Nutzer bereitzustellen; lassen Sie uns sehen, wie man dies mit Svelte erreichen kann.</p> <p>Wir haben bereits gesehen, dass Svelte <code>export let varname = …</code> verwendet, um <a href="https://svelte.dev/docs/svelte-components#script-1-export-creates-a-component-prop" class="external" target="_blank">Props zu deklarieren</a>. Aber wenn Sie statt <code>let</code> ein <code>const</code>, <code>class</code> oder <code>function</code> exportieren, ist es von außen schreibgeschützt. Funktionsausdrücke sind jedoch gültige Props. Im folgenden Beispiel sind die ersten drei Deklarationen Props und der Rest sind exportierte Werte:</p> <div class="code-example"><div class="example-header"><span class="language-name">svelte</span></div><pre class="brush: svelte notranslate"><code><script> export let bar = "optional default initial value"; // prop export let baz = undefined; // prop export let format = (n) => n.toFixed(2); // prop // these are readonly export const thisIs = "readonly"; // read-only export export function greet(name) { // read-only export alert(`Hello, ${name}!`); } export const greet = (name) => alert(`Hello, ${name}!`); // read-only export </script> </code></pre></div> <p>Mit dem im Hinterkopf, lassen Sie uns zu unserem Anwendungsfall zurückkehren. Wir erstellen eine Funktion namens <code>focus()</code>, die der <code><h2></code>-Überschrift den Fokus gibt. Dafür benötigen wir eine <code>headingEl</code>-Variable, um den Referenz auf den DOM-Knoten zu halten, und wir müssen es an das <code><h2></code>-Element mit <code>bind:this={headingEl}</code> binden. Unsere Fokusmethode wird einfach <code>headingEl.focus()</code> ausführen.</p> <ol> <li> <p>Aktualisieren Sie die Inhalte von <code>TodosStatus.svelte</code> wie folgt:</p> <div class="code-example"><div class="example-header"><span class="language-name">svelte</span></div><pre class="brush: svelte notranslate"><code><script> export let todos; $: totalTodos = todos.length; $: completedTodos = todos.filter((todo) => todo.completed).length; let headingEl; export function focus() { // shorter version: export const focus = () => headingEl.focus() headingEl.focus(); } </script> <h2 id="list-heading" bind:this={headingEl} tabindex="-1"> {completedTodos} out of {totalTodos} items completed </h2> </code></pre></div> <p>Beachten Sie, dass wir dem <code><h2></code> ein <code>tabindex</code>-Attribut hinzugefügt haben, um es zu ermöglichen, dass das Element den Fokus programmatisch erhält.</p> <p>Wie wir bereits gesehen haben, gibt uns die Verwendung der <code>bind:this={headingEl}</code>-Direktive einen Verweis auf den DOM-Knoten in der Variablen <code>headingEl</code>. Dann verwenden wir <code>export function focus()</code>, um eine Funktion bereitzustellen, die der <code><h2></code>-Überschrift den Fokus gibt.</p> <p>Wie können wir diese exportierten Werte von dem Elternteil aus erreichen? Genauso wie Sie mit der <code>bind:this={dom_node}</code>-Direktive DOM-Elemente binden können, können Sie auch Instanzen von Komponenten selbst mit <code>bind:this={component}</code> binden. Wenn Sie also <code>bind:this</code> bei einem HTML-Element verwenden, erhalten Sie eine Referenz auf den DOM-Knoten, und wenn Sie es bei einer Svelte-Komponente machen, erhalten Sie eine Referenz auf die Instanz dieser Komponente.</p> </li> <li> <p>Um an die Instanz von <code>TodosStatus</code> zu binden, erstellen wir zuerst eine <code>todosStatus</code>-Variable in <code>Todos.svelte</code>. Fügen Sie die folgende Zeile unter Ihren <code>import</code>-Anweisungen hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>let todosStatus; // reference to TodosStatus instance </code></pre></div> </li> <li> <p>Fügen Sie als Nächstes eine <code>bind:this={todosStatus}</code>-Direktive dem Aufruf hinzu, wie folgt:</p> <div class="code-example"><div class="example-header"><span class="language-name">svelte</span></div><pre class="brush: svelte notranslate"><code> <TodosStatus bind:this={todosStatus} {todos} /> </code></pre></div> </li> <li> <p>Jetzt können wir die <code>exportiert focus()</code>-Methode aus unserer <code>removeTodo()</code>-Funktion aufrufen:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function removeTodo(todo) { todos = todos.filter((t) => t.id !== todo.id); todosStatus.focus(); // give focus to status heading } </code></pre></div> </li> <li> <p>Gehen Sie zurück zu Ihrer App. Jetzt, wenn Sie ein To-Do löschen, wird die Statusüberschrift fokussiert. Dies ist nützlich, um die Änderung der Anzahl der To-Dos sowohl für sehende Benutzer als auch für Benutzer von Screenreadern hervorzuheben.</p> </li> </ol> <div class="notecard note"> <p><strong>Hinweis:</strong> Sie fragen sich vielleicht, warum wir eine neue Variable für die Komponentenbindung deklarieren müssen. Warum können wir <code>TodosStatus.focus()</code> nicht einfach aufrufen? Sie könnten mehrere Instanzen von <code>TodosStatus</code> aktiv haben, sodass Sie einen Weg benötigen, um auf jede spezifische Instanz zu verweisen. Deshalb müssen Sie eine Variable festlegen, um jede spezifische Instanz zu binden.</p> </div></div></section><section aria-labelledby="der_bisherige_code"><h2 id="der_bisherige_code"><a href="#der_bisherige_code">Der bisherige Code</a></h2><div class="section-content"></div></section><section aria-labelledby="git_2"><h3 id="git_2"><a href="#git_2">Git</a></h3><div class="section-content"><p>Um den Stand des Codes zu sehen, wie er am Ende dieses Artikels sein sollte, greifen Sie auf Ihre Kopie unseres Repos auf diese Weise zu:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>cd mdn-svelte-tutorial/06-stores </code></pre></div> <p>Oder laden Sie direkt den Inhalt des Ordners herunter:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npx degit opensas/mdn-svelte-tutorial/06-stores </code></pre></div> <p>Denken Sie daran, <code>npm install && npm run dev</code> auszuführen, um Ihre App im Entwicklungsmodus zu starten.</p></div></section><section aria-labelledby="repl_2"><h3 id="repl_2"><a href="#repl_2">REPL</a></h3><div class="section-content"><p>Um den aktuellen Stand des Codes in einem REPL zu sehen, besuchen Sie:</p> <p><a href="https://svelte.dev/repl/d1fa84a5a4494366b179c87395940039?version=3.23.2" class="external" target="_blank">https://svelte.dev/repl/d1fa84a5a4494366b179c87395940039?version=3.23.2</a></p></div></section><section aria-labelledby="zusammenfassung"><h2 id="zusammenfassung"><a href="#zusammenfassung">Zusammenfassung</a></h2><div class="section-content"><p>In diesem Artikel haben wir alle erforderlichen Funktionen zu unserer App hinzugefügt und uns zusätzlich um mehrere Barrierefreiheits- und Usability-Probleme gekümmert. Wir haben auch unsere App in überschaubare Komponenten aufgeteilt, von denen jede eine eindeutige Verantwortung hat.</p> <p>In der Zwischenzeit haben wir einige fortgeschrittene Svelte-Techniken gesehen, wie:</p> <ul> <li>Umgang mit Reaktivitätsproblemen bei der Aktualisierung von Objekten und Arrays</li> <li>Arbeiten mit DOM-Knoten mit <code>bind:this={dom_node}</code> (DOM-Elementbindung)</li> <li>Verwendung der Komponentenlebenszyklusfunktion <code>onMount()</code></li> <li>Erzwingen, dass Svelte ausstehende Statusänderungen mit der <code>tick()</code>-Funktion auflöst</li> <li>Hinzufügen von Funktionalität zu HTML-Elementen auf eine wiederverwendbare und deklarative Weise mit der <code>use:action</code>-Direktive</li> <li>Zugriff auf Methoden der Komponente mit <code>bind:this={component}</code> (Komponentenbindung)</li> </ul> <p>Im nächsten Artikel werden wir sehen, wie man Stores verwendet, um zwischen Komponenten zu kommunizieren und wie man Animationen zu unseren Komponenten hinzufügt.</p> <ul class="prev-next"><li><a class="button secondary" href="/de/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_components"><span class="button-wrap"> Zurück </span></a></li><li><a class="button secondary" href="/de/docs/Learn_web_development/Core/Frameworks_libraries"><span class="button-wrap"> Übersicht: JavaScript-Frameworks und -Bibliotheken</span></a></li><li><a class="button secondary" href="/de/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_stores"><span class="button-wrap"> Weiter </span></a></li></ul></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>MDN-Feedback-Box</h2><fieldset class="feedback"><label>War diese Übersetzung hilfreich?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Ja</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>Nein</span></button></div></fieldset><p class="last-modified-date">Diese Seite wurde automatisch aus dem Englischen übersetzt.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/translated-content-de/blob/main/files/de/learn_web_development/core/frameworks_libraries/svelte_reactivity_lifecycle_accessibility/index.md?plain=1" title="Folder: de/learn_web_development/core/frameworks_libraries/svelte_reactivity_lifecycle_accessibility (Opens in a new tab)" target="_blank" rel="noopener noreferrer">Übersetzung auf GitHub anzeigen</a> • <a href="https://github.com/mdn/translated-content-de/issues/new?template=page-report-de.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fde%2Fdocs%2FLearn_web_development%2FCore%2FFrameworks_libraries%2FSvelte_reactivity_lifecycle_accessibility&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60de%2Flearn_web_development%2Fcore%2Fframeworks_libraries%2Fsvelte_reactivity_lifecycle_accessibility%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fde%2Fdocs%2FLearn_web_development%2FCore%2FFrameworks_libraries%2FSvelte_reactivity_lifecycle_accessibility%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fblob%2Fmain%2Ffiles%2Fde%2Flearn_web_development%2Fcore%2Fframeworks_libraries%2Fsvelte_reactivity_lifecycle_accessibility%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fcommit%2F452fe502cfb4c9a91c346af17370ecfb6a8bd17e%0A*+Document+last+modified%3A+2025-02-17T00%3A20%3A27.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Fehler mit dieser Übersetzung melden</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mastodon.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="137" height="32" fill="none" viewBox="0 0 267.431 62.607"><path fill="currentColor" d="m13.913 23.056 5.33 25.356h2.195l5.33-25.356h14.267v38.976h-7.578V29.694h-2.194l-7.264 32.337h-7.343L9.418 29.694H7.223v32.337H-.354V23.056Zm47.137 9.123c9.12 0 14.423 5.385 14.423 15.214s-5.33 15.214-14.423 15.214c-9.12 0-14.423-5.385-14.423-15.214 0-9.855 5.304-15.214 14.423-15.214m0 24.363c4.285 0 6.428-2.196 6.428-7.032v-4.287c0-4.836-2.143-7.032-6.428-7.032s-6.428 2.196-6.428 7.032v4.287c0 4.836 2.143 7.032 6.428 7.032m18.473-.157 15.47-18.01h-15.26v-5.647h24.352v5.646L88.616 56.385h15.704v5.646H79.523Zm29.318-23.657h11.183V62.03h-7.578V38.375h-3.632v-5.646zm3.605-9.672h7.578v5.646h-7.578zm13.17 0h11.21v38.976h-7.578v-33.33h-3.632zm16.801 0H153.6v38.976h-7.577v-33.33h-3.632v-5.646zm29.03 9.123c4.442 0 7.394 2.143 8.231 5.881h2.194v-5.332h9.276v5.646h-3.632v18.011h3.632v5.646h-4.442c-3.135 0-4.834-1.699-4.834-4.836V56.7h-2.194c-.81 3.738-3.789 5.881-8.23 5.881-6.978 0-11.916-5.829-11.916-15.214 0-9.384 4.938-15.187 11.915-15.187m2.3 24.363c4.284 0 6.192-2.196 6.192-7.032v-4.287c0-4.836-1.908-7.032-6.193-7.032-4.18 0-6.193 2.196-6.193 7.032v4.287c0 4.836 2.012 7.032 6.193 7.032m48.34 5.489h-7.577V0h7.577zm6.585-29.643h32.165v-2.196l-21.295-7.634v-6.143l21.295-7.633V6.588h-25.345V0h32.165v12.522l-17.35 5.881V20.6l17.35 5.882v12.521h-38.985zm0-25.801h6.794v6.796h-6.794z"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under <a href="/de/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/de/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_reactivity_lifecycle_accessibility","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_components\"><span class=\"button-wrap\"> Zurück </span></a></li><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries\"><span class=\"button-wrap\"> Übersicht: JavaScript-Frameworks und -Bibliotheken</span></a></li><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_stores\"><span class=\"button-wrap\"> Weiter </span></a></li></ul>\n<p>Im letzten Artikel haben wir unserer To-Do-Liste weitere Funktionen hinzugefügt und begonnen, unsere App in Komponenten zu organisieren. In diesem Artikel fügen wir die finalen Funktionen der App hinzu und teilen unsere App weiter in Komponenten auf. Wir werden lernen, wie man mit Reaktivitätsproblemen umgeht, die sich auf die Aktualisierung von Objekten und Arrays beziehen. Um häufige Fallen zu vermeiden, müssen wir tiefer in das Reaktivitätssystem von Svelte eintauchen. Außerdem werden wir uns mit der Lösung einiger Barrierefreiheitsprobleme im Bereich des Fokusmanagements beschäftigen und mehr.</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">Voraussetzungen:</th>\n <td>\n <p>\n Es wird mindestens empfohlen, dass Sie mit den Kernsprachen\n <a href=\"/de/docs/Learn_web_development/Core/Structuring_content\">HTML</a>,\n <a href=\"/de/docs/Learn_web_development/Core/Styling_basics\">CSS</a> und\n <a href=\"/de/docs/Learn_web_development/Core/Scripting\">JavaScript</a>\n vertraut sind und über Kenntnisse im Umgang mit dem\n <a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Command_line\">Terminal/Befehlszeile</a>\n verfügen.\n </p>\n <p>\n Sie benötigen ein Terminal mit installiertem Node und npm, um Ihre App zu kompilieren und zu bauen.\n </p>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Zielsetzung:</th>\n <td>\n Lernen Sie einige fortgeschrittene Svelte-Techniken im Zusammenhang mit der Lösung von Reaktivitätsproblemen, Problemen mit der Tastaturzugänglichkeit im Zusammenhang mit dem Komponentenlebenszyklus und mehr.\n </td>\n </tr>\n </tbody>\n</table></figure>\n<p>Wir konzentrieren uns auf einige Barrierefreiheitsprobleme im Zusammenhang mit dem Fokusmanagement. Dazu verwenden wir Techniken zum Zugriff auf DOM-Knoten und zur Ausführung von Methoden wie <a href=\"/de/docs/Web/API/HTMLElement/focus\"><code>focus()</code></a> und <a href=\"/de/docs/Web/API/HTMLInputElement/select\"><code>select()</code></a>. Wir lernen auch, wie man Event-Listener für DOM-Elemente deklariert und bereinigt.</p>\n<p>Auch müssen wir ein wenig über den Komponentenlebenszyklus lernen, um zu verstehen, wann diese DOM-Knoten im DOM eingebaut und entfernt werden und wie wir auf sie zugreifen können. Wir werden auch über die <code>action</code>-Direktive lernen, die es uns ermöglicht, die Funktionalität von HTML-Elementen auf eine wiederverwendbare und deklarative Weise zu erweitern.</p>\n<p>Schließlich lernen wir noch mehr über Komponenten. Bisher haben wir gesehen, wie Komponenten Daten mithilfe von <code>props</code> teilen und mit ihren Eltern durch Ereignisse und bidirektionale Datenbindung kommunizieren. Jetzt werden wir sehen, wie Komponenten auch Methoden und Variablen zur Verfügung stellen können.</p>\n<p>Die folgenden neuen Komponenten werden im Verlauf dieses Artikels entwickelt:</p>\n<ul>\n<li><code>MoreActions</code>: Zeigt die Schaltflächen <em>Alle auswählen</em> und <em>Abgeschlossene entfernen</em> an und löst die entsprechenden Ereignisse aus, die zur Handhabung ihrer Funktionalität erforderlich sind.</li>\n<li><code>NewTodo</code>: Zeigt das <code><input></code>-Feld und die Schaltfläche <em>Hinzufügen</em> zum Hinzufügen eines neuen To-Dos an.</li>\n<li><code>TodosStatus</code>: Zeigt die Überschrift \"x von y Aufgaben abgeschlossen\" an.</li>\n</ul>"}},{"type":"prose","value":{"id":"coden_sie_mit_uns","title":"Coden Sie mit uns","isH3":false,"content":""}},{"type":"prose","value":{"id":"git","title":"Git","isH3":true,"content":"<p>Klone Sie das GitHub-Repo (falls Sie es noch nicht gemacht haben) mit:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>git clone https://github.com/opensas/mdn-svelte-tutorial.git\n</code></pre></div>\n<p>Um den aktuellen Stand der App zu erreichen, führen Sie aus</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>cd mdn-svelte-tutorial/05-advanced-concepts\n</code></pre></div>\n<p>Oder laden Sie direkt den Inhalt des Ordners herunter:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npx degit opensas/mdn-svelte-tutorial/05-advanced-concepts\n</code></pre></div>\n<p>Denken Sie daran, <code>npm install && npm run dev</code> auszuführen, um Ihre App im Entwicklungsmodus zu starten.</p>"}},{"type":"prose","value":{"id":"repl","title":"REPL","isH3":true,"content":"<p>Um mit uns im REPL zu coden, beginnen Sie bei</p>\n<p><a href=\"https://svelte.dev/repl/76cc90c43a37452e8c7f70521f88b698?version=3.23.2\" class=\"external\" target=\"_blank\">https://svelte.dev/repl/76cc90c43a37452e8c7f70521f88b698?version=3.23.2</a></p>"}},{"type":"prose","value":{"id":"arbeit_an_der_komponente_moreactions","title":"Arbeit an der Komponente MoreActions","isH3":false,"content":"<p>Nun werden wir uns um die Schaltflächen <em>Alle auswählen</em> und <em>Abgeschlossene entfernen</em> kümmern. Lassen Sie uns eine Komponente erstellen, die dafür zuständig ist, die Schaltflächen anzuzeigen und die entsprechenden Ereignisse auszulösen.</p>\n<ol>\n<li>\n<p>Erstellen Sie eine neue Datei, <code>components/MoreActions.svelte</code>.</p>\n</li>\n<li>\n<p>Bei einem Klick auf die erste Schaltfläche wird ein <code>checkAll</code>-Ereignis ausgelöst, das signalisiert, dass alle To-Dos ausgewählt/abgewählt werden sollen. Bei einem Klick auf die zweite Schaltfläche wird ein <code>removeCompleted</code>-Ereignis ausgelöst, das signalisiert, dass alle abgeschlossenen To-Dos entfernt werden sollen. Fügen Sie den folgenden Inhalt in Ihre <code>MoreActions.svelte</code>-Datei ein:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">svelte</span></div><pre class=\"brush: svelte notranslate\"><code><script>\n import { createEventDispatcher } from \"svelte\";\n const dispatch = createEventDispatcher();\n\n let completed = true;\n\n const checkAll = () => {\n dispatch(\"checkAll\", completed);\n completed = !completed;\n };\n\n const removeCompleted = () => dispatch(\"removeCompleted\");\n</script>\n\n<div class=\"btn-group\">\n <button type=\"button\" class=\"btn btn__primary\" on:click={checkAll}>{completed ? 'Check' : 'Uncheck'} all</button>\n <button type=\"button\" class=\"btn btn__primary\" on:click={removeCompleted}>Remove completed</button>\n</div>\n</code></pre></div>\n<p>Wir haben auch eine <code>completed</code>-Variable hinzugefügt, um zwischen dem Auswählen und Abwählen aller Aufgaben zu wechseln.</p>\n</li>\n<li>\n<p>Zurück in <code>Todos.svelte</code>, werden wir unsere <code>MoreActions</code>-Komponente importieren und zwei Funktionen erstellen, um die von der <code>MoreActions</code>-Komponente ausgelösten Ereignisse zu verarbeiten.</p>\n<p>Fügen Sie die folgende Import-Anweisung unter den bestehenden hinzu:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import MoreActions from \"./MoreActions.svelte\";\n</code></pre></div>\n</li>\n<li>\n<p>Fügen Sie dann die beschriebenen Funktionen am Ende des <code><script></code>-Abschnitts hinzu:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const checkAllTodos = (completed) =>\n todos.forEach((t) => (t.completed = completed));\n\nconst removeCompletedTodos = () =>\n (todos = todos.filter((t) => !t.completed));\n</code></pre></div>\n</li>\n<li>\n<p>Gehen Sie nun zum Ende des Markup-Abschnitts von <code>Todos.svelte</code> und ersetzen Sie das <code><div class=\"btn-group\"></code>-Element, das wir in <code>MoreActions.svelte</code> kopiert haben, durch einen Aufruf der <code>MoreActions</code>-Komponente, wie folgt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">svelte</span></div><pre class=\"brush: svelte notranslate\"><code>\n<MoreActions\n on:checkAll={(e) => checkAllTodos(e.detail)}\n on:removeCompleted={removeCompletedTodos}\n/>\n</code></pre></div>\n</li>\n<li>\n<p>Gehen Sie zurück zur App und probieren Sie es aus. Sie werden feststellen, dass die Schaltfläche <em>Abgeschlossene entfernen</em> einwandfrei funktioniert, aber die Schaltfläche <em>Alle auswählen</em>/<em>Abwählen</em> einfach stillschweigend nicht funktioniert.</p>\n</li>\n</ol>\n<p>Um herauszufinden, was hier passiert, müssen wir etwas tiefer in die Svelte-Reaktivität eintauchen.</p>"}},{"type":"prose","value":{"id":"reaktivitätsprobleme_aktualisierung_von_objekten_und_arrays","title":"Reaktivitätsprobleme: Aktualisierung von Objekten und Arrays","isH3":false,"content":"<p>Um zu sehen, was passiert, können wir das <code>todos</code>-Array aus der <code>checkAllTodos()</code>-Funktion in der Konsole protokollieren.</p>\n<ol>\n<li>\n<p>Aktualisieren Sie Ihre bestehende <code>checkAllTodos()</code>-Funktion auf das Folgende:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const checkAllTodos = (completed) => {\n todos.forEach((t) => (t.completed = completed));\n console.log(\"todos\", todos);\n};\n</code></pre></div>\n</li>\n<li>\n<p>Gehen Sie zurück zu Ihrem Browser, öffnen Sie die DevTools-Konsole und klicken Sie mehrmals auf <em>Alle auswählen</em>/<em>Abwählen</em>.</p>\n</li>\n</ol>\n<p>Sie werden bemerken, dass das Array jedes Mal erfolgreich aktualisiert wird, wenn Sie den Knopf drücken (die <code>completed</code>-Eigenschaften der <code>todo</code>-Objekte werden zwischen <code>true</code> und <code>false</code> umgeschaltet), aber Svelte ist sich dessen nicht bewusst. Das bedeutet auch, dass in diesem Fall eine reaktive Anweisung wie <code>$: console.log('todos', todos)</code> nicht sehr nützlich sein wird.</p>\n<p>Um herauszufinden, warum dies geschieht, müssen wir verstehen, wie Reaktivität in Svelte bei der Aktualisierung von Arrays und Objekten funktioniert.</p>\n<p>Viele Web-Frameworks verwenden die Virtual-DOM-Technik, um die Seite zu aktualisieren. Im Grunde ist der virtuelle DOM eine im Speicher befindliche Kopie des Inhalts der Webseite. Das Framework aktualisiert diese virtuelle Darstellung, die dann mit dem \"echten\" DOM synchronisiert wird. Dies ist viel schneller als das direkte Aktualisieren des DOM und erlaubt dem Framework, viele Optimierungstechniken anzuwenden.</p>\n<p>Diese Frameworks führen standardmäßig im Grunde genommen unseren gesamten JavaScript-Code bei jeder Änderung erneut gegen diesen virtuellen DOM aus und wenden verschiedene Methoden an, um teure Berechnungen zwischenzuspeichern und die Ausführung zu optimieren. Sie versuchen kaum bis gar nicht zu verstehen, was unser JavaScript-Code tut.</p>\n<p>Svelte verwendet keine virtuelle DOM-Darstellung. Stattdessen analysiert und untersucht es unseren Code, erstellt einen Abhängigkeitsbaum und generiert dann den erforderlichen JavaScript-Code, um nur die Teile des DOM zu aktualisieren, die aktualisiert werden müssen. Dieser Ansatz generiert in der Regel optimalen JavaScript-Code mit minimalem Overhead, hat jedoch auch seine Einschränkungen.</p>\n<p>Manchmal kann Svelte Änderungen an beobachtbaren Variablen nicht erkennen. Denken Sie daran, dass Sie Svelte mitteilen müssen, dass eine Variable sich geändert hat, indem Sie ihr einen neuen Wert zuweisen. Eine einfache Regel, die Sie im Kopf behalten sollten, ist, dass <strong>der Name der aktualisierten Variable auf der linken Seite der Zuordnung erscheinen muss.</strong></p>\n<p>Zum Beispiel im folgenden Code:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const foo = obj.foo;\nfoo.bar = \"baz\";\n</code></pre></div>\n<p>Svelte wird Referenzen auf <code>obj.foo.bar</code> nicht aktualisieren, es sei denn, Sie folgen es mit <code>obj = obj</code>. Das liegt daran, dass Svelte Objektverweise nicht verfolgen kann, sodass wir ihm explizit mitteilen müssen, dass sich <code>obj</code> geändert hat, indem wir eine Zuweisung durchführen.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nWenn <code>foo</code> eine Top-Level-Variable ist, können Sie Svelte einfach mitteilen, <code>obj</code> zu aktualisieren, wann immer <code>foo</code> sich ändert, mithilfe der folgenden reaktiven Anweisung: <code>$: foo, obj = obj</code>. Damit definieren wir <code>foo</code> als Abhängigkeit, und wann immer es sich ändert, wird Svelte <code>obj = obj</code> ausführen.</p>\n</div>\n<p>In unserer <code>checkAllTodos()</code>-Funktion, wenn wir ausführen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>todos.forEach((t) => (t.completed = completed));\n</code></pre></div>\n<p>wird Svelte <code>todos</code> nicht als geändert markieren, weil es nicht weiß, dass wir, wenn wir unsere <code>t</code>-Variable innerhalb der <code>forEach()</code>-Methode aktualisieren, auch das <code>todos</code>-Array modifizieren. Und das ergibt Sinn, denn sonst wäre Svelte sich über das Innenleben der <code>forEach()</code>-Methode bewusst; dasselbe wäre also für jede Methode wahr, die an jedes Objekt oder Array angehängt ist.</p>\n<p>Nichtsdestotrotz gibt es verschiedene Techniken, die wir anwenden können, um dieses Problem zu lösen, und alle betreffen die Zuweisung eines neuen Werts an die beobachtete Variable.</p>\n<p>Wie wir bereits gesehen haben, könnten wir einfach Svelte mitteilen, die Variable mit einer Selbstzuweisung zu aktualisieren, so:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const checkAllTodos = (completed) => {\n todos.forEach((t) => (t.completed = completed));\n todos = todos;\n};\n</code></pre></div>\n<p>Dies wird das Problem lösen. Intern wird Svelte <code>todos</code> als geändert kennzeichnen und die scheinbar redundante Selbstzuweisung entfernen. Abgesehen von der Tatsache, dass es seltsam aussieht, ist es völlig in Ordnung, diese Technik zu verwenden, und manchmal ist es der prägnanteste Weg, es zu tun.</p>\n<p>Wir könnten auch auf das <code>todos</code>-Array per Index zugreifen, wie folgt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const checkAllTodos = (completed) => {\n todos.forEach((t, i) => (todos[i].completed = completed));\n};\n</code></pre></div>\n<p>Zuweisungen an Eigenschaften von Arrays und Objekten — z.B. <code>obj.foo += 1</code> oder <code>array[i] = x</code> — funktionieren genauso wie Zuweisungen an die Werte selbst. Wenn Svelte diesen Code analysiert, kann es erkennen, dass das <code>todos</code>-Array modifiziert wird.</p>\n<p>Eine weitere Lösung besteht darin, ein neues Array an <code>todos</code> zuzuweisen, das eine Kopie aller To-Dos mit der entsprechend aktualisierten <code>completed</code>-Eigenschaft enthält, wie folgt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const checkAllTodos = (completed) => {\n todos = todos.map((t) => ({ ...t, completed }));\n};\n</code></pre></div>\n<p>In diesem Fall verwenden wir die <a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Array/map\"><code>map()</code></a>-Methode, welche ein neues Array mit den Ergebnissen der Ausführung der bereitgestellten Funktion für jedes Element zurückgibt. Die Funktion gibt eine Kopie jedes To-Dos zurück, indem sie die <a href=\"/de/docs/Web/JavaScript/Reference/Operators/Spread_syntax\">Spreizsyntax</a> verwendet und die Eigenschaft des <code>completed</code>-Werts entsprechend überschreibt. Diese Lösung hat den zusätzlichen Vorteil, ein neues Array mit neuen Objekten zurückzugeben und die ursprüngliche <code>todos</code>-Array-Mutation völlig zu vermeiden.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nSvelte erlaubt es uns, verschiedene Optionen anzugeben, die beeinflussen, wie der Compiler funktioniert. Die Option <code><svelte:options immutable={true}/></code> teilt dem Compiler mit, dass Sie versprechen, keine Objekte zu mutieren. Dies ermöglicht es, bei der Überprüfung, ob sich Werte geändert haben, weniger konservativ zu sein und einfacheren sowie leistungsfähigeren Code zu generieren. Weitere Informationen zu <code><svelte:options></code> finden Sie in der <a href=\"https://svelte.dev/docs/special-elements#svelte-options\" class=\"external\" target=\"_blank\">Svelte-Optionen-Dokumentation</a>.</p>\n</div>\n<p>All diese Lösungen beinhalten eine Zuweisung, bei der die aktualisierte Variable auf der linken Seite der Gleichung steht. Jede dieser Techniken ermöglicht es Svelte zu erkennen, dass unser <code>todos</code>-Array geändert wurde.</p>\n<p><strong>Wählen Sie eine aus und aktualisieren Sie Ihre <code>checkAllTodos()</code>-Funktion entsprechend. Jetzt sollten Sie in der Lage sein, alle Ihre To-Dos auf einmal zu markieren und zu entmarkieren. Probieren Sie es aus!</strong></p>"}},{"type":"prose","value":{"id":"fertigstellen_unserer_moreactions-komponente","title":"Fertigstellen unserer MoreActions-Komponente","isH3":false,"content":"<p>Wir werden unserem Element ein Usability-Detail hinzufügen. Wir deaktivieren die Schaltflächen, wenn keine Aufgaben zu bearbeiten sind. Dazu werden wir das <code>todos</code>-Array als Prop empfangen und die <code>disabled</code>-Eigenschaft jeder Schaltfläche entsprechend setzen.</p>\n<ol>\n<li>\n<p>Aktualisieren Sie Ihre <code>MoreActions.svelte</code>-Komponente wie folgt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">svelte</span></div><pre class=\"brush: svelte notranslate\"><code><script>\n import { createEventDispatcher } from 'svelte';\n const dispatch = createEventDispatcher();\n\n export let todos;\n\n let completed = true;\n\n const checkAll = () => {\n dispatch('checkAll', completed);\n completed = !completed;\n }\n\n const removeCompleted = () => dispatch('removeCompleted');\n\n $: completedTodos = todos.filter((t) => t.completed).length;\n</script>\n\n<div class=\"btn-group\">\n <button type=\"button\" class=\"btn btn__primary\"\n disabled={todos.length === 0} on:click={checkAll}>{completed ? 'Check' : 'Uncheck'} all</button>\n <button type=\"button\" class=\"btn btn__primary\"\n disabled={completedTodos === 0} on:click={removeCompleted}>Remove completed</button>\n</div>\n</code></pre></div>\n<p>Wir haben auch eine reaktive <code>completedTodos</code>-Variable deklariert, um die <em>Abgeschlossene entfernen</em>-Schaltfläche zu aktivieren oder zu deaktivieren.</p>\n</li>\n<li>\n<p>Vergessen Sie nicht, das Prop innerhalb von <code>Todos.svelte</code> in <code>MoreActions</code> zu übergeben, wo die Komponente aufgerufen wird:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">svelte</span></div><pre class=\"brush: svelte notranslate\"><code><MoreActions {todos}\n on:checkAll={(e) => checkAllTodos(e.detail)}\n on:removeCompleted={removeCompletedTodos}\n />\n</code></pre></div>\n</li>\n</ol>"}},{"type":"prose","value":{"id":"arbeiten_mit_dem_dom_fokus_auf_die_details","title":"Arbeiten mit dem DOM: Fokus auf die Details","isH3":false,"content":"<p>Nachdem wir alle erforderlichen Funktionen der App abgeschlossen haben, konzentrieren wir uns auf einige Barrierefreiheitsmerkmale, die die Benutzerfreundlichkeit unserer App sowohl für Tastaturnutzer als auch für Screenreader-Nutzer verbessern.</p>\n<p>In ihrem aktuellen Zustand hat unsere App einige Probleme mit der Tastaturzugänglichkeit im Zusammenhang mit dem Fokusmanagement. Lassen Sie uns diese Probleme genauer betrachten.</p>"}},{"type":"prose","value":{"id":"erforschen_von_problemen_mit_der_tastaturzugänglichkeit_in_unserer_to-do-app","title":"Erforschen von Problemen mit der Tastaturzugänglichkeit in unserer To-Do-App","isH3":false,"content":"<p>Derzeit stellen Tastaturbenutzer fest, dass der Fokusfluss unserer App nicht sehr vorhersehbar oder kohärent ist.</p>\n<p>Wenn Sie auf das Eingabefeld oben in unserer App klicken, sehen Sie eine dicke, gestrichelte Umrandung um dieses Eingabefeld. Diese Umrandung ist Ihr visueller Indikator dafür, dass der Browser aktuell auf dieses Element fokussiert ist.</p>\n<p>Wenn Sie ein Mausenutzer sind, haben Sie möglicherweise diesen visuellen Hinweis übersprungen. Aber wenn Sie ausschließlich mit der Tastatur arbeiten, ist es von entscheidender Bedeutung, dass man weiß, welches Steuerelement den Fokus hat. Es zeigt uns an, welches Steuerelement unsere Tastenanschläge empfangen wird.</p>\n<p>Wenn Sie die <kbd>Tab</kbd>-Taste wiederholt drücken, sehen Sie den gestrichelten Fokusindikator zwischen allen fokussierbaren Elementen auf der Seite wechseln. Wenn Sie den Fokus auf die <em>Bearbeiten</em>-Schaltfläche bewegen und <kbd>Enter</kbd> drücken, verschwindet der Fokus plötzlich und Sie können nicht mehr feststellen, welches Steuerelement unsere Tastenanschläge empfangen wird.</p>\n<p>Wenn Sie die <kbd>Escape</kbd>- oder <kbd>Enter</kbd>-Taste drücken, passiert außerdem nichts. Und wenn Sie auf <em>Abbrechen</em> oder <em>Speichern</em> klicken, verschwindet der Fokus erneut. Für einen Nutzer, der mit der Tastatur arbeitet, wird dieses Verhalten bestenfalls verwirrend sein.</p>\n<p>Wir möchten auch einige Benutzerfreundlichkeitsmerkmale hinzufügen, wie das Deaktivieren der <em>Speichern</em>-Schaltfläche, wenn erforderliche Felder leer sind, das Fokussieren bestimmter HTML-Elemente oder das automatische Auswählen von Inhalten, wenn ein Texteingabefeld fokussiert wird.</p>\n<p>Um all diese Funktionen zu implementieren, benötigen wir programmgesteuerten Zugang zu DOM-Knoten, um Funktionen wie <a href=\"/de/docs/Web/API/HTMLElement/focus\"><code>focus()</code></a> und <a href=\"/de/docs/Web/API/HTMLInputElement/select\"><code>select()</code></a> auszuführen. Wir müssen auch <a href=\"/de/docs/Web/API/EventTarget/addEventListener\"><code>addEventListener()</code></a> und <a href=\"/de/docs/Web/API/EventTarget/removeEventListener\"><code>removeEventListener()</code></a> verwenden, um spezifische Aufgaben auszuführen, wenn das Steuerelement den Fokus erhält.</p>\n<p>Das Problem besteht darin, dass alle diese DOM-Knoten von Svelte zur Laufzeit dynamisch erstellt werden. Daher müssen wir warten, bis sie erstellt und dem DOM hinzugefügt wurden, um sie verwenden zu können. Dazu müssen wir etwas über den <a href=\"https://learn.svelte.dev/tutorial/onmount\" class=\"external\" target=\"_blank\">Komponentenlebenszyklus</a> lernen, um zu verstehen, wann wir auf sie zugreifen können — mehr dazu später.</p>"}},{"type":"prose","value":{"id":"erstellen_einer_newtodo-komponente","title":"Erstellen einer NewTodo-Komponente","isH3":false,"content":"<p>Lassen Sie uns beginnen, unser neues To-Do-Formular in seine eigene Komponente zu extrahieren. Mit dem Wissen, das wir bisher haben, können wir eine neue Komponentendatei erstellen und den Code anpassen, um ein <code>addTodo</code>-Ereignis auszulösen und den Namen des neuen To-Dos mit den zusätzlichen Details zu übergeben.</p>\n<ol>\n<li>\n<p>Erstellen Sie eine neue Datei, <code>components/NewTodo.svelte</code>.</p>\n</li>\n<li>\n<p>Fügen Sie die folgenden Inhalte hinzu:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">svelte</span></div><pre class=\"brush: svelte notranslate\"><code><script>\n import { createEventDispatcher } from 'svelte';\n const dispatch = createEventDispatcher();\n\n let name = '';\n\n const addTodo = () => {\n dispatch('addTodo', name);\n name = '';\n }\n\n const onCancel = () => name = '';\n\n</script>\n\n<form on:submit|preventDefault={addTodo} on:keydown={(e) => e.key === 'Escape' && onCancel()}>\n <h2 class=\"label-wrapper\">\n <label for=\"todo-0\" class=\"label__lg\">What needs to be done?</label>\n </h2>\n <input bind:value={name} type=\"text\" id=\"todo-0\" autoComplete=\"off\" class=\"input input__lg\" />\n <button type=\"submit\" disabled={!name} class=\"btn btn__primary btn__lg\">Add</button>\n</form>\n</code></pre></div>\n<p>Hier binden wir das <code><input></code> an die <code>name</code>-Variable mit <code>bind:value={name}</code> und deaktivieren die <em>Hinzufügen</em>-Schaltfläche, wenn sie leer ist (d.h. keinen Textinhalt hat) mit <code>disabled={!name}</code>. Wir kümmern uns auch um die <kbd>Escape</kbd>-Taste mit <code>on:keydown={(e) => e.key === 'Escape' && onCancel()}}</code>. Wann immer die <kbd>Escape</kbd>-Taste gedrückt wird, führen wir <code>onCancel()</code> aus, das einfach die <code>name</code>-Variable bereinigt.</p>\n</li>\n<li>\n<p>Jetzt müssen wir es aus der <code>Todos</code>-Komponente importieren und verwenden und die <code>addTodo()</code>-Funktion aktualisieren, um den Namen des neuen To-Dos zu empfangen.</p>\n<p>Fügen Sie die folgende <code>import</code>-Anweisung unter den anderen in <code>Todos.svelte</code> hinzu:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import NewTodo from \"./NewTodo.svelte\";\n</code></pre></div>\n</li>\n<li>\n<p>Und aktualisieren Sie die <code>addTodo()</code>-Funktion wie folgt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function addTodo(name) {\n todos = [...todos, { id: newTodoId, name, completed: false }];\n}\n</code></pre></div>\n<p><code>addTodo()</code> empfängt jetzt den Namen des neuen To-Dos direkt, sodass wir die <code>newTodoName</code>-Variable nicht mehr benötigen, um ihr ihren Wert zu geben. Unsere <code>NewTodo</code>-Komponente kümmert sich darum.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nDie <code>{ name }</code>-Syntax ist nur eine Abkürzung für <code>{ name: name }</code>. Diese stammt direkt aus JavaScript und hat nichts speziell mit Svelte zu tun, abgesehen davon, dass sie etwas Inspiration für Sveltes eigene Abkürzungen liefert.</p>\n</div>\n</li>\n<li>\n<p>Schließlich für diesen Abschnitt ersetzen Sie das NewTodo-Formular-Markup durch einen Aufruf zur <code>NewTodo</code>-Komponente, wie folgt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">svelte</span></div><pre class=\"brush: svelte notranslate\"><code>\n<NewTodo on:addTodo={(e) => addTodo(e.detail)} />\n</code></pre></div>\n</li>\n</ol>"}},{"type":"prose","value":{"id":"arbeiten_mit_dom-knoten_mithilfe_der_direktive_bindthisdom_node","title":"Arbeiten mit DOM-Knoten mithilfe der Direktive <code>bind:this={dom_node}</code>","isH3":false,"content":"<p>Nun möchten wir, dass das <code><input></code>-Element der <code>NewTodo</code>-Komponente jedes Mal, wenn die Schaltfläche <em>Hinzufügen</em> gedrückt wird, den Fokus zurückerlangt. Dafür benötigen wir einen Verweis auf den DOM-Knoten des Eingabefelds. Svelte bietet eine Möglichkeit, dies mit der Direktive <code>bind:this={dom_node}</code> zu tun. Wenn angegeben, sobald die Komponente montiert ist und der DOM-Knoten erstellt wird, weist Svelte der angegebenen Variablen einen Verweis auf den DOM-Knoten zu.</p>\n<p>Wir werden eine <code>nameEl</code>-Variable erstellen und sie mit <code>bind:this={nameEl}</code> an das Eingabefeld binden. Dann werden wir nach dem Hinzufügen des neuen To-Dos innerhalb von <code>addTodo()</code> <code>nameEl.focus()</code> aufrufen, um das <code><input></code>-Feld erneut zu fokussieren. Dasselbe werden wir tun, wenn der Nutzer die <kbd>Escape</kbd>-Taste drückt, mit der <code>onCancel()</code>-Funktion.</p>\n<p>Aktualisieren Sie die Inhalte von <code>NewTodo.svelte</code> wie folgt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">svelte</span></div><pre class=\"brush: svelte notranslate\"><code><script>\n import { createEventDispatcher } from 'svelte';\n const dispatch = createEventDispatcher();\n\n let name = '';\n let nameEl; // reference to the name input DOM node\n\n const addTodo = () => {\n dispatch('addTodo', name);\n name = '';\n nameEl.focus(); // give focus to the name input\n }\n\n const onCancel = () => {\n name = '';\n nameEl.focus(); // give focus to the name input\n }\n</script>\n\n<form on:submit|preventDefault={addTodo} on:keydown={(e) => e.key === 'Escape' && onCancel()}>\n <h2 class=\"label-wrapper\">\n <label for=\"todo-0\" class=\"label__lg\">What needs to be done?</label>\n </h2>\n <input bind:value={name} bind:this={nameEl} type=\"text\" id=\"todo-0\" autoComplete=\"off\" class=\"input input__lg\" />\n <button type=\"submit\" disabled={!name} class=\"btn btn__primary btn__lg\">Add</button>\n</form>\n</code></pre></div>\n<p>Probieren Sie die App aus: Geben Sie einen neuen To-Do-Namen in das <code><input></code>-Feld ein, drücken Sie <kbd>tab</kbd>, um den Fokus auf die <em>Hinzufügen</em>-Schaltfläche zu legen, und dann drücken Sie <kbd>Enter</kbd> oder <kbd>Escape</kbd>, um zu sehen, wie das Eingabefeld den Fokus zurückerlangt.</p>"}},{"type":"prose","value":{"id":"automatisches_fokussieren_unseres_eingabefelds","title":"Automatisches Fokussieren unseres Eingabefelds","isH3":true,"content":"<p>Die nächste Funktion wird unserem <code>NewTodo</code>-Komponente ein <code>autofocus</code>-Prop hinzufügen, um zu ermöglichen, dass das <code><input></code>-Feld beim Laden der Seite fokussiert wird.</p>\n<ol>\n<li>\n<p>Unser erster Versuch ist wie folgt: Fügen wir das <code>autofocus</code>-Prop hinzu und rufen Sie einfach <code>nameEl.focus()</code> aus dem <code><script></code>-Block auf. Aktualisieren Sie den ersten Teil des <code><script></code>-Abschnitts von <code>NewTodo.svelte</code> (die ersten vier Zeilen) so, dass er so aussieht:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">svelte</span></div><pre class=\"brush: svelte notranslate\"><code><script>\n import { createEventDispatcher } from 'svelte';\n const dispatch = createEventDispatcher();\n\n export let autofocus = false;\n\n let name = '';\n let nameEl; // reference to the name input DOM node\n\n if (autofocus) nameEl.focus();\n</code></pre></div>\n</li>\n<li>\n<p>Gehen Sie jetzt zurück zur <code>Todos</code>-Komponente und übergeben Sie das <code>autofocus</code>-Prop in den <code><NewTodo></code>-Komponentenaufruf, wie folgt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">svelte</span></div><pre class=\"brush: svelte notranslate\"><code>\n<NewTodo autofocus on:addTodo={(e) => addTodo(e.detail)} />\n</code></pre></div>\n</li>\n<li>\n<p>Wenn Sie Ihre App jetzt ausprobieren, werden Sie sehen, dass die Seite jetzt leer ist und in Ihrer DevTools-Webkonsole eine Fehlermeldung erscheint, die etwa lautet: <code>TypeError: nameEl is undefined</code>.</p>\n</li>\n</ol>\n<p>Um zu verstehen, was hier passiert, sprechen wir mehr über den <a href=\"https://learn.svelte.dev/tutorial/onmount\" class=\"external\" target=\"_blank\">Komponentenlebenszyklus</a>, den wir bereits früher erwähnt haben.</p>"}},{"type":"prose","value":{"id":"komponentenlebenszyklus_und_die_onmount-funktion","title":"Komponentenlebenszyklus und die <code>onMount()</code>-Funktion","isH3":false,"content":"<p>Wenn eine Komponente instanziiert wird, führt Svelte den Initialisierungscode (d. h. den <code><script></code>-Abschnitt der Komponente) aus. Aber in diesem Moment sind alle Knoten, die die Komponente ausmachen, noch nicht am DOM angebracht; tatsächlich existieren sie noch nicht einmal.</p>\n<p>Also, wie können Sie wissen, wann die Komponente bereits erstellt und am DOM montiert ist? Die Antwort ist, dass jede Komponente einen Lebenszyklus hat, der beginnt, wenn sie erstellt wird, und endet, wenn sie zerstört wird. Es gibt eine Handvoll Funktionen, die es Ihnen ermöglichen, Code zu entscheidenden Momenten während dieses Lebenszyklus auszuführen.</p>\n<p>Diejenige, die Sie am häufigsten verwenden werden, ist <code>onMount()</code>, die es uns ermöglicht, einen Rückruf auszuführen, sobald die Komponente am DOM montiert ist. Lassen Sie uns das ausprobieren und sehen, was mit der <code>nameEl</code>-Variablen passiert.</p>\n<ol>\n<li>\n<p>Fügen Sie zu Beginn des <code><script></code>-Bereichs von <code>NewTodo.svelte</code> die folgende Zeile hinzu:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import { onMount } from \"svelte\";\n</code></pre></div>\n</li>\n<li>\n<p>Und diese Zeilen am Ende:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>console.log(\"initializing:\", nameEl);\nonMount(() => {\n console.log(\"mounted:\", nameEl);\n});\n</code></pre></div>\n</li>\n<li>\n<p>Entfernen Sie nun die Zeile <code>if (autofocus) nameEl.focus()</code>, um den Fehler zu vermeiden, den wir zuvor gesehen haben.</p>\n</li>\n<li>\n<p>Die App wird jetzt wieder funktionieren und Sie sehen im Konsole:</p>\n<pre class=\"brush: plain notranslate\">initializing: undefined\nmounted: <input id=\"todo-0\" class=\"input input__lg\" type=\"text\" autocomplete=\"off\">\n</pre>\n<p>Wie Sie sehen können, ist während der Komponenteninitialisierung <code>nameEl</code> undefiniert, was Sinn macht, da der <code><input></code>-Knoten noch nicht existiert. Nachdem die Komponente montiert wurde, weist Svelte der <code>nameEl</code>-Variablen dank der <code>bind:this={nameEl}</code>-Direktive einen Verweis auf den <code><input></code>-DOM-Knoten zu.</p>\n</li>\n<li>\n<p>Um die Autofokus-Funktionalität zum Laufen zu bringen, ersetzen Sie den vorherigen <code>console.log()</code>/<code>onMount()</code>-Block, den Sie hinzugefügt haben, durch dies:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>onMount(() => autofocus && nameEl.focus()); // if autofocus is true, we run nameEl.focus()\n</code></pre></div>\n</li>\n<li>\n<p>Gehen Sie erneut zu Ihrer App und Sie werden nun sehen, dass das <code><input></code>-Feld beim Seitenaufruf fokussiert ist.</p>\n</li>\n</ol>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nSie können sich die anderen <a href=\"https://svelte.dev/docs/svelte\" class=\"external\" target=\"_blank\">Lebenszyklusfunktionen in der Svelte-Dokumentation</a> ansehen und sie im <a href=\"https://learn.svelte.dev/tutorial/onmount\" class=\"external\" target=\"_blank\">interaktiven Tutorial</a> in Aktion sehen.</p>\n</div>"}},{"type":"prose","value":{"id":"warten_auf_die_aktualisierung_des_dom_mit_der_tick_funktion","title":"Warten auf die Aktualisierung des DOM mit der <code>tick()</code> Funktion","isH3":false,"content":"<p>Nun kümmern wir uns um die Details des Fokusmanagements in der <code>Todo</code>-Komponente. Zuallererst möchten wir, dass ein <code>Todo</code>-Komponente das Bearbeitungs-<code><input></code> aktiviert, wenn wir den Bearbeitungsmodus betreten, indem wir seine <em>Bearbeiten</em>-Schaltfläche drücken. Auf die gleiche Weise, wie wir es zuvor gesehen haben, erstellen wir eine <code>nameEl</code>-Variable innerhalb von <code>Todo.svelte</code> und rufen <code>nameEl.focus()</code> auf, nachdem wir die <code>editing</code>-Variable auf <code>true</code> gesetzt haben.</p>\n<ol>\n<li>\n<p>Öffnen Sie die Datei <code>components/Todo.svelte</code> und fügen Sie eine <code>nameEl</code>-Variablendeklaration direkt unter Ihre <code>editing</code>- und <code>name</code>-Deklarationen hinzu:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let nameEl; // reference to the name input DOM node\n</code></pre></div>\n</li>\n<li>\n<p>Aktualisieren Sie jetzt Ihre <code>onEdit()</code>-Funktion wie folgt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function onEdit() {\n editing = true; // enter editing mode\n nameEl.focus(); // set focus to name input\n}\n</code></pre></div>\n</li>\n<li>\n<p>Und schließlich binden Sie <code>nameEl</code> an das <code><input></code>-Feld, indem Sie es folgendermaßen aktualisieren:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">svelte</span></div><pre class=\"brush: svelte notranslate\"><code><input\n bind:value={name}\n bind:this={nameEl}\n type=\"text\"\n id=\"todo-{todo.id}\"\n autocomplete=\"off\"\n class=\"todo-text\" />\n</code></pre></div>\n</li>\n<li>\n<p>Wenn Sie jedoch die aktualisierte App ausprobieren, erhalten Sie einen Fehler, der etwa so lautet: \"TypeError: nameEl is undefined\" in der Konsole, wenn Sie die <em>Bearbeiten</em>-Schaltfläche eines To-Dos drücken.</p>\n</li>\n</ol>\n<p>Also, was passiert hier? Wenn Sie einen Komponentenstatus in Svelte aktualisieren, aktualisiert es das DOM nicht sofort. Stattdessen wartet es bis zum nächsten Microtask, um zu sehen, ob es noch andere Änderungen gibt, die angewendet werden müssen, einschließlich in anderen Komponenten. Das tut es, um unnötige Arbeit zu vermeiden und dem Browser zu ermöglichen, die Dinge effizienter zu batchen.</p>\n<p>In diesem Fall, wenn <code>editing</code> <code>false</code> ist, ist das Bearbeitungs-<code><input></code> nicht sichtbar, weil es nicht im DOM existiert. Innerhalb der <code>onEdit()</code>-Funktion setzen wir <code>editing = true</code> und versuchen sofort darauf, auf die <code>nameEl</code>-Variable zuzugreifen und <code>nameEl.focus()</code> auszuführen. Das Problem hier ist, dass Svelte das DOM noch nicht aktualisiert hat.</p>\n<p>Eine Möglichkeit, dieses Problem zu lösen, besteht darin, <a href=\"/de/docs/Web/API/Window/setTimeout\"><code>setTimeout()</code></a> zu verwenden, um den Aufruf von <code>nameEl.focus()</code> bis zum nächsten Ereigniszyklus zu verzögern und Svelte die Möglichkeit zu geben, das DOM zu aktualisieren.</p>\n<p>Versuchen Sie dies jetzt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function onEdit() {\n editing = true; // enter editing mode\n setTimeout(() => nameEl.focus(), 0); // asynchronous call to set focus to name input\n}\n</code></pre></div>\n<p>Die obige Lösung funktioniert, ist aber eher unelegant. Svelte bietet einen besseren Weg, um mit diesen Fällen umzugehen. Die <a href=\"https://learn.svelte.dev/tutorial/tick\" class=\"external\" target=\"_blank\"><code>tick()</code>-Funktion</a> gibt ein Promise zurück, das aufgelöst wird, sobald alle ausstehenden Statusänderungen auf das DOM angewendet wurden (oder sofort, wenn keine ausstehenden Statusänderungen vorliegen). Versuchen wir es jetzt.</p>\n<ol>\n<li>\n<p>Importieren Sie zunächst <code>tick</code> am Anfang des <code><script></code>-Bereichs neben Ihrem bestehenden Import:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import { tick } from \"svelte\";\n</code></pre></div>\n</li>\n<li>\n<p>Rufen Sie als Nächstes <code>tick()</code> mit <a href=\"/de/docs/Web/JavaScript/Reference/Operators/await\"><code>await</code></a> von einer <a href=\"/de/docs/Web/JavaScript/Reference/Statements/async_function\">asynchronen Funktion</a> auf; aktualisieren Sie <code>onEdit()</code> wie folgt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>async function onEdit() {\n editing = true; // enter editing mode\n await tick();\n nameEl.focus();\n}\n</code></pre></div>\n</li>\n<li>\n<p>Wenn Sie es jetzt ausprobieren, werden Sie sehen, dass alles wie erwartet funktioniert.</p>\n</li>\n</ol>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nUm ein weiteres Beispiel der Verwendung von <code>tick()</code> zu sehen, besuchen Sie das <a href=\"https://learn.svelte.dev/tutorial/tick\" class=\"external\" target=\"_blank\">Svelte-Tutorial</a>.</p>\n</div>"}},{"type":"prose","value":{"id":"hinzufügen_von_funktionalität_zu_html-elementen_mit_der_useaction-direktive","title":"Hinzufügen von Funktionalität zu HTML-Elementen mit der <code>use:action</code>-Direktive","isH3":false,"content":"<p>Als nächstes möchten wir, dass der Name <code>input</code> automatisch den gesamten Text bei Fokus selektiert. Und wir möchten dies auf eine solche Weise entwickeln, dass es problemlos auf jedes HTML-<code><input></code> wiederverwendet und auf deklarativer Weise angewendet werden kann. Wir werden diese Anforderung als Vorwand nutzen, um ein sehr mächtiges Feature zu zeigen, das Svelte uns bietet, um Funktionalität zu regulären HTML-Elementen hinzuzufügen: <a href=\"https://svelte.dev/docs/svelte-action\" class=\"external\" target=\"_blank\">Actions</a>.</p>\n<p>Um den Text eines DOM-Input-Knotens auszuwählen, müssen wir <a href=\"/de/docs/Web/API/HTMLInputElement/select\"><code>select()</code></a> aufrufen. Um diese Funktion jedes Mal aufzurufen, wenn der Knoten den Fokus erhält, brauchen wir einen Event-Listener wie diesen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>node.addEventListener(\"focus\", (event) => node.select());\n</code></pre></div>\n<p>Und, um Speicherlecks zu vermeiden, sollten wir auch die Funktion <a href=\"/de/docs/Web/API/EventTarget/removeEventListener\"><code>removeEventListener()</code></a> aufrufen, wenn der Knoten zerstört wird.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nAll dies ist nur Standard-WebAPI-Funktionalität; nichts davon ist spezifisch für Svelte.</p>\n</div>\n<p>Wir könnten all dies in unserer <code>Todo</code>-Komponente erreichen, wann immer wir das <code><input></code> zum DOM hinzufügen oder entfernen, aber wir müssten sehr vorsichtig sein, den Event-Listener nach dem Hinzufügen des Knotens zum DOM hinzuzufügen und den Listener zu entfernen, bevor der Knoten aus dem DOM entfernt wird. Darüber hinaus wäre unsere Lösung nicht sehr wiederverwendbar.</p>\n<p>Hier kommen Svelte-Actions ins Spiel. Im Wesentlichen lassen sie uns eine Funktion ausführen, wann immer ein Element dem DOM hinzugefügt wurde, und nachdem es vom DOM entfernt wurde.</p>\n<p>In unserem unmittelbaren Anwendungsfall werden wir eine Funktion namens <code>selectOnFocus()</code> definieren, die einen Knoten als Parameter empfängt. Die Funktion wird einen Event-Listener zu diesem Knoten hinzufügen, sodass wann immer es den Fokus erhält, es den Text auswählt. Dann wird es ein Objekt mit einer <code>destroy</code>-Eigenschaft zurückgeben. Die <code>destroy</code>-Eigenschaft ist das, was Svelte nach dem Entfernen des Knotens aus dem DOM ausführt. Hier werden wir den Listener entfernen, um sicherzustellen, dass wir kein Speicherleck hinterlassen.</p>\n<ol>\n<li>\n<p>Lassen Sie uns die Funktion <code>selectOnFocus()</code> erstellen. Fügen Sie Folgendes am Ende des <code><script></code>-Abschnitts von <code>Todo.svelte</code> hinzu:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function selectOnFocus(node) {\n if (node && typeof node.select === \"function\") {\n // make sure node is defined and has a select() method\n const onFocus = (event) => node.select(); // event handler\n node.addEventListener(\"focus\", onFocus); // when node gets focus call onFocus()\n return {\n destroy: () => node.removeEventListener(\"focus\", onFocus), // this will be executed when the node is removed from the DOM\n };\n }\n}\n</code></pre></div>\n</li>\n<li>\n<p>Jetzt müssen wir dem <code><input></code> sagen, dass es diese Funktion mit der <a href=\"https://svelte.dev/docs/element-directives#use-action\" class=\"external\" target=\"_blank\"><code>use:action</code></a>-Direktive verwenden soll:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">svelte</span></div><pre class=\"brush: svelte notranslate\"><code><input use:selectOnFocus />\n</code></pre></div>\n<p>Mit dieser Direktive sagen wir Svelte, dass es diese Funktion ausführen soll, indem es den DOM-Knoten des <code><input></code> als Parameter übergibt, sobald die Komponente am DOM montiert ist. Es wird auch für die Ausführung der <code>destroy</code>-Funktion verantwortlich sein, wenn die Komponente vom DOM entfernt wird. Damit erledigt die <code>use</code>-Direktive den Komponentenlebenszyklus für uns.</p>\n<p>In unserem Fall würde unser <code><input></code> so enden: Aktualisieren Sie das erste Label/Input-Paar der Komponente (innerhalb der Bearbeitungsvorlage) wie folgt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">svelte</span></div><pre class=\"brush: svelte notranslate\"><code><label for=\"todo-{todo.id}\" class=\"todo-label\">New name for '{todo.name}'</label>\n<input\n bind:value={name}\n bind:this={nameEl}\n use:selectOnFocus\n type=\"text\"\n id=\"todo-{todo.id}\"\n autocomplete=\"off\"\n class=\"todo-text\" />\n</code></pre></div>\n</li>\n<li>\n<p>Probieren Sie es aus. Gehen Sie zu Ihrer App, drücken Sie die <em>Bearbeiten</em>-Schaltfläche eines To-Dos, drücken Sie dann <kbd>Tab</kbd>, um den Fokus vom <code><input></code> wegzunehmen. Klicken Sie nun auf das <code><input></code>, und Sie werden sehen, dass der gesamte Eingabetext ausgewählt wird.</p>\n</li>\n</ol>"}},{"type":"prose","value":{"id":"die_aktion_wiederverwendbar_machen","title":"Die Aktion wiederverwendbar machen","isH3":true,"content":"<p>Machen wir diese Funktion nun wirklich über Komponenten hinweg wiederverwendbar. <code>selectOnFocus()</code> ist einfach eine Funktion ohne Abhängigkeit zur <code>Todo.svelte</code>-Komponente, sodass wir sie einfach in eine Datei extrahieren und von dort aus verwenden können.</p>\n<ol>\n<li>\n<p>Erstellen Sie eine neue Datei, <code>actions.js</code>, im <code>src</code>-Ordner.</p>\n</li>\n<li>\n<p>Geben Sie ihr den folgenden Inhalt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>export function selectOnFocus(node) {\n if (node && typeof node.select === \"function\") {\n // make sure node is defined and has a select() method\n const onFocus = (event) => node.select(); // event handler\n node.addEventListener(\"focus\", onFocus); // when node gets focus call onFocus()\n return {\n destroy: () => node.removeEventListener(\"focus\", onFocus), // this will be executed when the node is removed from the DOM\n };\n }\n}\n</code></pre></div>\n</li>\n<li>\n<p>Jetzt importieren Sie es von innerhalb <code>Todo.svelte</code>; fügen Sie die folgende Importanweisung direkt unter den anderen hinzu:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import { selectOnFocus } from \"../actions.js\";\n</code></pre></div>\n</li>\n<li>\n<p>Und entfernen Sie die <code>selectOnFocus()</code>-Definition aus <code>Todo.svelte</code>, da wir sie dort nicht mehr benötigen.</p>\n</li>\n</ol>"}},{"type":"prose","value":{"id":"unsere_aktion_wiederverwendbar_machen","title":"Unsere Aktion wiederverwendbar machen","isH3":true,"content":"<p>Um die Wiederverwendbarkeit unserer Aktion zu demonstrieren, verwenden wir sie in <code>NewTodo.svelte</code>.</p>\n<ol>\n<li>\n<p>Importieren Sie <code>selectOnFocus()</code> aus <code>actions.js</code> in diese Datei ebenfalls, wie zuvor:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import { selectOnFocus } from \"../actions.js\";\n</code></pre></div>\n</li>\n<li>\n<p>Fügen Sie die <code>use:selectOnFocus</code>-Direktive zu dem <code><input></code> hinzu, so:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">svelte</span></div><pre class=\"brush: svelte notranslate\"><code><input\n bind:value={name}\n bind:this={nameEl}\n use:selectOnFocus\n type=\"text\"\n id=\"todo-0\"\n autocomplete=\"off\"\n class=\"input input__lg\" />\n</code></pre></div>\n</li>\n</ol>\n<p>Mit wenigen Codezeilen können wir Funktionalität zu regulären HTML-Elementen auf eine sehr wiederverwendbare und deklarative Weise hinzufügen. Es braucht nur ein <code>import</code> und eine kurze Direktive wie <code>use:selectOnFocus</code>, die klar ihren Zweck beschreibt. Und das erreichen wir ohne die Notwendigkeit, ein benutzerdefiniertes Wrapper-Element wie <code>TextInput</code>, <code>MyInput</code> oder Ähnliches zu erstellen. Darüber hinaus können Sie einem Element so viele <code>use:action</code>-Direktiven hinzufügen, wie Sie möchten.</p>\n<p>Auch mussten wir uns nicht mit <code>onMount()</code>, <code>onDestroy()</code> oder <code>tick()</code> auseinandersetzen — die <code>use</code>-Direktive kümmert sich für uns um den Komponentenlebenszyklus.</p>"}},{"type":"prose","value":{"id":"weitere_verbesserungen_von_aktionen","title":"Weitere Verbesserungen von Aktionen","isH3":true,"content":"<p>Im vorherigen Abschnitt, während wir mit den <code>Todo</code>-Komponenten arbeiteten, mussten wir mit <code>bind:this</code>, <code>tick()</code>, und <code>async</code>-Funktionen umgehen, nur um dem <code><input></code> den Fokus zu geben, sobald es dem DOM hinzugefügt wurde.</p>\n<ol>\n<li>\n<p>So können wir es stattdessen mit Aktionen implementieren:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const focusOnInit = (node) =>\n node && typeof node.focus === \"function\" && node.focus();\n</code></pre></div>\n</li>\n<li>\n<p>Und dann benötigen wir in unserer Markup nur eine weitere <code>use:</code>-Direktive:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">svelte</span></div><pre class=\"brush: svelte notranslate\"><code><input bind:value={name} use:selectOnFocus use:focusOnInit />\n</code></pre></div>\n</li>\n<li>\n<p>Unsere <code>onEdit()</code>-Funktion kann jetzt viel einfacher sein:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function onEdit() {\n editing = true; // enter editing mode\n}\n</code></pre></div>\n</li>\n</ol>\n<p>Als letztes Beispiel, bevor wir weitermachen, gehen wir zurück zu unserer <code>Todo.svelte</code>-Komponente und geben der <em>Bearbeiten</em>-Schaltfläche den Fokus, nachdem der Benutzer auf <em>Speichern</em> oder <em>Abbrechen</em> gedrückt hat.</p>\n<p>Wir könnten versuchen, einfach unsere <code>focusOnInit</code>-Aktion erneut zu verwenden, indem wir <code>use:focusOnInit</code> zur <em>Bearbeiten</em>-Schaltfläche hinzufügen. Aber dann würden wir einen subtilen Fehler einführen. Wenn Sie ein neues To-Do hinzufügen, wird der Fokus auf die <em>Bearbeiten</em>-Schaltfläche des kürzlich hinzugefügten To-Dos gelegt. Das passiert, weil die <code>focusOnInit</code>-Aktion ausgeführt wird, wenn die Komponente erstellt wird.</p>\n<p>Das ist nicht das, was wir wollen — wir wollen, dass die <em>Bearbeiten</em>-Schaltfläche nur dann den Fokus erhält, wenn der Benutzer auf <em>Speichern</em> oder <em>Abbrechen</em> gedrückt hat.</p>\n<ol>\n<li>\n<p>Gehen Sie zurück zu Ihrer <code>Todo.svelte</code>-Datei.</p>\n</li>\n<li>\n<p>Zunächst erstellen wir ein Flag namens <code>editButtonPressed</code> und initialisieren es mit <code>false</code>. Fügen Sie dies direkt unter Ihren anderen Variablendefinitionen hinzu:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let editButtonPressed = false; // track if edit button has been pressed, to give focus to it after cancel or save\n</code></pre></div>\n</li>\n<li>\n<p>Als Nächstes modifizieren wir die Funktionalität der <em>Bearbeiten</em>-Schaltfläche, um dieses Flag zu speichern, und erstellen die Aktion dafür. Aktualisieren Sie die <code>onEdit()</code>-Funktion wie folgt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function onEdit() {\n editButtonPressed = true; // user pressed the Edit button, focus will come back to the Edit button\n editing = true; // enter editing mode\n}\n</code></pre></div>\n</li>\n<li>\n<p>Darunter fügen Sie die folgende Definition für <code>focusEditButton()</code> hinzu:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const focusEditButton = (node) => editButtonPressed && node.focus();\n</code></pre></div>\n</li>\n<li>\n<p>Schließlich <code>use</code> wir die <code>focusEditButton</code>-Aktion auf der <em>Bearbeiten</em>-Schaltfläche, wie folgt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">svelte</span></div><pre class=\"brush: svelte notranslate\"><code><button type=\"button\" class=\"btn\" on:click={onEdit} use:focusEditButton>\n Edit<span class=\"visually-hidden\"> {todo.name}</span>\n</button>\n</code></pre></div>\n</li>\n<li>\n<p>Gehen Sie zurück und probieren Sie Ihre App erneut aus. An diesem Punkt wird jedes Mal, wenn die <em>Bearbeiten</em>-Schaltfläche dem DOM hinzugefügt wird, die <code>focusEditButton</code>-Aktion ausgeführt, aber es wird nur dann dem Knopf den Fokus geben, wenn das <code>editButtonPressed</code>-Flag <code>true</code> ist.</p>\n</li>\n</ol>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nWir haben hier nur die Oberfläche von Aktionen gekratzt. Aktionen können auch reaktive Parameter haben, und Svelte lässt uns erkennen, wenn sich einer dieser Parameter ändert. So können wir Funktionalität hinzufügen, die sich gut in das reaktive System von Svelte einfügt. Für eine detailliertere Einführung in Aktionen sollten Sie das <a href=\"https://learn.svelte.dev/tutorial/actions\" class=\"external\" target=\"_blank\">interaktive Svelte-Tutorial</a> oder die <a href=\"https://svelte.dev/docs/element-directives#use-action\" class=\"external\" target=\"_blank\">Svelte <code>use:action</code>-Dokumentation</a> in Betracht ziehen.</p>\n</div>"}},{"type":"prose","value":{"id":"komponentenbindung_methoden_und_variablen_von_komponenten_mit_bindthiscomponent-direktive_bereitstellen","title":"Komponentenbindung: Methoden und Variablen von Komponenten mit <code>bind:this={component}</code>-Direktive bereitstellen","isH3":false,"content":"<p>Es gibt noch eine Barrierefreiheitsproblematik. Wenn der Nutzer die <em>Löschen</em>-Schaltfläche drückt, verschwindet der Fokus.</p>\n<p>Die letzte Funktion, die wir in diesem Artikel betrachten werden, besteht darin, dass der Fokus auf die Statusüberschrift gesetzt wird, nachdem ein To-Do gelöscht wurde.</p>\n<p>Warum die Statusüberschrift? In diesem Fall wurde das Element, das den Fokus hatte, gelöscht, daher gibt es keinen klaren Kandidaten, um den Fokus zu erhalten. Wir haben die Statusüberschrift gewählt, weil sie sich in der Nähe der To-Do-Liste befindet und eine Möglichkeit ist, visuelles Feedback über das Entfernen der Aufgabe zu geben sowie anzuzeigen, was für Screenreader-Benutzer passiert ist.</p>\n<p>Zuerst werden wir die Statusüberschrift in ihre eigene Komponente extrahieren.</p>\n<ol>\n<li>\n<p>Erstellen Sie eine neue Datei, <code>components/TodosStatus.svelte</code>.</p>\n</li>\n<li>\n<p>Fügen Sie die folgenden Inhalte hinzu:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">svelte</span></div><pre class=\"brush: svelte notranslate\"><code><script>\n export let todos;\n\n $: totalTodos = todos.length;\n $: completedTodos = todos.filter((todo) => todo.completed).length;\n</script>\n\n<h2 id=\"list-heading\">\n {completedTodos} out of {totalTodos} items completed\n</h2>\n</code></pre></div>\n</li>\n<li>\n<p>Importieren Sie die Datei am Anfang von <code>Todos.svelte</code>, indem Sie die folgende Importanweisung unter den anderen hinzufügen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import TodosStatus from \"./TodosStatus.svelte\";\n</code></pre></div>\n</li>\n<li>\n<p>Ersetzen Sie die <code><h2></code>-Statusüberschrift in <code>Todos.svelte</code> durch einen Aufruf der <code>TodosStatus</code>-Komponente und übergeben <code>todos</code> als Prop, so:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">svelte</span></div><pre class=\"brush: svelte notranslate\"><code><TodosStatus {todos} />\n</code></pre></div>\n</li>\n<li>\n<p>Sie können auch ein wenig aufräumen, indem Sie die <code>totalTodos</code>- und <code>completedTodos</code>-Variablen aus <code>Todos.svelte</code> entfernen. Entfernen Sie einfach die Zeilen <code>$: totalTodos = …</code> und <code>$: completedTodos = …</code> und entfernen Sie auch den Verweis auf <code>totalTodos</code>, wenn wir <code>newTodoId</code> berechnen, und verwenden Sie stattdessen <code>todos.length</code>. Ersetzen Sie dazu den Block, der mit <code>let newTodoId</code> beginnt, durch diesen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>$: newTodoId = todos.length ? Math.max(...todos.map((t) => t.id)) + 1 : 1;\n</code></pre></div>\n</li>\n<li>\n<p>Alles funktioniert wie erwartet — wir haben gerade das letzte Stück Markup in seine eigene Komponente extrahiert.</p>\n</li>\n</ol>\n<p>Jetzt müssen wir einen Weg finden, um der <code><h2></code>-Statusbeschreibung nach dem Entfernen eines To-Dos den Fokus zu geben.</p>\n<p>Bisher haben wir gesehen, wie man Informationen über <code>props</code> an eine Komponente sendet und wie eine Komponente über Ereignisse oder bidirektionale Datenbindung mit ihrem Elternteil kommunizieren kann. Das Kind könnte eine Referenz auf den <code><h2></code>-Knoten mit <code>using bind:this={dom_node}</code> erhalten und ihn durch bidirektionale Datenbindung nach außen freigeben. Aber das würde die Komponentenkapselung brechen; den Fokus darauf zu setzen, sollte seine eigene Verantwortung sein.</p>\n<p>Wir benötigen also, dass die <code>TodosStatus</code>-Komponente eine Methode bereitstellt, die Ihr Elternteil aufrufen kann, um den Fokus darauf zu legen. Es ist ein sehr häufiges Szenario, dass eine Komponente benötigt wird, um ein Verhalten oder Informationen für den Nutzer bereitzustellen; lassen Sie uns sehen, wie man dies mit Svelte erreichen kann.</p>\n<p>Wir haben bereits gesehen, dass Svelte <code>export let varname = …</code> verwendet, um <a href=\"https://svelte.dev/docs/svelte-components#script-1-export-creates-a-component-prop\" class=\"external\" target=\"_blank\">Props zu deklarieren</a>. Aber wenn Sie statt <code>let</code> ein <code>const</code>, <code>class</code> oder <code>function</code> exportieren, ist es von außen schreibgeschützt. Funktionsausdrücke sind jedoch gültige Props. Im folgenden Beispiel sind die ersten drei Deklarationen Props und der Rest sind exportierte Werte:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">svelte</span></div><pre class=\"brush: svelte notranslate\"><code><script>\n export let bar = \"optional default initial value\"; // prop\n export let baz = undefined; // prop\n export let format = (n) => n.toFixed(2); // prop\n\n // these are readonly\n export const thisIs = \"readonly\"; // read-only export\n\n export function greet(name) {\n // read-only export\n alert(`Hello, ${name}!`);\n }\n\n export const greet = (name) => alert(`Hello, ${name}!`); // read-only export\n</script>\n</code></pre></div>\n<p>Mit dem im Hinterkopf, lassen Sie uns zu unserem Anwendungsfall zurückkehren. Wir erstellen eine Funktion namens <code>focus()</code>, die der <code><h2></code>-Überschrift den Fokus gibt. Dafür benötigen wir eine <code>headingEl</code>-Variable, um den Referenz auf den DOM-Knoten zu halten, und wir müssen es an das <code><h2></code>-Element mit <code>bind:this={headingEl}</code> binden. Unsere Fokusmethode wird einfach <code>headingEl.focus()</code> ausführen.</p>\n<ol>\n<li>\n<p>Aktualisieren Sie die Inhalte von <code>TodosStatus.svelte</code> wie folgt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">svelte</span></div><pre class=\"brush: svelte notranslate\"><code><script>\n export let todos;\n\n $: totalTodos = todos.length;\n $: completedTodos = todos.filter((todo) => todo.completed).length;\n\n let headingEl;\n\n export function focus() {\n // shorter version: export const focus = () => headingEl.focus()\n headingEl.focus();\n }\n</script>\n\n<h2 id=\"list-heading\" bind:this={headingEl} tabindex=\"-1\">\n {completedTodos} out of {totalTodos} items completed\n</h2>\n</code></pre></div>\n<p>Beachten Sie, dass wir dem <code><h2></code> ein <code>tabindex</code>-Attribut hinzugefügt haben, um es zu ermöglichen, dass das Element den Fokus programmatisch erhält.</p>\n<p>Wie wir bereits gesehen haben, gibt uns die Verwendung der <code>bind:this={headingEl}</code>-Direktive einen Verweis auf den DOM-Knoten in der Variablen <code>headingEl</code>. Dann verwenden wir <code>export function focus()</code>, um eine Funktion bereitzustellen, die der <code><h2></code>-Überschrift den Fokus gibt.</p>\n<p>Wie können wir diese exportierten Werte von dem Elternteil aus erreichen? Genauso wie Sie mit der <code>bind:this={dom_node}</code>-Direktive DOM-Elemente binden können, können Sie auch Instanzen von Komponenten selbst mit <code>bind:this={component}</code> binden. Wenn Sie also <code>bind:this</code> bei einem HTML-Element verwenden, erhalten Sie eine Referenz auf den DOM-Knoten, und wenn Sie es bei einer Svelte-Komponente machen, erhalten Sie eine Referenz auf die Instanz dieser Komponente.</p>\n</li>\n<li>\n<p>Um an die Instanz von <code>TodosStatus</code> zu binden, erstellen wir zuerst eine <code>todosStatus</code>-Variable in <code>Todos.svelte</code>. Fügen Sie die folgende Zeile unter Ihren <code>import</code>-Anweisungen hinzu:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>let todosStatus; // reference to TodosStatus instance\n</code></pre></div>\n</li>\n<li>\n<p>Fügen Sie als Nächstes eine <code>bind:this={todosStatus}</code>-Direktive dem Aufruf hinzu, wie folgt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">svelte</span></div><pre class=\"brush: svelte notranslate\"><code>\n<TodosStatus bind:this={todosStatus} {todos} />\n</code></pre></div>\n</li>\n<li>\n<p>Jetzt können wir die <code>exportiert focus()</code>-Methode aus unserer <code>removeTodo()</code>-Funktion aufrufen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function removeTodo(todo) {\n todos = todos.filter((t) => t.id !== todo.id);\n todosStatus.focus(); // give focus to status heading\n}\n</code></pre></div>\n</li>\n<li>\n<p>Gehen Sie zurück zu Ihrer App. Jetzt, wenn Sie ein To-Do löschen, wird die Statusüberschrift fokussiert. Dies ist nützlich, um die Änderung der Anzahl der To-Dos sowohl für sehende Benutzer als auch für Benutzer von Screenreadern hervorzuheben.</p>\n</li>\n</ol>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nSie fragen sich vielleicht, warum wir eine neue Variable für die Komponentenbindung deklarieren müssen. Warum können wir <code>TodosStatus.focus()</code> nicht einfach aufrufen? Sie könnten mehrere Instanzen von <code>TodosStatus</code> aktiv haben, sodass Sie einen Weg benötigen, um auf jede spezifische Instanz zu verweisen. Deshalb müssen Sie eine Variable festlegen, um jede spezifische Instanz zu binden.</p>\n</div>"}},{"type":"prose","value":{"id":"der_bisherige_code","title":"Der bisherige Code","isH3":false,"content":""}},{"type":"prose","value":{"id":"git_2","title":"Git","isH3":true,"content":"<p>Um den Stand des Codes zu sehen, wie er am Ende dieses Artikels sein sollte, greifen Sie auf Ihre Kopie unseres Repos auf diese Weise zu:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>cd mdn-svelte-tutorial/06-stores\n</code></pre></div>\n<p>Oder laden Sie direkt den Inhalt des Ordners herunter:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npx degit opensas/mdn-svelte-tutorial/06-stores\n</code></pre></div>\n<p>Denken Sie daran, <code>npm install && npm run dev</code> auszuführen, um Ihre App im Entwicklungsmodus zu starten.</p>"}},{"type":"prose","value":{"id":"repl_2","title":"REPL","isH3":true,"content":"<p>Um den aktuellen Stand des Codes in einem REPL zu sehen, besuchen Sie:</p>\n<p><a href=\"https://svelte.dev/repl/d1fa84a5a4494366b179c87395940039?version=3.23.2\" class=\"external\" target=\"_blank\">https://svelte.dev/repl/d1fa84a5a4494366b179c87395940039?version=3.23.2</a></p>"}},{"type":"prose","value":{"id":"zusammenfassung","title":"Zusammenfassung","isH3":false,"content":"<p>In diesem Artikel haben wir alle erforderlichen Funktionen zu unserer App hinzugefügt und uns zusätzlich um mehrere Barrierefreiheits- und Usability-Probleme gekümmert. Wir haben auch unsere App in überschaubare Komponenten aufgeteilt, von denen jede eine eindeutige Verantwortung hat.</p>\n<p>In der Zwischenzeit haben wir einige fortgeschrittene Svelte-Techniken gesehen, wie:</p>\n<ul>\n<li>Umgang mit Reaktivitätsproblemen bei der Aktualisierung von Objekten und Arrays</li>\n<li>Arbeiten mit DOM-Knoten mit <code>bind:this={dom_node}</code> (DOM-Elementbindung)</li>\n<li>Verwendung der Komponentenlebenszyklusfunktion <code>onMount()</code></li>\n<li>Erzwingen, dass Svelte ausstehende Statusänderungen mit der <code>tick()</code>-Funktion auflöst</li>\n<li>Hinzufügen von Funktionalität zu HTML-Elementen auf eine wiederverwendbare und deklarative Weise mit der <code>use:action</code>-Direktive</li>\n<li>Zugriff auf Methoden der Komponente mit <code>bind:this={component}</code> (Komponentenbindung)</li>\n</ul>\n<p>Im nächsten Artikel werden wir sehen, wie man Stores verwendet, um zwischen Komponenten zu kommunizieren und wie man Animationen zu unseren Komponenten hinzufügt.</p>\n<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_components\"><span class=\"button-wrap\"> Zurück </span></a></li><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries\"><span class=\"button-wrap\"> Übersicht: JavaScript-Frameworks und -Bibliotheken</span></a></li><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_stores\"><span class=\"button-wrap\"> Weiter </span></a></li></ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":true,"locale":"de","mdn_url":"/de/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_reactivity_lifecycle_accessibility","modified":"2025-02-17T00:20:27.000Z","native":"Deutsch","noIndexing":false,"other_translations":[{"locale":"en-US","title":"Advanced Svelte: Reactivity, lifecycle, accessibility","native":"English (US)"},{"locale":"zh-CN","title":"Svelte 进阶：响应式、生命周期以及无障碍","native":"中文 (简体)"}],"pageTitle":"Fortgeschrittenes Svelte: Reaktivität, Lebenszyklus, Barrierefreiheit - Lernen Sie Webentwicklung | MDN","parents":[{"uri":"/de/docs/Learn_web_development","title":"Lernen Sie Webentwicklung"},{"uri":"/de/docs/Learn_web_development/Core","title":"Kern-Lernmodule"},{"uri":"/de/docs/Learn_web_development/Core/Frameworks_libraries","title":"JavaScript-Frameworks und -Bibliotheken"},{"uri":"/de/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_reactivity_lifecycle_accessibility","title":"Fortgeschrittenes Svelte: Reaktivität, Lebenszyklus, Barrierefreiheit"}],"popularity":null,"short_title":"Fortgeschrittenes Svelte: Reaktivität, Lebenszyklus, Barrierefreiheit","sidebarHTML":"<ol><li class=\"section\"><a href=\"/de/docs/Learn_web_development/Getting_started\">Einstiegsmodule</a></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup\">Umgebung einrichten</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software\">Installation grundlegender Software</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web\">Surfen im Web</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors\">Code-Editor</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files\">Umgang mit Dateien</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Command_line\">Leitfaden für die Befehlszeilen-Einführung</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website\">Ihre erste Website</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like\">Wie wird Ihre Website aussehen?</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content\">HTML: Erstellen der Inhalte</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content\">CSS: Gestaltung des Inhalts</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity\">JavaScript: Interaktivität hinzufügen</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website\">Veröffentlichen Ihrer Website</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards\">Webstandards</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works\">How the web works</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model\">Das Modell der Webstandards</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites\">Wie Browser Websites laden</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills\">Soziale Kompetenzen</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning\">Forschung und Lernen</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork\">Zusammenarbeit und Teamarbeit</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes\">Workflows und Prozesse</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews\">Erfolgreich in Vorstellungsgesprächen</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn_web_development/Core\">Kernmodule</a></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Structuring_content\">Inhalte mit HTML strukturieren</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax\">Grundlegende HTML-Syntax</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata\">Was befindet sich im Kopf? Metadaten einer Webseite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs\">Überschriften und Absätze in HTML</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance\">Hervorhebung und Wichtigkeit</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Lists\">Listen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Structuring_documents\">Strukturierung von Dokumenten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features\">Erweiterte Textfunktionen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Creating_links\">Erstellen von Links</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter\">Herausforderung: Eine E-Mail korrekt auszeichnen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content\">Herausforderung: Strukturierung einer Inhaltsseite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_images\">HTML-Bilder</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio\">HTML video und audio</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page\">Herausforderung: Mozilla Splash-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics\">Grundlagen von HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Table_accessibility\">Barrierefreiheit von HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Planet_data_table\">Herausforderung: Strukturierung einer Planeten-Datentabelle</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_forms\">Formulare und Schaltflächen in HTML</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML\">Debugging von HTML</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Styling_basics\">Grundlagen des CSS-Stylings</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/What_is_CSS\">Was ist CSS?</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Getting_started\">Einstieg in CSS</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page\">Herausforderung: Gestaltung einer Biografie-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Basic_selectors\">Grundlagen der CSS-Selektoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors\">Attribut-Selektoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements\">Pseudoklassen und Pseudoelemente</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Combinators\">Kombinatoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Box_model\">Das Box-Modell</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts\">Umgang mit Konflikten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Values_and_units\">CSS-Werte und -Einheiten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Sizing\">Größenbestimmung von Elementen in CSS</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders\">Hintergründe und Rahmen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Overflow\">Überlaufender Inhalt</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Images_media_forms\">Bilder, Medien und Formularelemente</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Tables\">Tabellen stylen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS\">Debugging CSS</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension\">Herausforderung: Grundlegendes CSS-Verständnis</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper\">Herausforderung: Erstellung eines ansprechenden Briefpapiers</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box\">Herausforderung: Eine cool aussehende Box</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Text_styling\">CSS-Textgestaltung</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Fundamentals\">Grundlegendes zur Text- und Schriftgestaltung</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Styling_lists\">Listen gestalten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Styling_links\">Gestaltung von Links</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Web_fonts\">Webfonts</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage\">Herausforderung: Setzen einer Startseite für eine Gemeinschaftsschule</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/CSS_layout\">CSS-Layout</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Introduction\">Einführung in CSS-Layout</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Floats\">Floats</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Positioning\">Platzierung</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Flexbox\">Flexbox</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Grids\">CSS-Grid-Layout</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Responsive_Design\">Responsives Design</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Media_queries\">Grundlagen von Media Query</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension\">Herausforderung: Grundlegendes Verständnis von Layouts</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Scripting\">Dynamisches Scripting mit JavaScript</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/What_is_JavaScript\">Was ist JavaScript?</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/A_first_splash\">Erster Einblick in JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/What_went_wrong\">Was ist schiefgelaufen? JavaScript-Fehlerbehebung</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Variables\">Speichern der benötigten Informationen — Variablen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Math\">Grundlegende Mathematik in JavaScript – Zahlen und Operatoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Strings\">Umgang mit Text — Zeichenketten in JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Useful_string_methods\">Nützliche String-Methoden</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Arrays\">Arrays</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Silly_story_generator\">Herausforderung: Blödsinnige Geschichtengenerator</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Conditionals\">Entscheidungen in Ihrem Code treffen — Konditionalen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Loops\">Code-Schleifen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Functions\">Funktionen — wiederverwendbare Codeblöcke</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Build_your_own_function\">Erstellen Sie Ihre eigene Funktion</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Return_values\">Funktionsrückgabewerte</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Events\">Einführung in Ereignisse</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Event_bubbling\">Ereignis-Bubbling</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Image_gallery\">Herausforderung: Bildergalerie</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Object_basics\">JavaScript-Objektgrundlagen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/DOM_scripting\">Einführung in DOM-Scripting</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Network_requests\">Netzwerkanfragen mit JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/JSON\">Arbeiten mit JSON</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript\">Debugging JavaScript and handling errors</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries\">JavaScript-Frameworks und -Bibliotheken</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/Introduction\">Einführung in client-seitige Frameworks</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/Main_features\">Hauptmerkmale von Frameworks</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started\">Erste Schritte mit React</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning\">Beginn unserer React To-Do-Liste</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_components\">Komponenten in unserer React-App erstellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state\">React Interaktivität: Events und State</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering\">Reaktivität in React: Bearbeiten, Filtern, bedingtes Rendern</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility\">Barrierefreiheit in React</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_resources\">React-Ressourcen</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Accessibility\">Barrierefreiheit</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility\">Was ist Barrierefreiheit?</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Tooling\">Barrierefreiheitstools und unterstützende Technologien</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/HTML\">HTML: Eine gute Grundlage für Barrierefreiheit</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript\">CSS and JavaScript Zugänglichkeitsbest Practices</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics\">WAI-ARIA Grundlagen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Multimedia\">Barrierefreie Multimedia-Inhalte</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Mobile\">Mobile Accessibility</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting\">Herausforderung: Barrierefreiheits-Fehlerbehebung</a></li></ol></details></li><li><a href=\"/de/docs/Learn_web_development/Core/Design_for_developers\">Design für Entwickler:innen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Version_control\">Versionskontrolle</a></li><li class=\"section\"><a href=\"/de/docs/Learn_web_development/Extensions\">Erweiterungsmodule</a></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects\">Advanced JavaScript objects</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes\">Objektprototypen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming\">Objektorientierte Programmierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript\">Klassen in JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice\">Objektbaupraxis</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features\">Herausforderung: Hinzufügen von Funktionen zu unserem hüpfenden Ball-Demo</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs\">Client-seitige Web-APIs</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction\">Einführung in Web-APIs</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs\">Video- und Audio-APIs</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics\">Zeichnen von Grafiken</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage\">Client-seitiger Speicher</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs\">Third-party APIs</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS\">Asynchrones JavaScript</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Introducing\">Einführung in asynchrones JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Promises\">Anleitung zur Verwendung von Promises</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API\">Wie man eine Promise-basierte API implementiert</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers\">Einführung in Worker</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations\">Herausforderung: Animationen sequenzieren</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Forms\">Webformulare — Arbeiten mit Benutzerdaten</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Your_first_form\">Ihr erstes Formular</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form\">Wie man ein Webformular strukturiert</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls\">Grundlegende native Formularsteuerungen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/HTML5_input_types\">Die HTML5-Eingabetypen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Other_form_controls\">Andere Formularelemente</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Styling_web_forms\">Styling von Webformularen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling\">Fortgeschrittenes Formular-Styling</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes\">UI-Pseudoklassen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Form_validation\">Client-seitige Formularvalidierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data\">Senden von Formulardaten</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools\">Verständnis für clientseitige Tools</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Overview\">Überblick über Client-seitige Tools</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Package_management\">Grundlagen des Paketmanagements</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain\">Einführung in eine vollständige Werkzeugkette</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Deployment\">Bereitstellung unserer App</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side\">Serverseitige Programmierung</a></summary><ol><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps\">Erste Schritte auf der Serverseite</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction\">Einführung in die Server-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview\">Überblick über Client-Server</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks\">Server-seitige Web-Frameworks</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security\">Website-Sicherheit</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django\">Django Web-Framework (Python)</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Introduction\">Einführung in Django</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/development_environment\">Einrichten einer Django-Entwicklungsumgebung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website\">Django Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website\">Django-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Models\">Django Tutorial Teil 3: Verwenden von Modellen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site\">Django Tutorial Teil 4: Die Django Admin-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Home_page\">Django Tutorial Teil 5: Erstellen unserer Homepage</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views\">Django Tutorial Teil 6: Generische Listen- und Detailansichten</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Sessions\">Django-Tutorial Teil 7: Sitzungs-Framework</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Authentication\">Django-Tutorial Teil 8: Benutzer-Authentifizierung und -Berechtigungen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Forms\">Django Tutorial Teil 9: Arbeiten mit Formularen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Testing\">Django Tutorial Teil 10: Testen einer Django-Webanwendung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Deployment\">Django-Tutorial Teil 11: Bereitstellung von Django für die Produktion</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security\">Django Webanwendungssicherheit</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog\">Bewertung: DIY Django Mini-Blog</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs\">Express Web-Framework (Node.js)</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction\">Einführung in Express/Node</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment\">Einrichten einer Node-Entwicklungsumgebung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website\">Express-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose\">Express-Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose)</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes\">Express Tutorial Teil 4: Routen und Controller</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data\">Express Tutorial Teil 5: Bibliotheksdaten anzeigen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms\">Express Tutorial Teil 6: Arbeiten mit Formularen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment\">Express Tutorial Teil 7: Bereitstellung im Produktionsumfeld</a></li></ol></details></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Performance\">Web-Performance</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/why_web_performance\">Das \"Warum\" der Web-Performance</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/What_is_web_performance\">Was ist Web-Performance?</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/Perceived_performance\">Wahrgenommene Leistung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/Measuring_performance\">Leistungsmessung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/Multimedia\">Multimedia: Bilder</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/video\">Multimedia: video</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/JavaScript\">JavaScript-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/HTML\">HTML-Performance-Optimierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/CSS\">CSS-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/business_case_for_performance\">Der geschäftliche Nutzen der Web-Performance</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Testing\">Tests</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Introduction\">Einführung in das Cross-Browser-Testing</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Testing_strategies\">Strategien zur Durchführung von Tests</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS\">Umgang mit häufigen HTML- und CSS-Problemen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Feature_detection\">Implementierung der Funktionsprüfung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Automated_testing\">Einführung in automatisiertes Testen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment\">Einrichtung Ihrer eigenen Testautomatisierungsumgebung</a></li></ol></details></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Transform_animate\">CSS transformieren und animieren</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Security_privacy\">Sicherheit und Datenschutz</a></li><li class=\"section\">Weitere Ressourcen</li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Howto\">Häufige Probleme lösen</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Howto/Solve_HTML_problems\">Häufige HTML-Probleme lösen</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Solve_CSS_problems\">Häufige CSS-Probleme lösen</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Solve_JavaScript_problems\">Häufige JavaScript-Probleme lösen</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Web_mechanics\">Webmechanik</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Tools_and_setup\">Tools und Einrichtung</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Design_and_accessibility\">Design und Barrierefreiheit</a></li></ol></details></li><li><a href=\"/de/docs/Learn_web_development/About\">Über</a></li><li><a href=\"/de/docs/Learn_web_development/Educators\">Ressourcen für Lehrkräfte</a></li><li><a href=\"/de/docs/Learn_web_development/Changelog\">Änderungsprotokoll</a></li></ol>","source":{"folder":"de/learn_web_development/core/frameworks_libraries/svelte_reactivity_lifecycle_accessibility","github_url":"https://github.com/mdn/translated-content-de/blob/main/files/de/learn_web_development/core/frameworks_libraries/svelte_reactivity_lifecycle_accessibility/index.md","last_commit_url":"https://github.com/mdn/translated-content-de/commit/452fe502cfb4c9a91c346af17370ecfb6a8bd17e","filename":"index.md"},"summary":"Im letzten Artikel haben wir unserer To-Do-Liste weitere Funktionen hinzugefügt und begonnen, unsere App in Komponenten zu organisieren. In diesem Artikel fügen wir die finalen Funktionen der App hinzu und teilen unsere App weiter in Komponenten auf. Wir werden lernen, wie man mit Reaktivitätsproblemen umgeht, die sich auf die Aktualisierung von Objekten und Arrays beziehen. Um häufige Fallen zu vermeiden, müssen wir tiefer in das Reaktivitätssystem von Svelte eintauchen. Außerdem werden wir uns mit der Lösung einiger Barrierefreiheitsprobleme im Bereich des Fokusmanagements beschäftigen und mehr.","title":"Fortgeschrittenes Svelte: Reaktivität, Lebenszyklus, Barrierefreiheit","toc":[{"text":"Coden Sie mit uns","id":"coden_sie_mit_uns"},{"text":"Arbeit an der Komponente MoreActions","id":"arbeit_an_der_komponente_moreactions"},{"text":"Reaktivitätsprobleme: Aktualisierung von Objekten und Arrays","id":"reaktivitätsprobleme_aktualisierung_von_objekten_und_arrays"},{"text":"Fertigstellen unserer MoreActions-Komponente","id":"fertigstellen_unserer_moreactions-komponente"},{"text":"Arbeiten mit dem DOM: Fokus auf die Details","id":"arbeiten_mit_dem_dom_fokus_auf_die_details"},{"text":"Erforschen von Problemen mit der Tastaturzugänglichkeit in unserer To-Do-App","id":"erforschen_von_problemen_mit_der_tastaturzugänglichkeit_in_unserer_to-do-app"},{"text":"Erstellen einer NewTodo-Komponente","id":"erstellen_einer_newtodo-komponente"},{"text":"Arbeiten mit DOM-Knoten mithilfe der Direktive <code>bind:this={dom_node}</code>","id":"arbeiten_mit_dom-knoten_mithilfe_der_direktive_bindthisdom_node"},{"text":"Komponentenlebenszyklus und die <code>onMount()</code>-Funktion","id":"komponentenlebenszyklus_und_die_onmount-funktion"},{"text":"Warten auf die Aktualisierung des DOM mit der <code>tick()</code> Funktion","id":"warten_auf_die_aktualisierung_des_dom_mit_der_tick_funktion"},{"text":"Hinzufügen von Funktionalität zu HTML-Elementen mit der <code>use:action</code>-Direktive","id":"hinzufügen_von_funktionalität_zu_html-elementen_mit_der_useaction-direktive"},{"text":"Komponentenbindung: Methoden und Variablen von Komponenten mit <code>bind:this={component}</code>-Direktive bereitstellen","id":"komponentenbindung_methoden_und_variablen_von_komponenten_mit_bindthiscomponent-direktive_bereitstellen"},{"text":"Der bisherige Code","id":"der_bisherige_code"},{"text":"Zusammenfassung","id":"zusammenfassung"}],"pageType":"learn-module-chapter"}}</script></body></html>