1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="description" content=""> 7 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"> 8 9 10<meta name="deprecation-app/config/environment" content="%7B%22modulePrefix%22%3A%22deprecation-app%22%2C%22environment%22%3A%22production%22%2C%22apiHost%22%3A%22%22%2C%22rootURL%22%3A%22%2F%22%2C%22locationType%22%3A%22history%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%2C%22_APPLICATION_TEMPLATE_WRAPPER%22%3Afalse%2C%22_DEFAULT_ASYNC_OBSERVERS%22%3Atrue%2C%22_JQUERY_INTEGRATION%22%3Afalse%2C%22_TEMPLATE_ONLY_GLIMMER_COMPONENTS%22%3Atrue%7D%2C%22APP%22%3A%7B%22name%22%3A%22deprecation-app%22%2C%22version%22%3A%221.0.0%2B40f13666%22%7D%2C%22fastboot%22%3A%7B%22hostWhitelist%22%3A%5B%7B%7D%5D%7D%2C%22algolia%22%3A%7B%22algoliaId%22%3A%22Y1OMR4C7MF%22%2C%22algoliaKey%22%3A%225d01c83734dc36754d9e94cbf6f8964d%22%7D%2C%22ember-showdown-shiki%22%3A%7B%22languages%22%3A%5B%22javascript%22%2C%22typescript%22%2C%22glimmer-js%22%2C%22glimmer-ts%22%2C%22handlebars%22%2C%22json%22%2C%22diff%22%2C%22bash%22%5D%7D%2C%22exportApplicationGlobal%22%3Afalse%7D" /> 11<!-- EMBER_CLI_FASTBOOT_TITLE --><title>Ember.js - Deprecations</title> 12<link rel="preload" as="font" type="font/woff2" href="/fonts/Inter-roman.var.woff2?v=3.15" crossorigin> 13 14 <link integrity="" rel="stylesheet" href="/assets/vendor-ef0a57d48b8a337686be4ab4c5ac2b2a.css"> 15<link rel="stylesheet" href="/assets/chunk.3524.1b09cb7d805ee15af53c.css"/> 16 <link integrity="" rel="stylesheet" href="/assets/deprecation-app-d30b3d2418109aa97644d2ca3f7a5d47.css"> 17 18 19 </head> 20 <body> 21
21<script type="x/boundary" id="fastboot-body-start"></script>
21 22 23<header class="es-header" role="banner"> 24 <nav class="es-navbar " aria-label="Primary site navigation"> 25 <a class="navbar-brand-wrapper" href="https://www.emberjs.com"> 26 <img class="navbar-brand" src="/images/ember-logo.svg" alt="home" width="83" height="40"> 27 </a> 28 29 <button class="navbar-toggler" aria-expanded="false" type="button"> 30 Show Site Navigation 31 </button> 32 33 <ul class="navbar-list"> 34 <li class="navbar-list-item dropdown"> 35<!----> <button class="navbar-list-item-dropdown-toggle " aria-expanded="false" type="button"> 36 Docs 37 </button> 38<!----></li> 39 <li class="navbar-list-item dropdown"> 40<!----> <button class="navbar-list-item-dropdown-toggle " aria-expanded="false" type="button"> 41 Releases 42 </button> 43<!----></li> 44 <li class="navbar-list-item "> 45 <a class="navbar-list-item-link" href="https://blog.emberjs.com"> 46 Blog 47 </a> 48<!----></li> 49 <li class="navbar-list-item dropdown"> 50<!----> <button class="navbar-list-item-dropdown-toggle " aria-expanded="false" type="button"> 51 Community 52 </button> 53<!----></li> 54 <li class="navbar-list-item dropdown"> 55<!----> <button class="navbar-list-item-dropdown-toggle " aria-expanded="false" type="button"> 56 About 57 </button> 58<!----></li> 59 </ul> 60 61 <div class="navbar-end"> 62 63 <form class="search-form"> 64 <div class="search-input"> 65 <label class="visually-hidden" for="search-input">Search</label> 66 <input id="search-input" placeholder="Search deprecations" autocomplete="off" type="search"> 67</div> 68 69<div id="ember837" class="ember-tether ember-view ds-dropdown-results"> 70<!----></div> 71 </form> 72 73 </div> 74 </nav> 75</header> 76 77<main> 78 <div class="container"> 79 <button class="es-button toc-toggle" aria-label="expand table of contents" title="expand table of contents" type="button"> 80 81 <img src="/images/expand.svg" alt="expand table of contents"> 82 83</button> 84<div class="layout-grid"> 85 <!----> 86 <nav class="sidebar" aria-label="Desktop Table of Contents"> 87 <div class="padding-vertical-small bg-light-muted rounded-sm"> 88 <h2 class="large padding-bottom-small"> 89 Deprecations by Version: 90 </h2> 91 <div> 92 <button id="toggle-dep-menu-1-0-0" class="level-1 list-unstyled" aria-label="deprecations for version 1.0.0" aria-expanded="false" type="button"> 93 <span data-version="1.0.0">1.0</span> 94 95 </button> 96 97<!----></div> 98 <div> 99 <button id="toggle-dep-menu-1-7-0" class="level-1 list-unstyled" aria-label="deprecations for version 1.7.0" aria-expanded="false" type="button"> 100 <span data-version="1.7.0">1.7</span> 101 102 </button> 103 104<!----></div> 105 <div> 106 <button id="toggle-dep-menu-1-8-0" class="level-1 list-unstyled" aria-label="deprecations for version 1.8.0" aria-expanded="false" type="button"> 107 <span data-version="1.8.0">1.8</span> 108 109 </button> 110 111<!----></div> 112 <div> 113 <button id="toggle-dep-menu-1-9-0" class="level-1 list-unstyled" aria-label="deprecations for version 1.9.0" aria-expanded="false" type="button"> 114 <span data-version="1.9.0">1.9</span> 115 116 </button> 117 118<!----></div> 119 <div> 120 <button id="toggle-dep-menu-1-11-0" class="level-1 list-unstyled" aria-label="deprecations for version 1.11.0" aria-expanded="false" type="button"> 121 <span data-version="1.11.0">1.11</span> 122 123 </button> 124 125<!----></div> 126 <div> 127 <button id="toggle-dep-menu-1-12-0" class="level-1 list-unstyled" aria-label="deprecations for version 1.12.0" aria-expanded="false" type="button"> 128 <span data-version="1.12.0">1.12</span> 129 130 </button> 131 132<!----></div> 133 <div> 134 <button id="toggle-dep-menu-1-13-0" class="level-1 list-unstyled" aria-label="deprecations for version 1.13.0" aria-expanded="false" type="button"> 135 <span data-version="1.13.0">1.13</span> 136 137 </button> 138 139<!----></div> 140</div> 141 <div id="back-to-top"><a href="#">⬠Back to Top</a></div> 142 </nav> 143 144 145 <div class="main ml-5 desktop"> 146 <h1>Deprecations Added in 147 Ember 148 1.x</h1> 149 <div class="intro"> 150 <p>What follows is a list of deprecations introduced to 151 Ember 152 during the 153 1.x 154 cycle.</p> 155 <p>For more information on deprecations in 156 Ember, see the 157 <a href="/" id="ember838" class="ember-view">main 158 deprecations page</a>.</p> 159 </div> 160 161 <h2 class="anchorable-toc rounded-lg padding-small">Deprecations Added 162 in 163 1.0.0 164 </h2> 165 <div class="padding-vertical-small bg-light-muted rounded-sm"> 166
167 <h3 id="toc_instance-initializers"> 168 Access to Instance Initializers 169 170 <a title="Access to Instance Initializers" href="/id/instance-initializers" id="ember839" class="ember-view"> 171 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 172 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 173 </svg> 174 </a> 175 </h3> 176 177 <div class="my-2"> 178<!----> </div> 179 <section> 180 <div id="ember840" class="ember-view"><h4 id="deprecateaccesstoinstanceinitializers">Deprecate Access to Instance Initializers</h4> 181<p>When we initially designed Ember, we only had the use case of apps that 182run in the browser in mind. In that world, you would load your app and 183then it would run until the user closed the tab or navigated away.</p> 184<p>For testing, we quickly realized that we would need some way to "reset" 185the application between each test without reloading the page and 186starting from scratch. To that end, we isolated all of the state in an 187application into an object called the container that could be thrown 188away after each test had completed.</p> 189<p>We wanted a shared way for both apps and add-ons to initialize 190applications when they booted and loaded. In particular, it was 191important for people to get access to that container to make objects 192available to the app at runtime. To do so, we introduced the initializer 193API.</p> 194<p>For example, Ember Data uses this API to ensure that all of your 195controllers and routes have access to the store object.</p> 196<p>As we have been working on the FastBoot effort to allow Ember apps to 197run on the server, we realized that the assumption that there would only 198be one instance of the app running at once no longer held.</p> 199<p>In particular, we realized that "app boot" was actually two distinct 200phases:</p> 201<ol> 202<li>Loading all of your application code and registering objects with the 203application (such as the store in the Ember Data example)</li> 204<li>Instantiating objects when the app starts running</li> 205</ol> 206<p>When the application boots up for the first time, we need to run Step 1 207above, but it would be wasteful to run it for every request going to 208your FastBoot server.</p> 209<p>We also realized that a huge number of real-world initializers were 210simply registering classes and injections, while a smaller fraction of 211initializers are doing work that truly needs to be done per run.</p> 212<p>By separating out these two kinds of work, we could improve the 213performance of cases where a single application was used multiple times, 214each with a fresh set of state.</p> 215<p>This applies to FastBoot, of course, but it also applies to integration 216tests. Today, integration tests spend time executing code in 217initializers that don't change between test runs, simply because of the 218possibility that the initializer may also set up instances.</p> 219<p>Thankfully, the <code>initializer</code> infrastructure already clearly marks the 220boot-up phase of your application (both in your own code and in 221add-ons), so we only need to make a small tweak to <code>initializer</code>s for 222FastBoot to work.</p> 223<p>
223This change makes the difference between initializers that set up code 224and initializers that set up instances explicit.</p> 225<p>The old <code>App.initializer</code> API now receives a <code>registry</code>, which can be 226freely used to set up code using the <code>register</code> API and the various 227<code>inject</code> APIs.</p> 228<p>A new <code>App.instanceInitializer</code> API receives an <code>ApplicationInstance</code> 229object. When migrating code, the most important property on the 230<code>ApplicationInstance</code> is <code>container</code>, which you can use to get new 231instances and set state on them.</p> 232<p>Migrating code to the new structure is fairly mechanical. Change code 233that looks like:</p> 234<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#E1E4E8">App.</span><span style="color:#B392F0">initializer</span><span style="color:#E1E4E8">({</span></span> 235<span class="line"><span style="color:#E1E4E8"> name: </span><span style="color:#9ECBFF">"clock"</span><span style="color:#E1E4E8">,</span></span> 236<span class="line"></span> 237<span class="line"><span style="color:#B392F0"> initialize</span><span style="color:#E1E4E8">: </span><span style="color:#F97583">function</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">container</span><span style="color:#E1E4E8">) {</span></span> 238<span class="line"><span style="color:#E1E4E8"> container.</span><span style="color:#B392F0">register</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">"clock:main"</span><span style="color:#E1E4E8">, Clock);</span></span> 239<span class="line"><span style="color:#F97583"> var</span><span style="color:#E1E4E8"> clock </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> container.</span><span style="color:#B392F0">lookup</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">"clock:main"</span><span style="color:#E1E4E8">);</span></span> 240<span class="line"><span style="color:#E1E4E8"> clock.</span><span style="color:#B392F0">setStartTime</span><span style="color:#E1E4E8">(Date.</span><span style="color:#B392F0">now</span><span style="color:#E1E4E8">());</span></span> 241<span class="line"><span style="color:#E1E4E8"> }</span></span> 242<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 243<p>To:</p> 244<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#E1E4E8">App.</span><span style="color:#B392F0">initializer</span><span style="color:#E1E4E8">({</span></span> 245<span class="line"><span style="color:#E1E4E8"> name: </span><span style="color:#9ECBFF">"clock"</span><span style="color:#E1E4E8">,</span></span> 246<span class="line"></span> 247<span class="line"><span style="color:#B392F0"> initialize</span><span style="color:#E1E4E8">: </span><span style="color:#F97583">function</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">registry</span><span style="color:#E1E4E8">) {</span></span> 248<span class="line"><span style="color:#E1E4E8"> registry.</span><span style="color:#B392F0">register</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">"clock:main"</span><span style="color:#E1E4E8">, Clock);</span></span> 249<span class="line"><span style="color:#E1E4E8"> }</span></span> 250<span class="line"><span style="color:#E1E4E8">});</span></span> 251<span class="line"></span> 252<span class="line"><span style="color:#E1E4E8">App.</span><span style="color:#B392F0">instanceInitializer</span><span style="color:#E1E4E8">({</span></span> 253<span class="line"><span style="color:#E1E4E8"> name: </span><span style="color:#9ECBFF">"clock"</span><span style="color:#E1E4E8">,</span></span> 254<span class="line"></span> 255<span class="line"><span style="color:#B392F0"> initialize</span><span style="color:#E1E4E8">: </span><span style="color:#F97583">function</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">instance</span><span style="color:#E1E4E8">) {</span></span> 256<span class="line"><span style="color:#F97583"> var</span><span style="color:#E1E4E8"> clock </span><span style="color:#F97583">=</span><span style="color:#E1E4E8">
256 instance.container.</span><span style="color:#B392F0">lookup</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">"clock:main"</span><span style="color:#E1E4E8">);</span></span> 257<span class="line"><span style="color:#E1E4E8"> clock.</span><span style="color:#B392F0">setStartTime</span><span style="color:#E1E4E8">(Date.</span><span style="color:#B392F0">now</span><span style="color:#E1E4E8">());</span></span> 258<span class="line"><span style="color:#E1E4E8"> }</span></span> 259<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 260<p>Some things to remember:</p> 261<ol> 262<li>All <code>instanceInitializer</code>s run after <code>initializer</code>s and do not share a 263namespace. You can use the same name in both, and don't have to use 264<code>before</code> or <code>after</code> to make sure that instance initializers run 265second.</li> 266<li>The deprecated <code>registry.lookup</code> works by maintaining a 1:1 mapping 267between Application and a default <code>ApplicationInstance</code>. This is 268fundamentally incompatible with FastBoot, and you will need to clear 269this deprecation warning before you will be able to use any of the 270FastBoot features.</li> 271</ol> 272<p>While FastBoot and the improved testing performance have not yet landed, 273these changes allow us to continue work on those APIs after Ember 2.0. 274It also future-proofs Ember for more situations where a single 275<code>Application</code> has multiple runs over its lifetime.</p> 276</div> 277 </section> 278</div> 279 <h2 class="anchorable-toc rounded-lg padding-small">Deprecations Added 280 in 281 1.7.0 282 </h2> 283 <div class="padding-vertical-small bg-light-muted rounded-sm"> 284 285 <h3 id="toc_code-then-code-on-ember-application"> 286 .then on Ember.Application 287 288 <a title=".then on Ember.Application" href="/id/code-then-code-on-ember-application" id="ember841" class="ember-view"> 289 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 290 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 291 </svg> 292 </a> 293 </h3> 294 295 <div class="my-2"> 296<!----> </div> 297 <section> 298 <div id="ember842" class="ember-view"><p>As part of the <code>Ember.DeferredMixin</code> deprecation, using <code>.then</code> on an 299Ember.Application instance itself has been deprecated.</p> 300<p>You can use the <code>ready</code> hook or initializers to defer/advance readiness 301instead.</p> 302</div> 303 </section> 304</div> 305 <div class="padding-vertical-small bg-light-muted rounded-sm"> 306 307 <h3 id="toc_ember-deferredmixin-and-ember-deferred"> 308 Ember.DeferredMixin and Ember.Deferred 309 310 <a title="Ember.DeferredMixin and Ember.Deferred" href="/id/ember-deferredmixin-and-ember-deferred" id="ember843" class="ember-view"> 311 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 312 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 313 </svg> 314 </a> 315 </h3> 316 317 <div class="my-2"> 318<!----> </div> 319 <section> 320 <div id="ember844" class="ember-view"><p><code>Ember.DeferredMixin</code> and <code>Ember.Deferred</code>
320 have been deprecated in favor 321of using <code>RSVP.Promise</code>s.</p> 322</div> 323 </section> 324</div> 325 <div class="padding-vertical-small bg-light-muted rounded-sm"> 326 327 <h3 id="toc_observing-container-views-like-arrays"> 328 Observing container views like arrays 329 330 <a title="Observing container views like arrays" href="/id/observing-container-views-like-arrays" id="ember845" class="ember-view"> 331 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 332 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 333 </svg> 334 </a> 335 </h3> 336 337 <div class="my-2"> 338<!----> </div> 339 <section> 340 <div id="ember846" class="ember-view"><p>ContainerViews have been observable as arrays, where the items in 341the array are childViews. This introduces complexity into container 342views despite the feature being a rarely used one.</p> 343</div> 344 </section> 345</div> 346 <h2 class="anchorable-toc rounded-lg padding-small">Deprecations Added 347 in 348 1.8.0 349 </h2> 350 <div class="padding-vertical-small bg-light-muted rounded-sm"> 351 352 <h3 id="toc_global-lookup-of-views"> 353 Global lookup of views 354 355 <a title="Global lookup of views" href="/id/global-lookup-of-views" id="ember847" class="ember-view"> 356 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 357 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 358 </svg> 359 </a> 360 </h3> 361 362 <div class="my-2"> 363<!----> </div> 364 <section> 365 <div id="ember848" class="ember-view"><p>Previous to Ember 1.8, views would commonly be fetched from the global 366scope:</p> 367<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">view</span><span style="color:#FFAB70"> App.SomeView</span><span style="color:#79B8FF">}}</span></span> 368<span class="line"><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">each</span><span style="color:#FFAB70"> item</span><span style="color:#FFAB70"> in</span><span style="color:#FFAB70"> items</span><span style="color:#FFAB70"> itemViewClass</span><span style="color:#B392F0">=</span><span style="color:#FFAB70">App.SomeView</span><span style="color:#79B8FF">}}</span></span></code></pre> 369<p>Since Ember 1.8, views are more appropriately resolved on the application 370via strings:</p> 371<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">view</span><span style="color:#9ECBFF"> "some"</span><span style="color:#79B8FF">}}</span></span> 372<span class="line"><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">each</span><span style="color:#FFAB70"> item</span><span style="color:#FFAB70"> in</span><span style="color:#FFAB70"> items</span><span style="color:#FFAB70"> itemViewClass</span><span style="color:#B392F0">=</span><span style="color:#9ECBFF">"some"</span><span style="color:#79B8FF">}}</span></span></code></pre> 373<p>They may also be fetched via a binding:</p> 374<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">view</span><span style="color:#FFAB70"> view.someViewViaTheCurrentView</span><span style="color:#79B8FF">}}</span></span> 375<span class="line"><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">each</span><span style="color:#FFAB70"> itemViewClass</span><span style="color:#B392F0">=</span><span style="color:#FFAB70">someViewViaAControllerProperty</span><span style="color:#79B8FF">}}</span></span></code></pre> 376<p>In general, it is recommended that your Ember application avoid accessing 377globals from a template.</p> 378<h4 id="newusageofemberselect">New usage of Ember.Select</h4> 379<p>Most of Ember's provided views are already accessed via helpers. For example, 380the <a href="/api/classes/Ember.TextField.html">Ember.TextField</a> view is used via the 381<a href="/api/classes/Ember.Handlebars.helpers.html#method_input">
381input helper</a>.</p> 382<p>The <a href="/api/classes/Ember.Select.html">Ember.Select</a> view has not been upgraded to 383have a helper. Instead, it was suggested that you call it via the global 384class name:</p> 385<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">view</span><span style="color:#FFAB70"> Ember.Select</span><span style="color:#FFAB70"> content</span><span style="color:#B392F0">=</span><span style="color:#FFAB70">manyItems</span><span style="color:#79B8FF">}}</span></span></code></pre> 386<p>Since this lookup is now deprecated, the select view has been registered 387on an application as <code>select</code>. The new usage is:</p> 388<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">view</span><span style="color:#9ECBFF"> "select"</span><span style="color:#FFAB70"> content</span><span style="color:#B392F0">=</span><span style="color:#FFAB70">manyItems</span><span style="color:#79B8FF">}}</span></span></code></pre> 389<p>See the updated <a href="/api/classes/Ember.Select.html">Ember.Select</a> documentation 390and the <a href="/guides/views/built-in-views">built-in views guide</a> for more details 391and examples.</p> 392<h4 id="emberjslibrariesandplugins">Ember.js libraries and plugins</h4> 393<p>If the code triggering this deprecation is being fired from a library, that 394library may need to update its suggested usage.</p> 395<p>One solution for such a library is to provide mixins instead of classes:</p> 396<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#7e8791">// usage is {{view "list"}}</span></span> 397<span class="line"><span style="color:#F97583">var</span><span style="color:#E1E4E8"> App.ListView </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> Ember.View.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">(ListView);</span></span></code></pre> 398<p>A more advanced solution is to use an initializer to register the plugin's 399views on the application:</p> 400<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#7e8791">// usage is {{view "list"}}</span></span> 401<span class="line"><span style="color:#E1E4E8">Ember.Application.</span><span style="color:#B392F0">initializer</span><span style="color:#E1E4E8">({</span></span> 402<span class="line"><span style="color:#E1E4E8"> name: </span><span style="color:#9ECBFF">'list-view'</span><span style="color:#E1E4E8">,</span></span> 403<span class="line"><span style="color:#B392F0"> initialize</span><span style="color:#E1E4E8">: </span><span style="color:#F97583">function</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">container</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">application</span><span style="color:#E1E4E8">) {</span></span> 404<span class="line"><span style="color:#E1E4E8"> container.</span><span style="color:#B392F0">register</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'view:list'</span><span style="color:#E1E4E8">, ListView);</span></span> 405<span class="line"><span style="color:#E1E4E8"> }</span></span> 406<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 407<p>More details on how to register an Ember.js framework component are available 408in the <a href="/api/classes/Ember.Application.html#toc_initializers">initializer API documentation</a> 409and the <a href="/guides/understanding-ember/dependency-injection-and-service-lookup">dependency injection guide</a>.</p> 410</div> 411 </section> 412</div> 413 <div class="padding-vertical-small bg-light-muted rounded-sm"> 414 415 <h3 id="toc_hash-location-paths-without-leading-slashes"> 416 Hash Location Paths Without Leading Slashes 417 418 <a title="Hash Location Paths Without Leading Slashes" href="/id/hash-location-paths-without-leading-slashes" id="ember849" class="ember-view"> 419 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
420 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 421 </svg> 422 </a> 423 </h3> 424 425 <div class="my-2"> 426<!----> </div> 427 <section> 428 <div id="ember850" class="ember-view"><p>Prior to this release, if you were using <code>location: 'hash'</code> (which is the default), you were able to link to a route with a <code>location.hash</code> that didn't contain the expected leading forward slash. e.g. <code>#foo</code> instead of the correct <code>#/foo</code>. Very few, if any, should be impacted by this since the router always produces the correct form.</p> 429<p>Doing so is ambiguous because you may also be trying to link to an element on the page whose id matches <code><div id="foo"></code> and it also erroneously will create an extra history state if a user clicks on something that transitions to that route again, since it will change <code>location.hash === '#/foo'</code>.</p> 430<p>This ability will be removed quickly to allow us to mimic the browser's behavior of scrolling the page to an element whose id matches, but in our case doing so after the transition ends and everything is rendered. Once this feature is added, you'll be able to link to id's even with doubled up hashes: <code>#/foo#some-id</code> as well as the expected <code>#some-id</code>.</p> 431</div> 432 </section> 433</div> 434 <h2 class="anchorable-toc rounded-lg padding-small">Deprecations Added 435 in 436 1.9.0 437 </h2> 438 <div class="padding-vertical-small bg-light-muted rounded-sm"> 439 440 <h3 id="toc_more-consistent-handlebars-scope"> 441 More Consistent Handlebars Scope 442 443 <a title="More Consistent Handlebars Scope" href="/id/more-consistent-handlebars-scope" id="ember851" class="ember-view"> 444 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 445 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 446 </svg> 447 </a> 448 </h3> 449 450 <div class="my-2"> 451<!----> </div> 452 <section> 453 <div id="ember852" class="ember-view"><p>In Ember 1.9, the <code>each</code> and <code>with</code> helpers come in two flavors: a "context-switching" flavor and a "named-parameter" flavor.</p> 454<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">#each</span><span style="color:#FFAB70"> post</span><span style="color:#79B8FF"> in</span><span style="color:#FFAB70"> posts</span><span style="color:#79B8FF">}}</span></span> 455<span class="line"><span style="color:#7e8791"> {{!-- the context in here is the same as the outside context,</span></span> 456<span class="line"><span style="color:#7e8791"> and `post` references the current iteration --}}</span></span> 457<span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">/each</span><span style="color:#79B8FF">}}</span></span> 458<span class="line"></span> 459<span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">#each</span><span style="color:#FFAB70"> posts</span><span style="color:#79B8FF">}}</span></span> 460<span class="line"><span style="color:#7e8791"> {{!-- the context in here has shifted to the individual post.</span></span> 461<span class="line"><span style="color:#7e8791"> the outer context is no longer accessible --}}</span></span> 462<span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">/each</span><span style="color:#79B8FF">}}</span></span> 463<span class="line"></span> 464<span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">#with</span><span style="color:#FFAB70"> post</span><span style="color:#79B8FF"> as</span><span style="color:#FFAB70"> otherPost</span><span style="color:#79B8FF">}}</span></span> 465<span class="line"><span style="color:#7e8791"> {{!-- the context in here is the same as the outside context }}</span></span> 466<span class="line"><span style="color:#7e8791">{{/with}}</span></span> 467<span class="line"></span> 468<span class="line"><span style="color:#7e8791">{{#with post}}</span></span> 469<span class="line"><span style="color:#7e8791"> {{!-- the context in here has shifted to the post.</span></span> 470<span class="line"><span style="color:#7e8791"> the outer context is no longer accessible --}}</span></span> 471<span class="line"><span style="color:#7e8791">{{/with}}</span></span></code></pre> 472<p>This has proven to be one of the more confusing parts of the Ember templating system. It is also not clear to 473beginners which to use, and when they choose the context-shifting form, they lose access to values in the outer 474context that may be important.</p> 475<p>Because the helper itself offers no clue about the context-shifting behavior, it is easy (even for more experienced 476Ember developers) to get confused when skimming a template about which object a value refers to.</p> 477<p>The context-shifting forms of <code>#each</code> and <code>#with</code>
477 have been deprecated in favor of the named-parameter forms. In Ember 1.12, the <code>in</code> and <code>as</code> syntax are further deprecated in favor of block params syntax. See the <a href="/deprecations/v1.x/#toc_code-in-code-syntax-for-code-each-code">deprecation notes for in</a> and <a href="/deprecations/v1.x/#toc_code-in-code-syntax-for-code-each-code">deprecation notes for as</a>.</p> 478<h4 id="transitionplan">Transition Plan</h4> 479<p>To transition your code to the new syntax, you can change templates that look like this:</p> 480<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">#each</span><span style="color:#FFAB70"> people</span><span style="color:#79B8FF">}}</span></span> 481<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">></span><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">firstName</span><span style="color:#79B8FF">}}</span><span style="color:#79B8FF"> {{</span><span style="color:#FFAB70">lastName</span><span style="color:#79B8FF">}}</span><span style="color:#E1E4E8"></</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">></span></span> 482<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">></span><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">address</span><span style="color:#79B8FF">}}</span><span style="color:#E1E4E8"></</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">></span></span> 483<span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">/each</span><span style="color:#79B8FF">}}</span></span></code></pre> 484<p>with:</p> 485<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">#each</span><span style="color:#FFAB70"> person</span><span style="color:#79B8FF"> in</span><span style="color:#FFAB70"> people</span><span style="color:#79B8FF">}}</span></span> 486<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">></span><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">person.firstName</span><span style="color:#79B8FF">}}</span><span style="color:#79B8FF"> {{</span><span style="color:#FFAB70">person.lastName</span><span style="color:#79B8FF">}}</span><span style="color:#E1E4E8"></</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">></span></span> 487<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">></span><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">person.address</span><span style="color:#79B8FF">}}</span><span style="color:#E1E4E8"></</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">></span></span> 488<span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">/each</span><span style="color:#79B8FF">}}</span></span></code></pre> 489<p>In preparation for further work on HTMLBars, the context switching form of <code>{{each}}</code> is deprecated. This is mostly a "mechanical" refactor and dramatically 490simplifies how to think about the context in your templates. This change should be entirely mechanical.</p> 491<p>In prior versions you may have done one of the following:</p> 492<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">ul</span><span style="color:#E1E4E8">></span></span> 493<span class="line"><span style="color:#79B8FF"> {{</span><span style="color:#F97583">#each</span><span style="color:#79B8FF">}}</span></span> 494<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">name</span><span style="color:#79B8FF">}}</span><span style="color:#E1E4E8"></</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span></span> 495<span class="line"><span style="color:#79B8FF"> {{</span><span style="color:#F97583">/each</span><span style="color:#79B8FF">}}</span></span> 496<span class="line"><span style="color:#E1E4E8"></</span><span style="color:#85E89D">ul</span><span style="color:#E1E4E8">></span></span></code></pre> 497<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">ul</span><span style="color:#E1E4E8">></span></span> 498<span class="line"><span style="color:#79B8FF"> {{</span><span style="color:#F97583">#each</span><span style="color:#FFAB70"> people</span><span style="color:#79B8FF">}}</span></span> 499<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">name</span><span style="color:#79B8FF">}}</span><span style="color:#E1E4E8"></</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span></span> 500<span class="line"><span style="color:#79B8FF"> {{</span><span style="color:#F97583">/each</span><span style="color:#79B8FF">}}</span></span> 501<span class="line"><span style="color:#E1E4E8"></</span><span style="color:#85E89D">ul</span><span style="color:#E1E4E8">></span></span></code></pre> 502<p>You should now be using:</p> 503<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">ul</span><span style="color:#E1E4E8">></span></span> 504<span class="line"><span style="color:#79B8FF"> {{</span><span style="color:#F97583">#each</span><span style="color:#FFAB70"> person</span><span style="color:#79B8FF"> in</span><span style="color:#FFAB70"> this</span><span style="color:#79B8FF">}}</span></span> 505<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">person.name</span><span style="color:#79B8FF">}}</span><span style="color:#E1E4E8"></</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span></span> 506<span class="line"><span style="color:#79B8FF"> {{</span><span style="color:#F97583">/each</span><span style="color:#79B8FF">}}</span></span> 507<span class="line"><span style="color:#E1E4E8"></</span><span style="color:#85E89D">ul</span><span style="color:#E1E4E8">></span></span></code></pre> 508<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">ul</span><span style="color:#E1E4E8">></span></span> 509<span class="line"><span style="color:#79B8FF"> {{</span><span style="color:#F97583">#each</span><span style="color:#FFAB70"> person</span><span style="color:#79B8FF"> in</span><span style="color:#FFAB70"> people</span><span style="color:#79B8FF">}}</span></span> 510<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">person.name</span><span style="color:#79B8FF">}}</span><span style="color:#E1E4E8"></</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span></span> 511<span class="line"><span style="color:#79B8FF"> {{</span><span style="color:#F97583">/each</span><span style="color:#79B8FF">}}</span></span> 512<span class="line"><span style="color:#E1E4E8"></</span><span style="color:#85E89D">ul</span><span style="color:#E1E4E8">></span></span></code></pre> 513</div> 514 </section> 515</div> 516 <h2 class="anchorable-toc rounded-lg padding-small">Deprecations Added 517 in 518 1.11.0 519 </h2> 520 <div class="padding-vertical-small bg-light-muted rounded-sm"> 521 522 <h3 id="toc_binding-style-attributes"> 523 Binding Style Attributes 524 525 <a title="Binding Style Attributes" href="/id/binding-style-attributes" id="ember853" class="ember-view"> 526 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
527 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 528 </svg> 529 </a> 530 </h3> 531 532 <div class="my-2"> 533<!----> </div> 534 <section> 535 <div id="ember854" class="ember-view"><p><a id="toc_warning-when-binding-style-attributes"></a></p> 536<p>Content in Handlebars templates is automatically HTML-escaped to help 537developers prevent inadvertently introducing cross-site scripting (XSS) 538vulnerabilities into their applications. If you want to display trusted 539content as HTML, you can use a <code>SafeString</code>, a special string that tells Ember 540that the content should be displayed without escaping.</p> 541<p>While this works great for HTML, there are some cases where you may bind user 542data that the browser interprets as CSS, not HTML. For example, you may bind 543the <code>style</code> attribute of an element:</p> 544<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style=</span><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">myStyle</span><span style="color:#79B8FF">}}</span><span style="color:#E1E4E8">></</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span></code></pre> 545<p>Handlebars only escapes HTML, not CSS, so this may introduce a potential XSS 546vulnerability into your application if a malicious user is able to provide data 547used in the <code>myStyle</code> property.</p> 548<p>Starting in Ember 1.11, you will receive a warning if you attempt to bind the 549<code>style</code> attribute of an element. Once you have verified that the content being 550displayed is trusted and properly escaped, you can disable the warning by 551making the content a <code>SafeString</code>. For example:</p> 552<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#B392F0"> myStyle</span><span style="color:#E1E4E8">: Ember.</span><span style="color:#B392F0">computed</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'color'</span><span style="color:#E1E4E8">, </span><span style="color:#F97583">function</span><span style="color:#E1E4E8">() {</span></span> 553<span class="line"><span style="color:#7e8791"> /* Note: You must implement #escapeCSS. */</span></span> 554<span class="line"><span style="color:#F97583"> var</span><span style="color:#E1E4E8"> color </span><span style="color:#F97583">=</span><span style="color:#B392F0"> escapeCSS</span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">get</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'color'</span><span style="color:#E1E4E8">));</span></span> 555<span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> Ember.String.</span><span style="color:#B392F0">htmlSafe</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">"color: "</span><span style="color:#F97583"> +</span><span style="color:#E1E4E8"> color);</span></span> 556<span class="line"><span style="color:#E1E4E8"> })</span></span></code></pre> 557<p>Make sure you don't put quotes around the sanitized string, <code>myStyle</code>, when you 558bound it in the template. This would prevent Ember from seeing it as safe.</p> 559<p>You can learn more about <code>SafeString</code>s and writing code that prevents XSS 560attacks by reading the <a href="http://guides.emberjs.com/release/templates/writing-helpers/">Writing 561Helpers</a> guide.</p> 562</div> 563 </section> 564</div> 565 <div class="padding-vertical-small bg-light-muted rounded-sm"> 566 567 <h3 id="toc_deprecate-access-to-instances-in-initializer
567s"> 568 Access to Instances in Initializers 569 570 <a title="Access to Instances in Initializers" href="/id/deprecate-access-to-instances-in-initializers" id="ember855" class="ember-view"> 571 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 572 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 573 </svg> 574 </a> 575 </h3> 576 577 <div class="my-2"> 578<!----> </div> 579 <section> 580 <div id="ember856" class="ember-view"><p>Previously, initializers had access to an object that allowed them to 581both register new classes and get instances of those classes.</p> 582<p>If you have an initializer that gets instances of a class, you need to 583change it to use an instance initializer.</p> 584<p>Change code that looks like this:</p> 585<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#E1E4E8">App.</span><span style="color:#B392F0">initializer</span><span style="color:#E1E4E8">({</span></span> 586<span class="line"><span style="color:#E1E4E8"> name: </span><span style="color:#9ECBFF">"clock"</span><span style="color:#E1E4E8">,</span></span> 587<span class="line"></span> 588<span class="line"><span style="color:#B392F0"> initialize</span><span style="color:#E1E4E8">: </span><span style="color:#F97583">function</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">container</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">application</span><span style="color:#E1E4E8">) {</span></span> 589<span class="line"><span style="color:#E1E4E8"> application.</span><span style="color:#B392F0">register</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">"clock:main"</span><span style="color:#E1E4E8">, Clock);</span></span> 590<span class="line"><span style="color:#F97583"> var</span><span style="color:#E1E4E8"> clock </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> container.</span><span style="color:#B392F0">lookup</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">"clock:main"</span><span style="color:#E1E4E8">);</span></span> 591<span class="line"><span style="color:#E1E4E8"> clock.</span><span style="color:#B392F0">setStartTime</span><span style="color:#E1E4E8">(Date.</span><span style="color:#B392F0">now</span><span style="color:#E1E4E8">());</span></span> 592<span class="line"><span style="color:#E1E4E8"> }</span></span> 593<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 594<p>To:</p> 595<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#E1E4E8">App.</span><span style="color:#B392F0">initializer</span><span style="color:#E1E4E8">({</span></span> 596<span class="line"><span style="color:#E1E4E8"> name: </span><span style="color:#9ECBFF">"clock"</span><span style="color:#E1E4E8">,</span></span> 597<span class="line"></span> 598<span class="line"><span style="color:#B392F0"> initialize</span><span style="color:#E1E4E8">: </span><span style="color:#F97583">function</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">registry</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">application</span><span style="color:#E1E4E8">) {</span></span> 599<span class="line"><span style="color:#E1E4E8"> application.</span><span style="color:#B392F0">register</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">"clock:main"</span><span style="color:#E1E4E8">, Clock);</span></span> 600<span class="line"><span style="color:#E1E4E8"> }</span></span> 601<span class="line"><span style="color:#E1E4E8">});
601</span></span> 602<span class="line"></span> 603<span class="line"><span style="color:#E1E4E8">App.</span><span style="color:#B392F0">instanceInitializer</span><span style="color:#E1E4E8">({</span></span> 604<span class="line"><span style="color:#E1E4E8"> name: </span><span style="color:#9ECBFF">"clock"</span><span style="color:#E1E4E8">,</span></span> 605<span class="line"></span> 606<span class="line"><span style="color:#B392F0"> initialize</span><span style="color:#E1E4E8">: </span><span style="color:#F97583">function</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">instance</span><span style="color:#E1E4E8">) {</span></span> 607<span class="line"><span style="color:#F97583"> var</span><span style="color:#E1E4E8"> clock </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> instance.container.</span><span style="color:#B392F0">lookup</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">"clock:main"</span><span style="color:#E1E4E8">);</span></span> 608<span class="line"><span style="color:#E1E4E8"> clock.</span><span style="color:#B392F0">setStartTime</span><span style="color:#E1E4E8">(Date.</span><span style="color:#B392F0">now</span><span style="color:#E1E4E8">());</span></span> 609<span class="line"><span style="color:#E1E4E8"> }</span></span> 610<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 611<p>Added in <a href="https://github.com/emberjs/ember.js/pull/10256">PR #10256</a>.</p> 612<p>For more information, see <a href="../instance-initializers">the instance initializer deprecation 613guide</a>.</p> 614</div> 615 </section> 616</div> 617 <div class="padding-vertical-small bg-light-muted rounded-sm"> 618 619 <h3 id="toc_objectcontroller"> 620 ObjectController 621 622 <a title="ObjectController" href="/id/objectcontroller" id="ember857" class="ember-view"> 623 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 624 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 625 </svg> 626 </a> 627 </h3> 628 629 <div class="my-2"> 630<!----> </div> 631 <section> 632 <div id="ember858" class="ember-view"><p>Experienced Ember users have enjoyed the use of proxying behavior in 633the <code>Ember.ObjectController</code> class since 1.0. However, this behavior 634will be removed in Ember 2.0 as the framework migrates to routable components.</p> 635<p>New users hit three road bumps when learning about the object controller pattern.</p> 636<ul> 637<li>Given a certain model, which of the three controller options should I be using?</li> 638<li>Which controller is generated by the framework if I do not specify one?</li> 639<li>When using an object controller, why should the <code>this</code> context not be passed 640to actions if it has the properties of my model?</li> 641</ul> 642<p>For these reasons, the <a href="https://github.com/emberjs/rfcs/pull/15">Road to Ember 2.0 RFC</a> 643listed object controllers as a concept to be removed from the framework.</p> 644<p>
644To migrate from an explicitly defined object controller, first convert 645the class definition to inherit from <code>Ember.Controller</code>. For example:</p> 646<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> Ember </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> "ember"</span><span style="color:#E1E4E8">;</span></span> 647<span class="line"></span> 648<span class="line"><span style="color:#7e8791">// Change:</span></span> 649<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#E1E4E8"> Ember.ObjectController.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">({</span></span> 650<span class="line"><span style="color:#7e8791">// To:</span></span> 651<span class="line"><span style="color:#E1E4E8">export default Ember.Controller.extend({</span></span> 652<span class="line"></span> 653<span class="line"><span style="color:#7e8791">// ...</span></span></code></pre> 654<p>Next update any use of <code>{{modelPropertyName}}</code> in templates with <code>{{model.modelPropertyName}}</code>. 655You should also review any computed property dependent keys, observer keys, and <code>get</code> and <code>set</code> 656statements on the route and controller. An example of how to make this migration can 657be found <a href="https://github.com/TryGhost/Ghost/pull/4748">in this PR to the Ghost project</a>.</p> 658<p>If a controller is not explicitly defined, but instead is being auto-generated 659by the framework, it will only throw a deprecation message if the proxying 660behavior is being used.</p> 661<p>Added in <a href="https://github.com/emberjs/ember.js/pull/10062">PR #10062</a>.</p> 662</div> 663 </section> 664</div> 665 <h2 class="anchorable-toc rounded-lg padding-small">Deprecations Added 666 in 667 1.12.0 668 </h2> 669 <div class="padding-vertical-small bg-light-muted rounded-sm"> 670 671 <h3 id="toc_code-as-code-syntax-for-code-with-code"> 672 as syntax for {{with}} 673 674 <a title="as syntax for {{with}}" href="/id/code-as-code-syntax-for-code-with-code" id="ember859" class="ember-view"> 675 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 676 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 677 </svg> 678 </a> 679 </h3> 680 681 <div class="my-2"> 682<!----> </div> 683 <section> 684 <div id="ember860" class="ember-view"><p>Renaming a value using <code>{{with}}</code> has been possible using the <code>as</code> syntax. Block params, 685introduces in Ember 1.10, obsolete the <code>as</code> syntax.</p> 686<p>With helpers should be updated to use block params. For example this helper:</p> 687<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">#with</span><span style="color:#FFAB70"> foo</span><span style="color:#79B8FF"> as</span><span style="color:#FFAB70"> bar</span><span style="color:#79B8FF">}}</span></span></code></pre> 688<p>Can be converted as follows:</p> 689<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">#with</span><span style="color:#FFAB70"> foo</span><span style="color:#79B8FF"> as</span><span style="color:#E1E4E8"> |</span><span style="color:#FFAB70">bar</span><span style="color:#E1E4E8">|</span><span style="color:#79B8FF">}}</span></span></code></pre> 690</div> 691 </section> 692</div> 693 <div class="padding-vertical-small bg-light-muted rounded-sm"> 694 695 <h3 id="toc_code-in-code-syntax-for-code-each-code"> 696 in syntax for {{each}} 697 698 <a title="in syntax for {{each}}" href="/id/code-in-code-syntax-for-code-each-code" id="ember861" class="ember-view"> 699 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
700 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 701 </svg> 702 </a> 703 </h3> 704 705 <div class="my-2"> 706<!----> </div> 707 <section> 708 <div id="ember862" class="ember-view"><p>The <code>in</code> syntax is used to name an iterated value with <code>{{each}}</code>. Block 709params, introduced Ember 1.10, obsoletes the <code>in</code> syntax.</p> 710<p>Each helpers should be updated to use block params. For example this helper:</p> 711<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">#each</span><span style="color:#FFAB70"> foo</span><span style="color:#79B8FF"> in</span><span style="color:#FFAB70"> bar</span><span style="color:#79B8FF">}}</span></span></code></pre> 712<p>Can be converted as follows:</p> 713<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">#each</span><span style="color:#FFAB70"> bar</span><span style="color:#79B8FF"> as</span><span style="color:#E1E4E8"> |</span><span style="color:#FFAB70">foo</span><span style="color:#E1E4E8">|</span><span style="color:#79B8FF">}}</span></span></code></pre> 714<p>For "itemController" :</p> 715<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">#each</span><span style="color:#FFAB70"> foo</span><span style="color:#79B8FF"> in</span><span style="color:#FFAB70"> bar</span><span style="color:#FFAB70"> itemController</span><span style="color:#B392F0">=</span><span style="color:#9ECBFF">"abc"</span><span style="color:#79B8FF">}}</span></span></code></pre> 716<p>Can be converted as follows:</p> 717<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">#each</span><span style="color:#FFAB70"> bar</span><span style="color:#79B8FF"> itemController</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"abc"</span><span style="color:#FFAB70"> as</span><span style="color:#E1E4E8"> |</span><span style="color:#FFAB70">foo</span><span style="color:#E1E4E8">|</span><span style="color:#79B8FF">}}</span></span></code></pre> 718</div> 719 </section> 720</div> 721 <div class="padding-vertical-small bg-light-muted rounded-sm"> 722 723 <h3 id="toc_computed-properties-with-a-shared-getter-and-setter"> 724 Computed Properties With a Shared Getter And Setter 725 726 <a title="Computed Properties With a Shared Getter And Setter" href="/id/computed-properties-with-a-shared-getter-and-setter" id="ember863" class="ember-view"> 727 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 728 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 729 </svg> 730 </a> 731 </h3> 732 733 <div class="my-2"> 734<!----> </div> 735 <section> 736 <div id="ember864" class="ember-view"><p>Ember.js 1.12 introduces an improved syntax for computed properties with 737a setter. Previously, computed properties with a setter implemented that 738setter by inspecting the number of arguments passed to the computed 739property's descriptor.</p> 740<p>For example, this computed property splits a full name into two 741parts when set:</p> 742<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#B392F0"> fullName</span><span style="color:#E1E4E8">: Ember.</span><span style="color:#B392F0">computed</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">"firstName"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"lastName"</span><span style="color:#E1E4E8">, </span><span style="color:#F97583">function</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">key</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">
742newName</span><span style="color:#E1E4E8">) {</span></span> 743<span class="line"><span style="color:#F97583"> if</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">arguments</span><span style="color:#E1E4E8">.</span><span style="color:#79B8FF">length</span><span style="color:#F97583"> ></span><span style="color:#79B8FF"> 1</span><span style="color:#E1E4E8">) {</span></span> 744<span class="line"><span style="color:#F97583"> var</span><span style="color:#E1E4E8"> parts </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> newName.</span><span style="color:#B392F0">split</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">" "</span><span style="color:#E1E4E8">);</span></span> 745<span class="line"><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">setProperties</span><span style="color:#E1E4E8">({ firstName: parts[</span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">], lastName: parts[</span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">] });</span></span> 746<span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> newName;</span></span> 747<span class="line"><span style="color:#E1E4E8"> } </span><span style="color:#F97583">else</span><span style="color:#E1E4E8"> {</span></span> 748<span class="line"><span style="color:#F97583"> return</span><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">get</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">"firstName"</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">+</span><span style="color:#9ECBFF"> " "</span><span style="color:#F97583"> +</span><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">get</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">"lastName"</span><span style="color:#E1E4E8">);</span></span> 749<span class="line"><span style="color:#E1E4E8"> }</span></span> 750<span class="line"><span style="color:#E1E4E8"> });</span></span></code></pre> 751<p>These uses should be converted to use the new discrete getter and setter 752syntax introduced in 1.12:</p> 753<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#B392F0"> fullName</span><span style="color:#E1E4E8">: Ember.</span><span style="color:#B392F0">computed</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">"firstName"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"lastName"</span><span style="color:#E1E4E8">, {</span></span> 754<span class="line"><span style="color:#B392F0"> get</span><span style="color:#E1E4E8">: </span><span style="color:#F97583">function</span><span style="color:#E1E4E8">() {</span></span> 755<span class="line"><span style="color:#F97583"> return</span><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">get</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">"firstName"</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">+</span><span style="color:#9ECBFF"> " "</span><span style="color:#F97583"> +</span><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">get</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">"lastName"</span><span style="color:#E1E4E8">);</span></span> 756<span class="line"><span style="color:#E1E4E8"> },</span></span> 757<span class="line"><span style="color:#B392F0"> set</span><span style="color:#E1E4E8">: </span><span style="color:#F97583">function</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">key</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">newName</span><span style="color:#E1E4E8">) {</span></span> 758<span class="line"><span style="color:#F97583"> var</span><span style="color:#E1E4E8"> parts </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> newName.</span><span style="color:#B392F0">split</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">" "</span><span style="color:#E1E4E8">);</span></span> 759<span class="line"><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">setProperties</span><span style="color:#E1E4E8">
759({ firstName: parts[</span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">], lastName: parts[</span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">] });</span></span> 760<span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> newName;</span></span> 761<span class="line"><span style="color:#E1E4E8"> }</span></span> 762<span class="line"><span style="color:#E1E4E8"> });</span></span></code></pre> 763<p>For further reading, review the <a href="https://github.com/emberjs/rfcs/blob/master/text/0011-improved-cp-syntax.md">RFC</a> describing this feature and the <a href="https://github.com/emberjs/ember.js/pull/9527">pull request of the initial implementation</a>.</p> 764</div> 765 </section> 766</div> 767 <h2 class="anchorable-toc rounded-lg padding-small">Deprecations Added 768 in 769 1.13.0 770 </h2> 771 <div class="padding-vertical-small bg-light-muted rounded-sm"> 772 773 <h3 id="toc_arraycontroller"> 774 ArrayController 775 776 <a title="ArrayController" href="/id/arraycontroller" id="ember865" class="ember-view"> 777 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 778 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 779 </svg> 780 </a> 781 </h3> 782 783 <div class="my-2"> 784<!----> </div> 785 <section> 786 <div id="ember866" class="ember-view"><p>Just like <code>Ember.ObjectController</code>, <code>Ember.ArrayController</code> will be removed in 787Ember 2.0 for the same reasons mentioned in <a href="http://emberjs.com/deprecations/v1.x/#toc_objectcontroller">1.11's ObjectController 788deprecation</a>.</p> 789<p>To migrate from an explicitly defined array controller, first convert 790the class definition to inherit from <code>Ember.Controller</code>.</p> 791<p>Before:</p> 792<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> Ember </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> "ember"</span><span style="color:#E1E4E8">;</span></span> 793<span class="line"></span> 794<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#E1E4E8"> Ember.ArrayController.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">({</span></span> 795<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 796<p>After:</p> 797<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> Ember </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> "ember"</span><span style="color:#E1E4E8">;</span></span> 798<span class="line"></span> 799<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#E1E4E8"> Ember.Controller.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">
799({</span></span> 800<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 801<p>Next update any use of <code>{{modelPropertyName}}</code> in templates with <code>{{model.modelPropertyName}}</code>. 802You should also review any computed property dependent keys, observer keys, and <code>get</code> and <code>set</code> 803statements on the route and controller. An example of how to make this migration can 804be found <a href="https://github.com/TryGhost/Ghost/pull/5468">in this PR to the Ghost project</a>.</p> 805<p>Opposite to <a href="http://emberjs.com/deprecations/v1.x/#toc_objectcontroller">1.11's ObjectController deprecation</a>, 806if a controller is not explicitly defined, but instead is being auto-generated 807by the framework, it will <strong>not</strong> throw a deprecation message even if the 808proxying behavior is being used.</p> 809<p>Added in <a href="https://github.com/emberjs/ember.js/pull/11476">PR #11476</a>.</p> 810</div> 811 </section> 812</div> 813 <div class="padding-vertical-small bg-light-muted rounded-sm"> 814 815 <h3 id="toc_beforeobserver"> 816 beforeObserver 817 818 <a title="beforeObserver" href="/id/beforeobserver" id="ember867" class="ember-view"> 819 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 820 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 821 </svg> 822 </a> 823 </h3> 824 825 <div class="my-2"> 826<!----> </div> 827 <section> 828 <div id="ember868" class="ember-view"><p>Before observers are deprecated due to the negative performance implications they have for Ember internals and applications.</p> 829<p>Typically they were used to have access to the old value of a property when it's about to change, but you can get same functionality in an even more efficient way with just a few lines of code:</p> 830<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">function</span><span style="color:#B392F0"> fooObserver</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">obj</span><span style="color:#E1E4E8">){</span></span> 831<span class="line"><span style="color:#F97583"> var</span><span style="color:#E1E4E8"> newFoo </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> obj.</span><span style="color:#B392F0">get</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'foo'</span><span style="color:#E1E4E8">);</span></span> 832<span class="line"><span style="color:#F97583"> if</span><span style="color:#E1E4E8"> (obj._oldFoo </span><span style="color:#F97583">!==</span><span style="color:#E1E4E8"> newFoo) {</span></span> 833<span class="line"><span style="color:#7e8791"> // do your stuff here</span></span> 834<span class="line"><span style="color:#E1E4E8"> obj._oldFoo </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> newFoo;</span></span> 835<span class="line"><span style="color:#E1E4E8"> }</span></span> 836<span class="line"><span style="color:#E1E4E8">}</span></span> 837<span class="line"><span style="color:#B392F0">addObserver</span><span style="color:#E1E4E8">(obj, </span><span style="color:#9ECBFF">'foo'</span><span style="color:#E1E4E8">, fooObserver);</span></span> 838<span class="line"><span style="color:#B392F0">fooObserver</span><span style="color:#E1E4E8">(obj); </span><span style="color:#7e8791">// Optionally call the observer immediately</span></span></code></pre> 839<p>The related functions <code>Ember.addBeforeObserver</code>, <code>Ember.removeBeforeObserver</code>, <code>Ember.beforeObserversFor</code>, and <code>Function#beforeObserver</code> 840are deprecated too.</p> 841</div> 842 </section> 843</div> 844 <div class="padding-vertical-small bg-light-muted rounded-sm"> 845 846 <h3 id="toc_bind-attr"> 847 bind-attr 848 849 <a title="bind-attr" href="/id/bind-attr" id="ember869" class="ember-view"> 850 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
851 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 852 </svg> 853 </a> 854 </h3> 855 856 <div class="my-2"> 857<!----> </div> 858 <section> 859 <div id="ember870" class="ember-view"><p>Ember 1.11 introduced new syntax for using dynamic content in attributes.</p> 860<p>In 1.10 your only option was to use the <code>bind-attr</code> helper:</p> 861<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">div</span><span style="color:#79B8FF"> {{</span><span style="color:#FFAB70">bind-attr</span><span style="color:#FFAB70"> title</span><span style="color:#B392F0">=</span><span style="color:#FFAB70">post.popup</span><span style="color:#79B8FF">}}</span><span style="color:#E1E4E8">></</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span></code></pre> 862<p>Ember 1.11 made it possible to intuitively represent dynamic content in attributes as you would expect:</p> 863<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> title=</span><span style="color:#9ECBFF">"</span><span style="color:#79B8FF">{{post.popup}}</span><span style="color:#9ECBFF">"</span><span style="color:#E1E4E8">></</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span></code></pre> 864<p>This makes it possible to express a number of concepts directly in the template that previously were awkward to represent and required computer properties, and could even require <code>itemController</code>.</p> 865<h4 id="dasherizedbooleanvalues">Dasherized boolean values</h4> 866<p>Ember 1.11's attribute binding syntax no longer supports dasherizing for boolean values. For example:</p> 867<div><div class="filename javascript">app/components/user-profile.js</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#E1E4E8"> Ember.Component.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">({</span></span> 868<span class="line"><span style="color:#E1E4E8"> isActiveUser: </span><span style="color:#79B8FF">true</span></span> 869<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 870</div> 871<div><div class="filename handlebars">app/templates/components/user-profile.hbs</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">div</span><span style="color:#79B8FF"> {{</span><span style="color:#FFAB70">bind-attr</span><span style="color:#FFAB70"> class</span><span style="color:#B392F0">=</span><span style="color:#9ECBFF">"isActiveUser"</span><span style="color:#79B8FF">}}</span><span style="color:#E1E4E8">></span></span> 872<span class="line"><span style="color:#E1E4E8"></</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span></code></pre> 873</div> 874<p>Should be replaced with:</p> 875<div><div class="filename handlebars">app/templates/components/user-profile.hbs</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class=</span><span style="color:#9ECBFF">"</span><span style="color:#79B8FF">{{if</span><span style="color:#79B8FF">
875 isActiveUser</span><span style="color:#9ECBFF"> 'is-active-user'</span><span style="color:#79B8FF">}}</span><span style="color:#9ECBFF">"</span><span style="color:#E1E4E8">></span></span> 876<span class="line"><span style="color:#E1E4E8"></</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span></code></pre> 877</div> 878<h4 id="legacybindattr">Legacy <code>bind-attr</code></h4> 879<p>Ember 1.13 deprecated <code>bind-attr</code> in favor of the new syntax.</p> 880<p>To aid in the migration, you can use the <a href="https://github.com/emberjs/legacy-bind-attr">legacy-bind-attr plugin</a> to restore this behavior in Ember 2.0 and silence the deprecation warning.</p> 881</div> 882 </section> 883</div> 884 <div class="padding-vertical-small bg-light-muted rounded-sm"> 885 886 <h3 id="toc_block-and-multi-argument-unbound-helper"> 887 Block and multi-argument unbound helper 888 889 <a title="Block and multi-argument unbound helper" href="/id/block-and-multi-argument-unbound-helper" id="ember871" class="ember-view"> 890 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 891 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 892 </svg> 893 </a> 894 </h3> 895 896 <div class="my-2"> 897<!----> </div> 898 <section> 899 <div id="ember872" class="ember-view"><p>The unbound helper is mostly a legacy API in Ember, although it is not being 900removed in 2.0. It was almost exclusively used to manage performance issues 901which are well addressed in Ember 1.13's new rendering engine.</p> 902<p>
902The first form being deprecated is the block form of unbound. For example:</p> 903<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">#unbound</span><span style="color:#FFAB70"> if</span><span style="color:#79B8FF"> someState}}</span></span> 904<span class="line"><span style="color:#E1E4E8"> Show this</span></span> 905<span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">/unbound</span><span style="color:#79B8FF">}}</span></span></code></pre> 906<p>Instead, replace this form with a nested helper:</p> 907<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">#if</span><span style="color:#E1E4E8"> (</span><span style="color:#FFAB70">unbound</span><span style="color:#FFAB70"> someState</span><span style="color:#E1E4E8">)</span><span style="color:#79B8FF">}}</span></span> 908<span class="line"><span style="color:#E1E4E8"> Show this</span></span> 909<span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">/if</span><span style="color:#79B8FF">}}</span></span></code></pre> 910<p>
910The second form being deprecated is the non-nested helper lookup. For example:</p> 911<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">unbound</span><span style="color:#FFAB70"> some-custom-helper</span><span style="color:#FFAB70"> withArg</span><span style="color:#FFAB70"> anotherArg</span><span style="color:#79B8FF">}}</span></span></code></pre> 912<p>Replace this form with nested helper call:</p> 913<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">unbound</span><span style="color:#E1E4E8"> (</span><span style="color:#FFAB70">some-custom-helper</span><span style="color:#FFAB70"> withArg</span><span style="color:#FFAB70"> anotherArg</span><span style="color:#E1E4E8">)</span><span style="color:#79B8FF">}}</span></span></code></pre> 914<p>Or make all inputs to the helper unbound:</p> 915<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">some-custom-helper</span><span style="color:#E1E4E8"> (</span><span style="color:#FFAB70">unbound</span><span style="color:#FFAB70"> withArg</span><span style="color:#E1E4E8">) (</span><span style="color:#FFAB70">unbound</span><span style="color:#FFAB70"> anotherArg</span><span style="color:#E1E4E8">)</span><span style="color:#79B8FF">}}</span></span></code></pre> 916</div> 917 </section> 918</div> 919 <div class="padding-vertical-small bg-light-muted rounded-sm"> 920 921 <h3 id="toc_controller-needs"> 922 Controller.needs 923 924 <a title="Controller.needs" href="/id/controller-needs" id="ember873" class="ember-view"> 925 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 926 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 927 </svg> 928 </a> 929 </h3> 930 931 <div class="my-2"> 932<!----> </div> 933 <section> 934 <div id="ember874" class="ember-view"><p><code>needs</code> for controllers will be removed in Ember 2.0. You can migrate away from this using <code>Ember.inject.controller</code>.</p> 935<p>Lets say you have a <code>post</code> controller like this:</p> 936<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> Ember </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> 'ember'</span><span style="color:#E1E4E8">;</span></span> 937<span class="line"></span> 938<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#E1E4E8"> Ember.Controller.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">({</span></span> 939<span class="line"><span style="color:#E1E4E8"> needs: [</span><span style="color:#9ECBFF">'comments'</span><span style="color:#E1E4E8">],</span></span> 940<span class="line"><span style="color:#E1E4E8"> newComments: Ember.computed.</span><span style="color:#B392F0">alias</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'controllers.comments.newest'</span><span style="color:#E1E4E8">)</span></span> 941<span class="line"><span style="color:#E1E4E8">});
941</span></span></code></pre> 942<p>You can upgrade to <code>Ember.inject.controller</code> like this:</p> 943<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> Ember </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> 'ember'</span><span style="color:#E1E4E8">;</span></span> 944<span class="line"></span> 945<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#E1E4E8"> Ember.Controller.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">({</span></span> 946<span class="line"><span style="color:#E1E4E8"> comments: Ember.inject.</span><span style="color:#B392F0">controller</span><span style="color:#E1E4E8">(),</span></span> 947<span class="line"><span style="color:#E1E4E8"> newComments: Ember.computed.</span><span style="color:#B392F0">alias</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'comments.newest'</span><span style="color:#E1E4E8">)</span></span> 948<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 949<p>You can <a href="http://emberjs.com/api/classes/Ember.inject.html#method_controller">read more about Ember.inject.controller in the Ember API documentation</a>.</p> 950</div> 951 </section> 952</div> 953 <div class="padding-vertical-small bg-light-muted rounded-sm"> 954 955 <h3 id="toc_copyable-frozencopy"> 956 Copyable.frozenCopy 957 958 <a title="Copyable.frozenCopy" href="/id/copyable-frozencopy" id="ember875" class="ember-view"> 959 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 960 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 961 </svg> 962 </a> 963 </h3> 964 965 <div class="my-2"> 966<!----> </div> 967 <section> 968 <div id="ember876" class="ember-view"><p>Just as the <code>Freezable</code> mixin is deprecated in favor of functionality in 969core JavaScript, the <code>frozenCopy</code> method of the Copyable mixin is also 970deprecated in favor of <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze">Object.freeze()</a>.</p> 971<p>Replace the following code:</p> 972<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> Obj</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> Ember.Object.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">(Freezable, Copyable, {</span></span> 973<span class="line"><span style="color:#B392F0"> copy</span><span style="color:#E1E4E8">() {</span></span> 974<span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> Obj.</span><span style="color:#B392F0">create</span><span style="color:#E1E4E8">();</span></span> 975<span class="line"><span style="color:#E1E4E8"> }</span></span> 976<span class="line"><span style="color:#E1E4E8">});
976</span></span> 977<span class="line"></span> 978<span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> frozenCopy</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> Obj.</span><span style="color:#B392F0">create</span><span style="color:#E1E4E8">().</span><span style="color:#B392F0">frozenCopy</span><span style="color:#E1E4E8">();</span></span> 979<span class="line"><span style="color:#E1E4E8">frozenCopy.</span><span style="color:#B392F0">isFrozen</span><span style="color:#E1E4E8">(); </span><span style="color:#7e8791">// => true</span></span> 980<span class="line"><span style="color:#E1E4E8">frozenCopy.</span><span style="color:#B392F0">set</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'foo'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">'baz'</span><span style="color:#E1E4E8">); </span><span style="color:#7e8791">// => throws TypeError</span></span></code></pre> 981<p>with:</p> 982<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> a</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> Ember.Object.</span><span style="color:#B392F0">create</span><span style="color:#E1E4E8">();</span></span> 983<span class="line"><span style="color:#E1E4E8">Object.</span><span style="color:#B392F0">isFrozen</span><span style="color:#E1E4E8">(a); </span><span style="color:#7e8791">// => false</span></span> 984<span class="line"><span style="color:#E1E4E8">Object.</span><span style="color:#B392F0">freeze</span><span style="color:#E1E4E8">(a);</span></span> 985<span class="line"><span style="color:#E1E4E8">Object.</span><span style="color:#B392F0">isFrozen</span><span style="color:#E1E4E8">(a); </span><span style="color:#7e8791">// => true</span></span> 986<span class="line"><span style="color:#E1E4E8">a.</span><span style="color:#B392F0">set</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'foo'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">'baz'</span><span style="color:#E1E4E8">); </span><span style="color:#7e8791">// => throws TypeError</span></span></code></pre> 987</div> 988 </section> 989</div> 990 <div class="padding-vertical-small bg-light-muted rounded-sm"> 991 992 <h3 id="toc_ember-collectionview"> 993 Ember.CollectionView 994 995 <a title="Ember.CollectionView" href="/id/ember-collectionview" id="ember877" class="ember-view"> 996 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 997 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 998 </svg> 999 </a> 1000 </h3> 1001 1002 <div class="my-2"> 1003<!----> </div> 1004 <section> 1005 <div id="ember878" class="ember-view"><p><code>Ember.CollectionView</code> is deprecated as a consequence of the deprecation of <code>Ember.View</code>.</p> 1006<p>Legacy support of <code>Ember.CollectionView</code> will be provided via the <a href="https://github.com/emberjs/ember-legacy-views">ember-legacy-views</a> addon.</p> 1007<h4 id="migratingawayfromembercollectionview">Migrating away from <code>Ember.CollectionView</code></h4> 1008<p>In most cases collection view can be replaced using the <code>{{each}}</code> helper in combination with the <code>{{component}}</code> helper.</p> 1009<p>To be able to programmatically decide which component to use for an item, you can use a <code>Ember.Helper</code></p> 1010<div><div class="filename javascript">app/helpers/animal-component.js</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">
1010import</span><span style="color:#E1E4E8"> Ember </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> 'ember'</span><span style="color:#E1E4E8">;</span></span> 1011<span class="line"></span> 1012<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#E1E4E8"> Ember.Helper.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">({</span></span> 1013<span class="line"><span style="color:#B392F0"> compute</span><span style="color:#E1E4E8">: </span><span style="color:#F97583">function</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">params</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">hash</span><span style="color:#E1E4E8">) {</span></span> 1014<span class="line"><span style="color:#F97583"> var</span><span style="color:#E1E4E8"> type </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> params[</span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">];</span></span> 1015<span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> type </span><span style="color:#F97583">+</span><span style="color:#9ECBFF"> '-component'</span><span style="color:#E1E4E8">;</span></span> 1016<span class="line"><span style="color:#E1E4E8"> }</span></span> 1017<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1018</div> 1019<p>Then if you have these two components:</p> 1020<div><div class="filename handlebars">app/templates/components/dog-component.hbs</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">animal.name</span><span style="color:#79B8FF">}}</span><span style="color:#E1E4E8"> is a dog!</span></span></code></pre> 1021</div> 1022<div><div class="filename handlebars">app/templates/components/cat-component.hbs</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">animal.name</span><span style="color:#79B8FF">}}</span><span style="color:#E1E4E8"> is a cat!</span></span></code></pre> 1023</div> 1024<p>Then you can render your different animals like this:</p> 1025<div><div class="filename javascript">app/controllers/animals.js</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> Ember </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> 'ember'</span><span style="color:#E1E4E8">;</span></span> 1026<span class="line"></span> 1027<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#E1E4E8"> Ember.Controller.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">({</span></span> 1028<span class="line"><span style="color:#E1E4E8"> animals: [</span></span> 1029<span class="line"><span style="color:#E1E4E8"> { type: </span><span style="color:#9ECBFF">'cat'</span><span style="color:#E1E4E8">, name: </span><span style="color:#9ECBFF">'Buttons'</span><span style="color:#E1E4E8"> },</span></span> 1030<span class="line"><span style="color:#E1E4E8"> { type: </span><span style="color:#9ECBFF">'dog'</span><span style="color:#E1E4E8">, name: </span><span style="color:#9ECBFF">'Fido'</span><span style="color:#E1E4E8">}</span></span> 1031<span class="line"><span style="color:#E1E4E8"> ]</span></span> 1032<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1033</div> 1034<div><div class="filename handlebars">app/templates/animals.hbs</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">ul</span><span style="color:#E1E4E8">></span></span> 1035<span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">#each</span><span style="color:#FFAB70"> animals</span><span style="color:#79B8FF"> as</span><span style="color:#E1E4E8"> |</span><span style="color:#FFAB70">animal</span><span style="color:#E1E4E8">|</span><span style="color:#79B8FF">}}</span></span> 1036<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span></span> 1037<span class="line"><span style="color:#79B8FF"> {{</span><span style="color:#FFAB70">component</span><span style="color:#E1E4E8"> (</span><span style="color:#FFAB70">animal-component</span><span style="color:#FFAB70"> animal.type</span><span style="color:#E1E4E8">) </span><span style="color:#FFAB70">animal</span><span style="color:#B392F0">=</span><span style="color:#FFAB70">animal</span><span style="color:#79B8FF">}}</span></span> 1038<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">li</span><span style="color:#E1E4E8">></span></span> 1039<span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">else</span><span style="color:#79B8FF">}}</span></span> 1040<span class="line"><span style="color:#E1E4E8"> You have no animals.</span></span> 1041<span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">/each</span><span style="color:#79B8FF">}}</span></span> 1042<span class="line"><span style="color:#E1E4E8"></</span><span style="color:#85E89D">ul</span><span style="color:#E1E4E8">></span></span></code></pre> 1043</div> 1044<p>You can <a href="http://emberjs.jsbin.com/qegikoliri/1/edit?html,js,output">view and manipulate this example on jsbin</a>.</p> 1045</div> 1046 </section> 1047</div> 1048 <div class="padding-vertical-small bg-light-muted rounded-sm"> 1049 1050 <h3 id="toc_ember-computed-any"> 1051 Ember.computed.any 1052 1053 <a title="Ember.computed.any" href="/id/ember-computed-any" id="ember879" class="ember-view"> 1054 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
1055 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 1056 </svg> 1057 </a> 1058 </h3> 1059 1060 <div class="my-2"> 1061<!----> </div> 1062 <section> 1063 <div id="ember880" class="ember-view"><p><code>Ember.computed.any</code> is deprecated in favor of <code>Ember.computed.or</code>. This change is required because the computed value is the first value ( like || ) rather than a boolean value ( like Array.prototype.any ). For example:</p> 1064<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">let</span><span style="color:#E1E4E8"> Hamster </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> Ember.Object.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">({</span></span> 1065<span class="line"><span style="color:#E1E4E8"> hasClothes: Ember.computed.</span><span style="color:#B392F0">any</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'hat'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">'shirt'</span><span style="color:#E1E4E8">)</span></span> 1066<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1067<p>The above code will be changed to</p> 1068<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">let</span><span style="color:#E1E4E8"> Hamster </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> Ember.Object.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">({</span></span> 1069<span class="line"><span style="color:#E1E4E8"> hasClothes: Ember.computed.</span><span style="color:#B392F0">or</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'hat'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">'shirt'</span><span style="color:#E1E4E8">)</span></span> 1070<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1071</div> 1072 </section> 1073</div> 1074 <div class="padding-vertical-small bg-light-muted rounded-sm"> 1075 1076 <h3 id="toc_ember-containerview"> 1077 Ember.ContainerView 1078 1079 <a title="Ember.ContainerView" href="/id/ember-containerview" id="ember881" class="ember-view"> 1080 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 1081 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 1082 </svg> 1083 </a> 1084 </h3> 1085 1086 <div class="my-2"> 1087<!----> </div> 1088 <section> 1089 <div id="ember882" class="ember-view"><p><code>Ember.ContainerView</code> is deprecated as a consequence of the deprecation of <code>Ember.View</code>.</p> 1090<p>Legacy support of <code>Ember.ContainerView</code> will be provided via the <a href="https://github.com/emberjs/ember-legacy-views">ember-legacy-views</a> addon.</p> 1091<h4 id="migratingawayfromembercontainerview">Migrating away from <code>Ember.ContainerView</code></h4> 1092<p>In most cases container view can be replaced using the <code>{{each}}</code> helper in combination with the <code>{{component}}</code> helper.</p> 1093<div><div class="filename javascript">app/components/component-container.js</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">
1093import</span><span style="color:#E1E4E8"> Ember </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> 'ember'</span><span style="color:#E1E4E8">;</span></span> 1094<span class="line"></span> 1095<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#E1E4E8"> Ember.Component.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">({</span></span> 1096<span class="line"><span style="color:#E1E4E8"> classNames: [</span><span style="color:#9ECBFF">'the-container'</span><span style="color:#E1E4E8">],</span></span> 1097<span class="line"><span style="color:#E1E4E8"> childComponents: [</span><span style="color:#9ECBFF">'a-component'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">'b-component'</span><span style="color:#E1E4E8">]</span></span> 1098<span class="line"><span style="color:#E1E4E8">})</span></span></code></pre> 1099</div> 1100<div><div class="filename handlebars">app/templates/components/component-container.hbs</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">#each</span><span style="color:#FFAB70"> childComponents</span><span style="color:#79B8FF"> as</span><span style="color:#E1E4E8"> |</span><span style="color:#FFAB70">childComponent</span><span style="color:#E1E4E8">|</span><span style="color:#79B8FF">}}</span></span> 1101<span class="line"><span style="color:#79B8FF"> {{</span><span style="color:#FFAB70">component</span><span style="color:#FFAB70"> childComponent</span><span style="color:#79B8FF">}}</span></span> 1102<span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">/each</span><span style="color:#79B8FF">}}</span></span></code></pre> 1103</div> 1104</div> 1105 </section> 1106</div> 1107 <div class="padding-vertical-small bg-light-muted rounded-sm"> 1108 1109 <h3 id="toc_ember-create"> 1110 Ember.create 1111 1112 <a title="Ember.create" href="/id/ember-create" id="ember883" class="ember-view"> 1113 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 1114 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 1115 </svg> 1116 </a> 1117 </h3> 1118 1119 <div class="my-2"> 1120<!----> </div> 1121 <section> 1122 <div id="ember884" class="ember-view"><p><code>Ember.create</code> is deprecated in favor for <code>Object.create</code>. For more information 1123regarding <code>Object.create</code>, please 1124<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">read the MDN documentation</a>.</p> 1125<p>Please change this:</p> 1126<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> doug</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> Ember.</span><span style="color:#B392F0">create</span><span style="color:#E1E4E8">({</span></span> 1127<span class="line"><span style="color:#E1E4E8"> firstName: </span><span style="color:#9ECBFF">'Doug'</span></span> 1128<span class="line"><span style="color:#E1E4E8">});
1128</span></span></code></pre> 1129<p>to</p> 1130<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> doug</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> Object.</span><span style="color:#B392F0">create</span><span style="color:#E1E4E8">({</span></span> 1131<span class="line"><span style="color:#E1E4E8"> firstName: </span><span style="color:#9ECBFF">'Doug'</span></span> 1132<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1133</div> 1134 </section> 1135</div> 1136 <div class="padding-vertical-small bg-light-muted rounded-sm"> 1137 1138 <h3 id="toc_ember-createwithmixins"> 1139 Ember CreateWithMixins 1140 1141 <a title="Ember CreateWithMixins" href="/id/ember-createwithmixins" id="ember885" class="ember-view"> 1142 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 1143 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 1144 </svg> 1145 </a> 1146 </h3> 1147 1148 <div class="my-2"> 1149<!----> </div> 1150 <section> 1151 <div id="ember886" class="ember-view"><p><code>Ember.Object.createWithMixins</code> method has been deprecated. Instead call <code>Ember.Object.create</code> or <code>Ember.Object.extend</code>.</p> 1152<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">var</span><span style="color:#E1E4E8"> obj </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> Ember.Object.</span><span style="color:#B392F0">createWithMixins</span><span style="color:#E1E4E8">({</span></span> 1153<span class="line"></span> 1154<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1155<p>Replace with code above with:</p> 1156<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">var</span><span style="color:#E1E4E8"> obj </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> Ember.Object.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">({</span></span> 1157<span class="line"></span> 1158<span class="line"><span style="color:#E1E4E8">}).</span><span style="color:#B392F0">create</span><span style="color:#E1E4E8">();</span></span></code></pre> 1159</div> 1160 </section> 1161</div> 1162 <div class="padding-vertical-small bg-light-muted rounded-sm"> 1163 1164 <h3 id="toc_ember-enumerableutils"> 1165 Ember.EnumerableUtils 1166 1167 <a title="Ember.EnumerableUtils" href="/id/ember-enumerableutils" id="ember887" class="ember-view"> 1168 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 1169 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 1170 </svg> 1171 </a> 1172 </h3> 1173 1174 <div class="my-2"> 1175<!----> </div> 1176 <section> 1177 <div id="ember888" class="ember-view"><p><code>EnumerableUtils</code>
1177 has been deprecated in favor of native implementations. You can consult the 1178<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">JavaScript Array documentation</a> 1179to find suitable replacements for <code>EnumerableUtils</code> functionality. 1180If the native JavaScript array object does not provide a suitable equivalent for your needs, you might also want to checkout 1181third party utility libraries like <a href="https://lodash.com/">lodash</a>, or <a href="underscorejs.org/">underscore</a>.</p> 1182</div> 1183 </section> 1184</div> 1185 <div class="padding-vertical-small bg-light-muted rounded-sm"> 1186 1187 <h3 id="toc_ember-freezable"> 1188 Ember Freezable 1189 1190 <a title="Ember Freezable" href="/id/ember-freezable" id="ember889" class="ember-view"> 1191 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 1192 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 1193 </svg> 1194 </a> 1195 </h3> 1196 1197 <div class="my-2"> 1198<!----> </div> 1199 <section> 1200 <div id="ember890" class="ember-view"><p>The Freezable Mixin has been deprecated because the spec has been added to 1201the javascript core.</p> 1202<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#E1E4E8">Contact </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> Ember.Object.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">(Ember.Freezable, {</span></span> 1203<span class="line"><span style="color:#E1E4E8"> firstName: </span><span style="color:#79B8FF">null</span><span style="color:#E1E4E8">,</span></span> 1204<span class="line"><span style="color:#E1E4E8"> lastName: </span><span style="color:#79B8FF">null</span><span style="color:#E1E4E8">,</span></span> 1205<span class="line"></span> 1206<span class="line"><span style="color:#7e8791"> // swaps the names</span></span> 1207<span class="line"><span style="color:#B392F0"> swapNames</span><span style="color:#E1E4E8">: </span><span style="color:#F97583">function</span><span style="color:#E1E4E8">() {</span></span> 1208<span class="line"><span style="color:#F97583"> if</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">get</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'isFrozen'</span><span style="color:#E1E4E8">)) </span><span style="color:#F97583">throw</span><span style="color:#E1E4E8"> Ember.</span><span style="color:#79B8FF">FROZEN_ERROR</span><span style="color:#E1E4E8">;</span></span> 1209<span class="line"><span style="color:#F97583"> var</span><span style="color:#E1E4E8"> tmp </span><span style="color:#F97583">=</span><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">get</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'firstName'</span><span style="color:#E1E4E8">);</span></span> 1210<span class="line"><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">set</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'firstName'</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">
1210get</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'lastName'</span><span style="color:#E1E4E8">));</span></span> 1211<span class="line"><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">set</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'lastName'</span><span style="color:#E1E4E8">, tmp);</span></span> 1212<span class="line"><span style="color:#F97583"> return</span><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">;</span></span> 1213<span class="line"><span style="color:#E1E4E8"> }</span></span> 1214<span class="line"></span> 1215<span class="line"><span style="color:#E1E4E8">});</span></span> 1216<span class="line"></span> 1217<span class="line"><span style="color:#E1E4E8">c </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> Contact.</span><span style="color:#B392F0">create</span><span style="color:#E1E4E8">({ firstName: </span><span style="color:#9ECBFF">"John"</span><span style="color:#E1E4E8">, lastName: </span><span style="color:#9ECBFF">"Doe"</span><span style="color:#E1E4E8"> });</span></span> 1218<span class="line"><span style="color:#E1E4E8">c.</span><span style="color:#B392F0">swapNames</span><span style="color:#E1E4E8">(); </span><span style="color:#7e8791">// returns c</span></span> 1219<span class="line"><span style="color:#E1E4E8">c.</span><span style="color:#B392F0">freeze</span><span style="color:#E1E4E8">();</span></span> 1220<span class="line"><span style="color:#E1E4E8">c.</span><span style="color:#B392F0">swapNames</span><span style="color:#E1E4E8">(); </span><span style="color:#7e8791">// EXCEPTION</span></span></code></pre> 1221<p>Replace code above with this:</p> 1222<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#E1E4E8">Contact </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> Ember.Object.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">({</span></span> 1223<span class="line"><span style="color:#E1E4E8"> firstName: </span><span style="color:#79B8FF">null</span><span style="color:#E1E4E8">,</span></span> 1224<span class="line"><span style="color:#E1E4E8"> lastName: </span><span style="color:#79B8FF">null</span><span style="color:#E1E4E8">,</span></span> 1225<span class="line"></span> 1226<span class="line"><span style="color:#7e8791"> // swaps the names</span></span> 1227<span class="line"><span style="color:#B392F0"> swapNames</span><span style="color:#E1E4E8">: </span><span style="color:#F97583">function</span><span style="color:#E1E4E8">() {</span></span> 1228<span class="line"><span style="color:#F97583"> if</span><span style="color:#E1E4E8"> (Object.</span><span style="color:#B392F0">isFrozen</span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">this</span><span style="color:#E1E4E8">)) </span><span style="color:#F97583">throw</span><span style="color:#E1E4E8"> Ember.</span><span style="color:#79B8FF">FROZEN_ERROR</span><span style="color:#E1E4E8">;</span></span> 1229<span class="line"><span style="color:#F97583"> var</span><span style="color:#E1E4E8"> tmp </span><span style="color:#F97583">=</span><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">get</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'firstName'</span><span style="color:#E1E4E8">);</span></span> 1230<span class="line"><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">set</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'firstName'</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">get</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'lastName'</span><span style="color:#E1E4E8">));</span></span> 1231<span class="line"><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">set</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'lastName'</span><span style="color:#E1E4E8">, tmp);</span></span> 1232<span class="line"><span style="color:#F97583"> return</span><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">;</span></span> 1233<span class="line"><span style="color:#E1E4E8"> }</span></span> 1234<span class="line"></span> 1235<span class="line"><span style="color:#E1E4E8">});
1235</span></span> 1236<span class="line"></span> 1237<span class="line"><span style="color:#E1E4E8">c </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> Contact.</span><span style="color:#B392F0">create</span><span style="color:#E1E4E8">({ firstName: </span><span style="color:#9ECBFF">"John"</span><span style="color:#E1E4E8">, lastName: </span><span style="color:#9ECBFF">"Doe"</span><span style="color:#E1E4E8"> });</span></span> 1238<span class="line"><span style="color:#E1E4E8">c.</span><span style="color:#B392F0">swapNames</span><span style="color:#E1E4E8">(); </span><span style="color:#7e8791">// returns c</span></span> 1239<span class="line"><span style="color:#E1E4E8">Object.</span><span style="color:#B392F0">freeze</span><span style="color:#E1E4E8">(c);</span></span> 1240<span class="line"><span style="color:#E1E4E8">c.</span><span style="color:#B392F0">swapNames</span><span style="color:#E1E4E8">(); </span><span style="color:#7e8791">// EXCEPTION</span></span></code></pre> 1241</div> 1242 </section> 1243</div> 1244 <div class="padding-vertical-small bg-light-muted rounded-sm"> 1245 1246 <h3 id="toc_ember-immediateobserver"> 1247 Ember.immediateObserver 1248 1249 <a title="Ember.immediateObserver" href="/id/ember-immediateobserver" id="ember891" class="ember-view"> 1250 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 1251 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 1252 </svg> 1253 </a> 1254 </h3> 1255 1256 <div class="my-2"> 1257<!----> </div> 1258 <section> 1259 <div id="ember892" class="ember-view"><p><code>Ember.immediateObserver</code> is deprecated in favor of <code>Ember.observer</code>. Please change all instances of <code>Ember.immediateObserver</code> from:</p> 1260<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#E1E4E8">Ember.Object.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">({</span></span> 1261<span class="line"><span style="color:#E1E4E8"> valueObserver: Ember.</span><span style="color:#B392F0">immediateObserver</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'value'</span><span style="color:#E1E4E8">, </span><span style="color:#F97583">function</span><span style="color:#E1E4E8">() {</span></span> 1262<span class="line"><span style="color:#E1E4E8"> })</span></span> 1263<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1264<p>to</p> 1265<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#E1E4E8">Ember.Object.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">({</span></span> 1266<span class="line"><span style="color:#E1E4E8"> valueObserver: Ember.</span><span style="color:#B392F0">observer</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'value'</span><span style="color:#E1E4E8">, </span><span style="color:#F97583">function</span><span style="color:#E1E4E8">() {</span></span> 1267<span class="line"><span style="color:#E1E4E8"> })</span></span> 1268<span class="line"><span style="color:#E1E4E8">});
1268</span></span></code></pre> 1269</div> 1270 </section> 1271</div> 1272 <div class="padding-vertical-small bg-light-muted rounded-sm"> 1273 1274 <h3 id="toc_ember-keys"> 1275 Ember.keys 1276 1277 <a title="Ember.keys" href="/id/ember-keys" id="ember893" class="ember-view"> 1278 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 1279 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 1280 </svg> 1281 </a> 1282 </h3> 1283 1284 <div class="my-2"> 1285<!----> </div> 1286 <section> 1287 <div id="ember894" class="ember-view"><p><code>Ember.keys</code> is deprecated in favor for <code>Object.keys</code>. For more information 1288regarding <code>Object.keys</code>, please 1289<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">read the MDN documentation</a>.</p> 1290<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> food</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> Ember.</span><span style="color:#B392F0">keys</span><span style="color:#E1E4E8">({</span></span> 1291<span class="line"><span style="color:#E1E4E8"> yellow: </span><span style="color:#9ECBFF">'banana'</span><span style="color:#E1E4E8">,</span></span> 1292<span class="line"><span style="color:#E1E4E8"> green: </span><span style="color:#9ECBFF">'pickle'</span></span> 1293<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1294<p>to</p> 1295<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> food</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> Object.</span><span style="color:#B392F0">keys</span><span style="color:#E1E4E8">({</span></span> 1296<span class="line"><span style="color:#E1E4E8"> yellow: </span><span style="color:#9ECBFF">'banana'</span><span style="color:#E1E4E8">,</span></span> 1297<span class="line"><span style="color:#E1E4E8"> green: </span><span style="color:#9ECBFF">'pickle'</span></span> 1298<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1299</div> 1300 </section> 1301</div> 1302 <div class="padding-vertical-small bg-light-muted rounded-sm"> 1303 1304 <h3 id="toc_ember-linkview"> 1305 Ember.LinkView 1306 1307 <a title="Ember.LinkView" href="/id/ember-linkview" id="ember895" class="ember-view"> 1308 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 1309 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 1310 </svg> 1311 </a> 1312 </h3> 1313 1314 <div class="my-2"> 1315<!----> </div> 1316 <section> 1317 <div id="ember896" class="ember-view"><p>As a consequence of the deprecation of <code>Ember.View</code>, many internal views have 1318been ported to component. <code>Ember.LinkView</code>, the class that backs the 1319<code>{{link-to}}</code> helper, have been ported to <code>Ember.LinkComponent</code>.</p> 1320<p>Most uses of <code>Ember.LinkView</code> can be directly ported to the <code>Ember.LinkComponent</code> 1321class.</p> 1322</div> 1323 </section> 1324</div> 1325 <div class="padding-vertical-small bg-light-muted rounded-sm"> 1326 1327 <h3 id="toc_ember-oneway"> 1328 Ember.oneWay 1329 1330 <a title="Ember.oneWay" href="/id/ember-oneway" id="ember897" class="ember-view"> 1331 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
1332 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 1333 </svg> 1334 </a> 1335 </h3> 1336 1337 <div class="my-2"> 1338<!----> </div> 1339 <section> 1340 <div id="ember898" class="ember-view"><p><code>Ember.oneWay</code> is deprecated in favor for <code>Ember.computed.oneWay</code>. Please 1341change all instances of <code>Ember.oneWay</code> from:</p> 1342<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">let</span><span style="color:#E1E4E8"> User </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> Ember.Object.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">({</span></span> 1343<span class="line"><span style="color:#E1E4E8"> firstName: </span><span style="color:#79B8FF">null</span><span style="color:#E1E4E8">,</span></span> 1344<span class="line"><span style="color:#E1E4E8"> nickName: Ember.</span><span style="color:#B392F0">oneWay</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'firstName'</span><span style="color:#E1E4E8">)</span></span> 1345<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1346<p>to</p> 1347<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">let</span><span style="color:#E1E4E8"> User </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> Ember.Object.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">({</span></span> 1348<span class="line"><span style="color:#E1E4E8"> firstName: </span><span style="color:#79B8FF">null</span><span style="color:#E1E4E8">,</span></span> 1349<span class="line"><span style="color:#E1E4E8"> nickName: Ember.computed.</span><span style="color:#B392F0">oneWay</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'firstName'</span><span style="color:#E1E4E8">)</span></span> 1350<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1351</div> 1352 </section> 1353</div> 1354 <div class="padding-vertical-small bg-light-muted rounded-sm"> 1355 1356 <h3 id="toc_ember-reducecomputed-ember-arraycomputed"> 1357 Ember.ReduceComputedProperty / Ember.ArrayComputedProperty 1358 1359 <a title="Ember.ReduceComputedProperty / Ember.ArrayComputedProperty" href="/id/ember-reducecomputed-ember-arraycomputed" id="ember899" class="ember-view"> 1360 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 1361 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 1362 </svg> 1363 </a> 1364 </h3> 1365 1366 <div class="my-2"> 1367<!----> </div> 1368 <section> 1369 <div id="ember900" class="ember-view"><p>In addition to <code>Ember.ReduceComputed</code> and <code>Ember.ArrayComputed</code> you were able to add a property function call, making use of 1370the ReduceComputedProperty and ArrayComputedProperty classes. 1371This usage is also deprecated. 1372For an example, consider a counter component that displays a total sum of values in an array.
1373Using <code>Ember.ReduceComputedProperty</code> would show the following:</p> 1374<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#B392F0">totalCount</span><span style="color:#E1E4E8">: Ember.</span><span style="color:#B392F0">reduceComputed</span><span style="color:#E1E4E8">({</span></span> 1375<span class="line"><span style="color:#E1E4E8"> initialValue </span><span style="color:#F97583">=</span><span style="color:#79B8FF"> 0</span><span style="color:#E1E4E8">;</span></span> 1376<span class="line"><span style="color:#B392F0"> addedItem</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">totalValue</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">newValue</span><span style="color:#E1E4E8">) {</span></span> 1377<span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> totalValue </span><span style="color:#F97583">+</span><span style="color:#E1E4E8"> newValue;</span></span> 1378<span class="line"><span style="color:#E1E4E8"> },</span></span> 1379<span class="line"><span style="color:#B392F0"> removedItem</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">totalValue</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">newValue</span><span style="color:#E1E4E8">) {</span></span> 1380<span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> totalValue </span><span style="color:#F97583">-</span><span style="color:#E1E4E8"> newValue;</span></span> 1381<span class="line"><span style="color:#E1E4E8"> }</span></span> 1382<span class="line"><span style="color:#E1E4E8">}).</span><span style="color:#B392F0">property</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'values'</span><span style="color:#E1E4E8">)</span></span></code></pre> 1383<p>Now that these APIs are deprecated, use the native JavaScript reduce along with the <a href="http://emberjs.com/api/classes/Ember.computed.html">Ember.computed family of functions</a>:</p> 1384<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#B392F0">totalCount</span><span style="color:#E1E4E8">: Ember.</span><span style="color:#B392F0">computed</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'values.[]'</span><span style="color:#E1E4E8">, </span><span style="color:#F97583">function</span><span style="color:#E1E4E8">() {</span></span> 1385<span class="line"><span style="color:#F97583"> return</span><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">get</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'values'</span><span style="color:#E1E4E8">).</span><span style="color:#B392F0">reduce</span><span style="color:#E1E4E8">((</span><span style="color:#FFAB70">previousValue</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">currentValue</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">=></span><span style="color:#E1E4E8"> {</span></span> 1386<span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> previousValue </span><span style="color:#F97583">+</span><span style="color:#E1E4E8"> currentValue;</span></span> 1387<span class="line"><span style="color:#E1E4E8"> })</span></span> 1388<span class="line"><span style="color:#E1E4E8">})</span></span></code></pre> 1389</div> 1390 </section> 1391</div> 1392 <div class="padding-vertical-small bg-light-muted rounded-sm"> 1393 1394 <h3 id="toc_ember-select"> 1395 Ember.Select 1396 1397 <a title="Ember.Select" href="/id/ember-select" id="ember901" class="ember-view"> 1398 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 1399 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 1400 </svg> 1401 </a> 1402 </h3> 1403 1404 <div class="my-2"> 1405<!----> </div> 1406 <section> 1407 <div id="ember902" class="ember-view"><p>Using the <code>Ember.Select</code> global and its view helper form (<code>{{view 'select'}}</code>) 1408is deprecated. <code>Ember.Select</code> in Ember 1.x is implemented in a legacy coding 1409style that uses patterns such as observers and two-way data binding that 1410can cause pathological performance problems and provide an experience that 1411is not consistent with idiomatic Ember 2.0 development.</p> 1412<p>Legacy support of <code>Ember.Select</code> will be provided via the <a href="https://github.com/emberjs/ember-legacy-views">ember-legacy-views</a> addon.</p> 1413<p>Ember 2.0 provides several new features that make it much more straightforward 1414to implement <select> tag functionality via the 1415data-down, actions-up paradigm in one's codebase. 1416For example, to create a component that displays a prompt and a list of 1417dropdown options, the following code could be used:</p> 1418<div><div class="filename handlebars">app/templates/components/my-select.hbs</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">select</span><span style="color:#79B8FF"> {{</span><span style="color:#FFAB70">action</span><span style="color:#9ECBFF"> 'change'</span><span style="color:#FFAB70"> on</span><span style="color:#B392F0">=</span><span style="color:#9ECBFF">'change'</span><span style="color:#79B8FF">}}</span><span style="color:#E1E4E8">></span></span> 1419<span class="line"><span style="color:#79B8FF"> {{</span><span style="color:#F97583">#each</span><span style="color:#FFAB70"> content</span><span style="color:#79B8FF"> key</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"@index"</span><span style="color:#FFAB70"> as</span><span style="color:#E1E4E8"> |</span><span style="color:#FFAB70">item</span><span style="color:#E1E4E8">|</span><span style="color:#79B8FF">}}</span></span> 1420<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">option</span><span style="color:#B392F0"> value=</span><span style="color:#9ECBFF">"</span><span style="color:#79B8FF">{{item}}</span><span style="color:#9ECBFF">"</span><span style="color:#B392F0"> selected=</span><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">is-equal</span><span style="color:#FFAB70"> item</span><span style="color:#FFAB70"> selectedValue</span><span style="color:#79B8FF">}}</span><span style="color:#E1E4E8">></span></span> 1421<span class="line"><span style="color:#79B8FF"> {{</span><span style="color:#FFAB70">item</span><span style="color:#79B8FF">}}</span></span> 1422<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">option</span><span style="color:#E1E4E8">></span></span> 1423<span class="line"><span style="color:#79B8FF"> {{</span><span style="color:#F97583">/each</span><span style="color:#79B8FF">}}</span></span> 1424<span class="line"><span style="color:#E1E4E8"></</span><span style="color:#85E89D">select</span><span style="color:#E1E4E8">></span></span></code></pre> 1425</div> 1426<div><div class="filename javascript">app/components/my-select.js</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">
1426import</span><span style="color:#E1E4E8"> Ember </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> "ember"</span><span style="color:#E1E4E8">;</span></span> 1427<span class="line"></span> 1428<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#E1E4E8"> Ember.Component.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">({</span></span> 1429<span class="line"><span style="color:#E1E4E8"> content: </span><span style="color:#79B8FF">null</span><span style="color:#E1E4E8">,</span></span> 1430<span class="line"><span style="color:#E1E4E8"> selectedValue: </span><span style="color:#79B8FF">null</span><span style="color:#E1E4E8">,</span></span> 1431<span class="line"></span> 1432<span class="line"><span style="color:#B392F0"> didInitAttrs</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">attrs</span><span style="color:#E1E4E8">) {</span></span> 1433<span class="line"><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">
1433_super</span><span style="color:#E1E4E8">(</span><span style="color:#F97583">...</span><span style="color:#79B8FF">arguments</span><span style="color:#E1E4E8">);</span></span> 1434<span class="line"><span style="color:#F97583"> var</span><span style="color:#E1E4E8"> content </span><span style="color:#F97583">=</span><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">get</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'content'</span><span style="color:#E1E4E8">);</span></span> 1435<span class="line"></span> 1436<span class="line"><span style="color:#F97583"> if</span><span style="color:#E1E4E8"> (</span><span style="color:#F97583">!</span><span style="color:#E1E4E8">content) {</span></span> 1437<span class="line"><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">set</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'content'</span><span style="color:#E1E4E8">, []);</span></span> 1438<span class="line"><span style="color:#E1E4E8"> }</span></span> 1439<span class="line"><span style="color:#E1E4E8"> },</span></span> 1440<span class="line"></span> 1441<span class="line"><span style="color:#E1E4E8"> actions: {</span></span> 1442<span class="line"><span style="color:#B392F0"> change</span><span style="color:#E1E4E8">() {</span></span> 1443<span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> changeAction</span><span style="color:#F97583"> =</span><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">get</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'action'</span><span style="color:#E1E4E8">);</span></span> 1444<span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> selectedEl</span><span style="color:#F97583"> =</span><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">$</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'select'</span><span style="color:#E1E4E8">)[</span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">];</span></span> 1445<span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> selectedIndex</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> selectedEl.selectedIndex;</span></span> 1446<span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> content</span><span style="color:#F97583"> =</span><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">get</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'content'</span><span style="color:#E1E4E8">);</span></span> 1447<span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> selectedValue</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> content[selectedIndex];</span></span> 1448<span class="line"></span> 1449<span class="line"><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">set</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'selectedValue'</span><span style="color:#E1E4E8">, selectedValue);</span></span> 1450<span class="line"><span style="color:#B392F0"> changeAction</span><span style="color:#E1E4E8">(selectedValue);</span></span> 1451<span class="line"><span style="color:#E1E4E8"> }</span></span> 1452<span class="line"><span style="color:#E1E4E8"> }</span></span> 1453<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1454</div> 1455<div><div class="filename javascript">app/helpers/is-equal.js</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#7e8791">// is-equal helper is necessary to determine which option is currently selected.</span></span> 1456<span class="line"><span style="color:#F97583">
1456import</span><span style="color:#E1E4E8"> Ember </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> "ember"</span><span style="color:#E1E4E8">;</span></span> 1457<span class="line"></span> 1458<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#E1E4E8"> Ember.Helper.</span><span style="color:#B392F0">helper</span><span style="color:#E1E4E8">(</span><span style="color:#F97583">function</span><span style="color:#E1E4E8">([</span><span style="color:#FFAB70">leftSide</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">rightSide</span><span style="color:#E1E4E8">]) {</span></span> 1459<span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> leftSide </span><span style="color:#F97583">===</span><span style="color:#E1E4E8"> rightSide;</span></span> 1460<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1461</div> 1462<p>This component could be used in a template by supplying it an array of strings 1463as <code>content</code> and an action to call when the user makes a selection as <code>change</code>:</p> 1464<div><div class="filename handlebars">app/templates/application.hbs</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#E1E4E8">The currently selected item: </span><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">mySelectedItem</span><span style="color:#79B8FF">}}</span><span style="color:#E1E4E8">.</span></span> 1465<span class="line"></span> 1466<span class="line"><span style="color:#7e8791">{{! myItems is an array of strings: ['first', 'second', 'third',...] }}</span></span> 1467<span class="line"><span style="color:#7e8791">{{! This uses the `action` and `mut` helpers to pass in an action that</span></span> 1468<span class="line"><span style="color:#7e8791"> will update the (outer scope) `mySelectedItem` property with the user's</span></span> 1469<span class="line"><span style="color:#7e8791"> selection. }}</span></span> 1470<span class="line"><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">my-select</span><span style="color:#FFAB70"> content</span><span style="color:#B392F0">=</span><span style="color:#FFAB70">myItems</span><span style="color:#FFAB70"> action</span><span style="color:#B392F0">=</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">action</span><span style="color:#E1E4E8"> (</span><span style="color:#FFAB70">mut</span><span style="color:#FFAB70"> mySelectedItem</span><span style="color:#E1E4E8">))</span><span style="color:#79B8FF">}}</span></span></code></pre> 1471</div> 1472<p>A more complete example of a <code>select</code> component that mimics many features of the 1473deprecated <code>Ember.Select</code> is <a href="http://emberjs.jsbin.com/fotuqa">available in this jsbin</a>.</p> 1474<p>Here is an <a href="http://emberjs.jsbin.com/zezapu">example jsbin showing usage of the select tag directly in a template without a component</a>.</p> 1475<p>There are many <a href="http://emberobserver.com/categories/select">Ember-CLI addons that provide select-like functionality</a>. 1476<a href="http://emberobserver.com/addons/emberx-select">emberx-select</a> in particular 1477aims to provide a select component based on the native html select. Alternative 1478<code>select</code> component implementations can be iterated upon in addons to identify 1479best practices and perhaps moved into an official Ember 2.x implementation in 1480the future.</p> 1481</div> 1482 </section> 1483</div> 1484 <div class="padding-vertical-small bg-light-muted rounded-sm"> 1485 1486 <h3 id="toc_ember-view"> 1487 Ember.View 1488 1489 <a title="Ember.View" href="/id/ember-view" id="ember903" class="ember-view"> 1490 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 1491 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 1492 </svg> 1493 </a> 1494 </h3> 1495 1496 <div class="my-2"> 1497<!----> </div> 1498 <section> 1499 <div id="ember904" class="ember-view"><p>
1499Ember 1.x encouraged a Model-View-Controller-Route architecture. Since then, 1500the web has consolidated around a Model-Component-Route pattern for web 1501development that Ember 2.0 also embraces.</p> 1502<p>Views are removed from the Ember 2.0 API. However a single release is likely 1503insufficient for large apps to upgrade their entire codebase away from routable 1504views, and consequently Ember is providing extended support for views via the 1505<a href="https://github.com/emberjs/ember-legacy-views">ember-legacy-views</a> addon. 1506This addon will remain compatible with Ember until v2.4 of the framework 1507is released.</p> 1508<p>Along with the deprecation of <code>Ember.View</code>, the <code>Ember.CoreView</code> class is also 1509deprecated. If you were using this class, please migrate to <code>Ember.Component</code>.</p> 1510<h4 id="migratingawayfromtheviewhelper">Migrating away from the view helper</h4> 1511<p>In most cases Ember views can be replaced with a component. For example 1512this view and usage:</p> 1513<div><div class="filename handlebars">app/templates/show-menu.hbs</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">view.title</span><span style="color:#79B8FF">}}</span></span></code></pre> 1514</div> 1515<div><div class="filename javascript">app/views/show-menu.js</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> Ember </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> "ember"</span><span style="color:#E1E4E8">;</span></span> 1516<span class="line"></span> 1517<span class="line"><span style="color:#7e8791">// Usage: {{view "show-menu"}}</span></span> 1518<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#E1E4E8"> Ember.View.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">({</span></span> 1519<span class="line"><span style="color:#E1E4E8"> templateName: </span><span style="color:#9ECBFF">'some-menu'</span><span style="color:#E1E4E8">,</span></span> 1520<span class="line"><span style="color:#E1E4E8"> title: </span><span style="color:#9ECBFF">'My Menu'</span></span> 1521<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1522</div> 1523<p>Can be replaced with this component:</p> 1524<div><div class="filename handlebars">app/templates/components/show-menu.hbs</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">title</span><span style="color:#79B8FF">}}</span></span></code></pre> 1525</div> 1526<div><div class="filename javascript">app/components/show-menu.js</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> Ember </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> "ember"</span><span style="color:#E1E4E8">;</span></span> 1527<span class="line"></span> 1528<span class="line"><span style="color:#7e8791">// Usage: {{show-menu}}</span></span> 1529<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#E1E4E8"> Ember.Component.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">({</span></span> 1530<span class="line"><span style="color:#E1E4E8"> title: </span><span style="color:#9ECBFF">'My Menu'</span></span> 1531<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1532</div> 1533<p>Note that a component is always its own context in a template. A view's template 1534may have had access to other variables that were present where it was called, 1535such as a <code>controller</code>. A component template will always be isolated, and 1536if data is needed it should be passed upon invocation. For example:</p> 1537<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">show-menu</span><span style="color:#FFAB70"> options</span><span style="color:#B392F0">=</span><span style="color:#FFAB70">controller.menuOptions</span><span style="color:#79B8FF">}}</span></span></code></pre> 1538<h4 id="differencesinyieldedblocks">Differences in yielded blocks</h4> 1539<p>Some notable differences exist between yielded view blocks and yielded component 1540blocks. A view could be used this way:</p> 1541<div><div class="filename javascript">app/views/reverse-name.js</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">
1541import</span><span style="color:#E1E4E8"> Ember </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> "ember"</span><span style="color:#E1E4E8">;</span></span> 1542<span class="line"></span> 1543<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#E1E4E8"> Ember.View.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">({</span></span> 1544<span class="line"><span style="color:#E1E4E8"> reversedName: Ember.</span><span style="color:#B392F0">computed</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'name'</span><span style="color:#E1E4E8">, </span><span style="color:#F97583">function</span><span style="color:#E1E4E8">() {</span></span> 1545<span class="line"><span style="color:#F97583"> return</span><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">get</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'name'</span><span style="color:#E1E4E8">).</span><span style="color:#B392F0">split</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">""</span><span style="color:#E1E4E8">).</span><span style="color:#B392F0">reverse</span><span style="color:#E1E4E8">().</span><span style="color:#B392F0">join</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">""</span><span style="color:#E1E4E8">);</span></span> 1546<span class="line"><span style="color:#E1E4E8"> })</span></span> 1547<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1548</div> 1549<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">#view</span><span style="color:#9ECBFF"> "reverse-name"</span><span style="color:#FFAB70"> name</span><span style="color:#B392F0">=</span><span style="color:#FFAB70">controller.name</span><span style="color:#79B8FF">}}</span></span> 1550<span class="line"><span style="color:#79B8FF"> {{</span><span style="color:#FFAB70">view.reversedName</span><span style="color:#79B8FF">}}</span></span> 1551<span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">/view</span><span style="color:#79B8FF">}}</span></span></code></pre> 1552<p>Components introduced block params. This concept achieves data passing 1553without the confusion over what <code>{{view}}</code> refers to. For example:</p> 1554<div><div class="filename javascript">app/components/reverse-name.js</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> Ember </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> "ember"</span><span style="color:#E1E4E8">;</span></span> 1555<span class="line"></span> 1556<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#E1E4E8"> Ember.Component.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">({</span></span> 1557<span class="line"><span style="color:#E1E4E8"> reversedName: Ember.</span><span style="color:#B392F0">computed</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'name'</span><span style="color:#E1E4E8">, </span><span style="color:#F97583">function</span><span style="color:#E1E4E8">() {</span></span> 1558<span class="line"><span style="color:#F97583"> return</span><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">get</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'name'</span><span style="color:#E1E4E8">).</span><span style="color:#B392F0">split</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">""</span><span style="color:#E1E4E8">).</span><span style="color:#B392F0">reverse</span><span style="color:#E1E4E8">().</span><span style="color:#B392F0">join</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">""</span><span style="color:#E1E4E8">);</span></span> 1559<span class="line"><span style="color:#E1E4E8"> })</span></span> 1560<span class="line"><span style="color:#E1E4E8">});
1560</span></span></code></pre> 1561</div> 1562<div><div class="filename handlebars">app/templates/components/reverse-name.hbs</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">yield</span><span style="color:#FFAB70"> reversedName</span><span style="color:#79B8FF">}}</span></span></code></pre> 1563</div> 1564<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">#reverse-name</span><span style="color:#FFAB70"> name</span><span style="color:#E1E4E8">=</span><span style="color:#FFAB70">controller.name</span><span style="color:#FFAB70"> as</span><span style="color:#E1E4E8"> |</span><span style="color:#FFAB70">reversedName</span><span style="color:#E1E4E8">|</span><span style="color:#79B8FF">}}</span></span> 1565<span class="line"><span style="color:#79B8FF"> {{</span><span style="color:#FFAB70">reversedName</span><span style="color:#79B8FF">}}</span></span> 1566<span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">/reverse-name</span><span style="color:#79B8FF">}}</span></span></code></pre> 1567<p>Just as passing values to a component allow access to those values in the 1568isolated template of that component, yielding block params allow for values 1569from the component to be passed to the location the component was called at.</p> 1570<h4 id="routableviews">Routable Views</h4> 1571<p>When a template for a given route is rendered, if there is a view with the 1572same name that view will also be used. For example this view is attached 1573to the rendered route template:</p> 1574<div><div class="filename javascript">app/router.js</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> Ember </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> "ember"</span><span style="color:#E1E4E8">;</span></span> 1575<span class="line"></span> 1576<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#E1E4E8"> Ember.Router.</span><span style="color:#B392F0">map</span><span style="color:#E1E4E8">(</span><span style="color:#F97583">function</span><span style="color:#E1E4E8">() {</span></span> 1577<span class="line"><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">route</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'about'</span><span style="color:#E1E4E8">);</span></span> 1578<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1579</div> 1580<div><div class="filename javascript">app/views/about.js</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> Ember </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> "ember"</span><span style="color:#E1E4E8">;</span></span> 1581<span class="line"></span> 1582<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#E1E4E8"> Ember.View.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">({</span></span> 1583<span class="line"><span style="color:#E1E4E8"> classNameBindings: [</span><span style="color:#9ECBFF">'controller.isActive:active'</span><span style="color:#E1E4E8">]</span></span> 1584<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1585</div> 1586<p>There are only two reasons a view may be used for a route.</p> 1587<ul> 1588<li>To set attribute bindings</li> 1589<li>To attach event handlers</li> 1590</ul> 1591<p>You should migrate away from routed views. For example to attach 1592bindings an element in the template is sufficient:</p> 1593<div><div class="filename javascript">app/router.js</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">
1593import</span><span style="color:#E1E4E8"> Ember </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> "ember"</span><span style="color:#E1E4E8">;</span></span> 1594<span class="line"></span> 1595<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#E1E4E8"> Ember.Router.</span><span style="color:#B392F0">map</span><span style="color:#E1E4E8">(</span><span style="color:#F97583">function</span><span style="color:#E1E4E8">() {</span></span> 1596<span class="line"><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">route</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'about'</span><span style="color:#E1E4E8">);</span></span> 1597<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1598</div> 1599<div><div class="filename handlebars">app/templates/about.hbs</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class=</span><span style="color:#9ECBFF">"</span><span style="color:#79B8FF">{{if</span><span style="color:#79B8FF"> isActive</span><span style="color:#9ECBFF"> 'active'</span><span style="color:#79B8FF">}}</span><span style="color:#9ECBFF">"</span><span style="color:#E1E4E8">></span></span> 1600<span class="line"><span style="color:#7e8791"> <!-- something something --></span></span> 1601<span class="line"><span style="color:#E1E4E8"></</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span></code></pre> 1602</div> 1603<p>If attaching events or sharing DOM is necessary, consider a component:</p> 1604<div><div class="filename javascript">app/router.js</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> Ember </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> "ember"</span><span style="color:#E1E4E8">;</span></span> 1605<span class="line"></span> 1606<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#E1E4E8"> Ember.Router.</span><span style="color:#B392F0">map</span><span style="color:#E1E4E8">(</span><span style="color:#F97583">function</span><span style="color:#E1E4E8">() {</span></span> 1607<span class="line"><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">route</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'about'</span><span style="color:#E1E4E8">);</span></span> 1608<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1609</div> 1610<div><div class="filename handlebars">app/templates/about.hbs</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">#active-layout</span><span style="color:#FFAB70"> isActive</span><span style="color:#E1E4E8">=</span><span style="color:#FFAB70">isActive</span><span style="color:#79B8FF">}}</span></span> 1611<span class="line"><span style="color:#7e8791"> <!-- something something --></span></span> 1612<span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">/active-layout</span><span style="color:#79B8FF">}}</span></span></code></pre> 1613</div> 1614<div><div class="filename javascript">app/components/active-layout.js</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> Ember </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> "ember"</span><span style="color:#E1E4E8">;</span></span> 1615<span class="line"></span> 1616<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#E1E4E8"> Ember.Component.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">
1616({</span></span> 1617<span class="line"><span style="color:#E1E4E8"> classNameBindings: [</span><span style="color:#9ECBFF">'isActive:active'</span><span style="color:#E1E4E8">],</span></span> 1618<span class="line"><span style="color:#B392F0"> click</span><span style="color:#E1E4E8">() {</span></span> 1619<span class="line"><span style="color:#7e8791"> // Handle click</span></span> 1620<span class="line"><span style="color:#E1E4E8"> }</span></span> 1621<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1622</div> 1623<h4 id="viewandcontrollertemplatekeywords">view and controller template keywords</h4> 1624<p>View and controller keywords provided a way to access the view or controller 1625backing a template, even across scopes that you might expect to be isolated. In 1626many ways their behavior is emergent, and generally is poorly designed.</p> 1627<p>Accessing data via <code>{{view.someProp}}</code> or <code>{{controller.thisThing}}</code> can 1628nearly always be replaced by proper use of data passing and block params. See 1629the guide on <a href="http://emberjs.com/deprecations/v1.x#toc_differences-in-yielded-blocks">differences in yielded blocks</a> 1630for a complete example of using block params over the <code>{{view}}</code> keyword.</p> 1631<h4 id="viewandviewclassargumentstooutlet"><code>view</code> and <code>viewClass</code> arguments to <code>{{outlet}}</code></h4> 1632<p>Since the View API is deprecated starting in 1.13, providing the <code>view</code> or <code>viewClass</code> argument to the <code>{{outlet}}</code>
1633helper is likewise deprecated in favor of migrating to component-based approaches, as explained earlier in this 1634section.</p> 1635</div> 1636 </section> 1637</div> 1638 <div class="padding-vertical-small bg-light-muted rounded-sm"> 1639 1640 <h3 id="toc_handlebars-htmlbars-helpers"> 1641 Handlebars / HTMLBars helpers 1642 1643 <a title="Handlebars / HTMLBars helpers" href="/id/handlebars-htmlbars-helpers" id="ember905" class="ember-view"> 1644 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 1645 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 1646 </svg> 1647 </a> 1648 </h3> 1649 1650 <div class="my-2"> 1651<!----> </div> 1652 <section> 1653 <div id="ember906" class="ember-view"><p>All the various ways to create helpers on the Handlebars and HTMLBars namespace 1654have been deprecated in favor of the 1655<a href="http://emberjs.com/api/classes/Ember.Helper.html">Ember.Helper</a> class and it's 1656<a href="http://emberjs.com/api/classes/Ember.Helper.html#method_helper">Ember.Helper.helper</a> 1657function. The <code>makeViewHelper</code> method has been deprecated in favor of just using 1658an <code>Ember.Component</code>.</p> 1659<h4 id="makeviewhelper"><code>makeViewHelper</code></h4> 1660<p>If you use <code>viewHelper</code> you should refactor the view class and template into 1661a component with the same name as the view helper you registered.</p> 1662<h4 id="makeboundhelperregisterboundhelperhelperregisterhelper"><code>makeBoundHelper</code>, <code>registerBoundHelper</code>, <code>helper</code>, <code>registerHelper</code></h4> 1663<p>If you have for example:</p> 1664<div><div class="filename javascript">app/helpers/foo-bar.js</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#E1E4E8"> Ember.HTMLBars.</span><span style="color:#B392F0">makeBoundHelper</span><span style="color:#E1E4E8">(</span><span style="color:#F97583">function</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">firstArg</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">secondArg</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">options</span><span style="color:#E1E4E8">) {</span></span> 1665<span class="line"><span style="color:#F97583"> let</span><span style="color:#E1E4E8"> { hash } </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> options;</span></span> 1666<span class="line"><span style="color:#7e8791"> // helper code</span></span> 1667<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1668</div> 1669<p>or</p> 1670<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#E1E4E8">Ember.Handlebars.</span><span style="color:#B392F0">registerHelper</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'foo-bar'</span><span style="color:#E1E4E8">, </span><span style="color:#F97583">function</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">firstArg</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">secondArg</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">options</span><span style="color:#E1E4E8">) {</span></span> 1671<span class="line"><span style="color:#F97583">
1671 let</span><span style="color:#E1E4E8"> { hash } </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> options;</span></span> 1672<span class="line"><span style="color:#7e8791"> // helper code</span></span> 1673<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1674<p>you can replace those with:</p> 1675<div><div class="filename javascript">app/helpers/foo-bar.js</div><pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#E1E4E8"> Ember.Helper.</span><span style="color:#B392F0">helper</span><span style="color:#E1E4E8">(</span><span style="color:#F97583">function</span><span style="color:#E1E4E8">([</span><span style="color:#FFAB70">firstArg</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">secondArg</span><span style="color:#E1E4E8">], </span><span style="color:#FFAB70">hash</span><span style="color:#E1E4E8">) {</span></span> 1676<span class="line"><span style="color:#7e8791"> // helper code</span></span> 1677<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1678</div> 1679</div> 1680 </section> 1681</div> 1682 <div class="padding-vertical-small bg-light-muted rounded-sm"> 1683 1684 <h3 id="toc_modifying-a-property-within-code-didinsertelement-code"> 1685 Modifying a Property within didInsertElement 1686 1687 <a title="Modifying a Property within didInsertElement" href="/id/modifying-a-property-within-code-didinsertelement-code" id="ember907" class="ember-view"> 1688 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 1689 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 1690 </svg> 1691 </a> 1692 </h3> 1693 1694 <div class="my-2"> 1695<!----> </div> 1696 <section> 1697 <div id="ember908" class="ember-view"><p>Because of changes in the way Ember renders components in 1.13, setting properties within an overridden <code>didInsertElement</code> method 1698will result in a deprecation warning.</p> 1699<p>In many cases you can move your logic earlier in the component lifecycle by implementing the <code>didReceiveAttrs</code> hook, one of 1700<a href="http://emberjs.com/blog/2015/06/12/ember-1-13-0-released.html#toc_component-lifecycle-hooks">the new hooks introduced in 1.13</a>.</p> 1701<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#B392F0"> didReceiveAttrs</span><span style="color:#E1E4E8">() {</span></span> 1702<span class="line"><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">
1702_super</span><span style="color:#E1E4E8">(</span><span style="color:#F97583">...</span><span style="color:#79B8FF">arguments</span><span style="color:#E1E4E8">);</span></span> 1703<span class="line"><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">set</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'myValue'</span><span style="color:#E1E4E8">, value);</span></span> 1704<span class="line"><span style="color:#E1E4E8"> }</span></span></code></pre> 1705<p>It may even be possible, if your value is constant, to move the change to <code>init</code>, where the value can only be set once.</p> 1706<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#B392F0"> init</span><span style="color:#E1E4E8">() {</span></span> 1707<span class="line"><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">
1707_super</span><span style="color:#E1E4E8">(</span><span style="color:#F97583">...</span><span style="color:#79B8FF">arguments</span><span style="color:#E1E4E8">);</span></span> 1708<span class="line"><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">set</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'myValue'</span><span style="color:#E1E4E8">, myValue);</span></span> 1709<span class="line"><span style="color:#E1E4E8"> }</span></span></code></pre> 1710<p>Don't see a <code>set</code> in your <code>didInsertElement</code>? It may be in <code>didUpdate</code> or <code>didRender</code>. Due to a bug, these report the wrong method name.</p> 1711<p>Still can't find it?</p> 1712<ul> 1713<li>One of your computed properties may be calling <code>set</code>.</li> 1714<li>An observer is being triggered.</li> 1715<li>One of your child components may be setting one of its attributes and it is being propagated upward to this component.</li> 1716</ul> 1717<p>In rare cases, you may be measuring the DOM rendered and want to set an attribute based on that. In this case, it is ok to cause a second render:</p> 1718<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#B392F0"> didInsertElement</span><span style="color:#E1E4E8">() {</span></span> 1719<span class="line"><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">
1719_super</span><span style="color:#E1E4E8">(</span><span style="color:#F97583">...</span><span style="color:#79B8FF">arguments</span><span style="color:#E1E4E8">);</span></span> 1720<span class="line"><span style="color:#E1E4E8"> run.</span><span style="color:#B392F0">schedule</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'afterRender'</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">this</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">this</span><span style="color:#E1E4E8">.measureAndSet);</span></span> 1721<span class="line"><span style="color:#E1E4E8"> },</span></span> 1722<span class="line"></span> 1723<span class="line"><span style="color:#B392F0"> measureAndSet</span><span style="color:#E1E4E8">() {</span></span> 1724<span class="line"><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">set</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'height'</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">this</span><span style="color:#E1E4E8">.element.children.</span><span style="color:#79B8FF">length</span><span style="color:#F97583"> *</span><span style="color:#79B8FF"> 30</span><span style="color:#E1E4E8">);</span></span> 1725<span class="line"><span style="color:#E1E4E8"> }</span></span></code></pre> 1726<p>However, doing so is relatively slow and should be done as a last resort.</p> 1727</div> 1728 </section> 1729</div> 1730 <div class="padding-vertical-small bg-light-muted rounded-sm"> 1731 1732 <h3 id="toc_non-standard-ways-of-calling-code-ember-set-code-and-code-ember-get-code"> 1733 Non-Standard Ways of Calling <code>Ember.set</code> and <code>Ember.get</code> 1734 1735 <a title="Non-Standard Ways of Calling `Ember.set` and `Ember.get`" href="/id/non-standard-ways-of-calling-code-ember-set-code-and-code-ember-get-code" id="ember909" class="ember-view"> 1736 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 1737 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 1738 </svg> 1739 </a> 1740 </h3> 1741 1742 <div class="my-2"> 1743<!----> </div> 1744 <section> 1745 <div id="ember910" class="ember-view"><p>Ember is deprecating calls to <code>get</code> and <code>set</code> made in non-standard ways. Below are examples 1746of the calls that are now deprecated:</p> 1747<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#7e8791">// referencing properties with globals</span></span> 1748<span class="line"><span style="color:#E1E4E8">Ember.</span><span style="color:#B392F0">set</span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">null</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">'App.foo'</span><span style="color:#E1E4E8">, bar);</span></span> 1749<span class="line"><span style="color:#E1E4E8">Ember.</span><span style="color:#B392F0">set</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'App.foo'</span><span style="color:#E1E4E8">, bar);</span></span> 1750<span class="line"><span style="color:#E1E4E8">Ember.</span><span style="color:#B392F0">
1750get</span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">null</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">'App.foo'</span><span style="color:#E1E4E8">);</span></span> 1751<span class="line"><span style="color:#E1E4E8">Ember.</span><span style="color:#B392F0">get</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'App.foo'</span><span style="color:#E1E4E8">);</span></span> 1752<span class="line"></span> 1753<span class="line"><span style="color:#7e8791">// referencing properties with 'this'</span></span> 1754<span class="line"><span style="color:#E1E4E8">Ember.</span><span style="color:#B392F0">set</span><span style="color:#E1E4E8">(obj, </span><span style="color:#9ECBFF">'this.foo'</span><span style="color:#E1E4E8">, bar);</span></span> 1755<span class="line"><span style="color:#E1E4E8">Ember.</span><span style="color:#B392F0">get</span><span style="color:#E1E4E8">(obj, </span><span style="color:#9ECBFF">'this.foo'</span><span style="color:#E1E4E8">);</span></span> 1756<span class="line"></span> 1757<span class="line"><span style="color:#7e8791">// providing a null context</span></span> 1758<span class="line"><span style="color:#E1E4E8">Ember.</span><span style="color:#B392F0">set</span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">null</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">'foo'</span><span style="color:#E1E4E8">, bar);</span></span> 1759<span class="line"><span style="color:#E1E4E8">Ember.</span><span style="color:#B392F0">get</span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">null</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">'foo'</span><span style="color:#E1E4E8">);</span></span> 1760<span class="line"></span> 1761<span class="line"><span style="color:#7e8791">// providing a non-string property</span></span> 1762<span class="line"><span style="color:#E1E4E8">Ember.</span><span style="color:#B392F0">set</span><span style="color:#E1E4E8">(obj, </span><span style="color:#79B8FF">42</span><span style="color:#E1E4E8">, bar);</span></span> 1763<span class="line"><span style="color:#E1E4E8">Ember.</span><span style="color:#B392F0">get</span><span style="color:#E1E4E8">(obj, </span><span style="color:#79B8FF">42</span><span style="color:#E1E4E8">);</span></span></code></pre> 1764</div> 1765 </section> 1766</div> 1767 <div class="padding-vertical-small bg-light-muted rounded-sm"> 1768 1769 <h3 id="toc_overriding-code-render-code-when-extending-a-component-or-view"> 1770 Overriding <code>render</code> When Extending a Component or View 1771 1772 <a title="Overriding `render` When Extending a Component or View" href="/id/overriding-code-render-code-when-extending-a-component-or-view" id="ember911" class="ember-view"> 1773 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 1774 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 1775 </svg> 1776 </a> 1777 </h3> 1778 1779 <div class="my-2"> 1780<!----> </div> 1781 <section> 1782 <div id="ember912" class="ember-view"><p>The <code>render</code> method on components and views should not be overridden and will 1783go away in Ember 2.x. Modifications to Ember rendering should be made by 1784overriding Ember's new 1785<a href="http://emberjs.com/blog/2015/06/12/ember-1-13-0-released.html#toc_component-lifecycle-hooks">component lifecycle hooks</a> 1786, introduced in version 1.13.</p> 1787</div> 1788 </section> 1789</div> 1790 <div class="padding-vertical-small bg-light-muted rounded-sm"> 1791 1792 <h3 id="toc_renderbuffer"> 1793 RenderBuffer 1794 1795 <a title="RenderBuffer" href="/id/renderbuffer" id="ember913" class="ember-view"> 1796 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
1797 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 1798 </svg> 1799 </a> 1800 </h3> 1801 1802 <div class="my-2"> 1803<!----> </div> 1804 <section> 1805 <div id="ember914" class="ember-view"><p>With the change to the rendering process in Glimmer, the RenderBuffer is no longer used by Ember 1806and will be removed. The class was originally private, and any reference to it should be removed.</p> 1807</div> 1808 </section> 1809</div> 1810 <div class="padding-vertical-small bg-light-muted rounded-sm"> 1811 1812 <h3 id="toc_reversed-ember-observer-arguments"> 1813 Reversed Ember.observer Arguments 1814 1815 <a title="Reversed Ember.observer Arguments" href="/id/reversed-ember-observer-arguments" id="ember915" class="ember-view"> 1816 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 1817 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 1818 </svg> 1819 </a> 1820 </h3> 1821 1822 <div class="my-2"> 1823<!----> </div> 1824 <section> 1825 <div id="ember916" class="ember-view"><p>A little known feature of the observer function allowed for the arguments to be 1826listed in the opposite order, with function first:</p> 1827<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#E1E4E8">Ember.</span><span style="color:#B392F0">observer</span><span style="color:#E1E4E8">(</span><span style="color:#F97583">function</span><span style="color:#E1E4E8">() {</span></span> 1828<span class="line"><span style="color:#7e8791"> // React to observer firing here</span></span> 1829<span class="line"><span style="color:#E1E4E8">}, </span><span style="color:#9ECBFF">'property1'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">'property2'</span><span style="color:#E1E4E8">)</span></span></code></pre> 1830<p>This syntax was deprecated in Ember 1.13.5. The above code sample should be 1831replaced with the standard syntax that lists the observed properties, then 1832the function as the last argument:</p> 1833<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#E1E4E8">Ember.</span><span style="color:#B392F0">observer</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'property1'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">'property2'</span><span style="color:#E1E4E8">, </span><span style="color:#F97583">function</span><span style="color:#E1E4E8">() {</span></span> 1834<span class="line"><span style="color:#7e8791">
1834 // React to observer firing here</span></span> 1835<span class="line"><span style="color:#E1E4E8">})</span></span></code></pre> 1836</div> 1837 </section> 1838</div> 1839 <div class="padding-vertical-small bg-light-muted rounded-sm"> 1840 1841 <h3 id="toc_set-code-positionalparams-code-as-a-static-property-on-the-class"> 1842 Set positionalParams as a static property on the class 1843 1844 <a title="Set positionalParams as a static property on the class" href="/id/set-code-positionalparams-code-as-a-static-property-on-the-class" id="ember917" class="ember-view"> 1845 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 1846 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 1847 </svg> 1848 </a> 1849 </h3> 1850 1851 <div class="my-2"> 1852<!----> </div> 1853 <section> 1854 <div id="ember918" class="ember-view"><p>Setting <code>positionalParams</code> within <code>.extend</code> is deprecated. It has to be set as a static property on the class itself (<code>.reopenClass</code>).</p> 1855<p>Please change this:</p> 1856<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> Ember </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> 'ember'</span><span style="color:#E1E4E8">;</span></span> 1857<span class="line"></span> 1858<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#E1E4E8"> Ember.Component.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">({</span></span> 1859<span class="line"><span style="color:#E1E4E8"> positionalParams: [ </span><span style="color:#9ECBFF">'a'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">'b'</span><span style="color:#E1E4E8"> ]</span></span> 1860<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1861<p>to this:</p> 1862<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> Ember </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> 'ember'</span><span style="color:#E1E4E8">;</span></span> 1863<span class="line"></span> 1864<span class="line"><span style="color:#F97583">var</span><span style="color:#E1E4E8"> Thing </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> Ember.Component.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">();</span></span> 1865<span class="line"><span style="color:#E1E4E8">Thing.</span><span style="color:#B392F0">reopenClass</span><span style="color:#E1E4E8">({</span></span> 1866<span class="line"><span style="color:#E1E4E8"> positionalParams: [ </span><span style="color:#9ECBFF">'a'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">'b'</span><span style="color:#E1E4E8"> ]</span></span> 1867<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1868</div> 1869 </section> 1870</div> 1871 <div class="padding-vertical-small bg-light-muted rounded-sm"> 1872 1873 <h3 id="toc_sortablemixin"> 1874 SortableMixin 1875 1876 <a title="SortableMixin" href="/id/sortablemixin" id="ember919" class="ember-view"> 1877 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
1878 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 1879 </svg> 1880 </a> 1881 </h3> 1882 1883 <div class="my-2"> 1884<!----> </div> 1885 <section> 1886 <div id="ember920" class="ember-view"><p>Along with <code>Ember.ArrayController</code>, <code>Ember.SortableMixin</code> will be removed in Ember 2.0.</p> 1887<p>You can migrate away from using <code>Ember.SortableMixin</code> by using <code>Ember.computed.sort</code>. Using this example:</p> 1888<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> SongsController</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> Ember.ArrayController.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">(Ember.SortableMixin, {</span></span> 1889<span class="line"><span style="color:#E1E4E8"> model: </span><span style="color:#79B8FF">null</span><span style="color:#E1E4E8">,</span></span> 1890<span class="line"><span style="color:#E1E4E8"> sortProperties: [</span><span style="color:#9ECBFF">'trackNumber'</span><span style="color:#E1E4E8">],</span></span> 1891<span class="line"><span style="color:#E1E4E8"> sortAscending: </span><span style="color:#79B8FF">false</span></span> 1892<span class="line"><span style="color:#E1E4E8">});</span></span> 1893<span class="line"></span> 1894<span class="line"><span style="color:#F97583">let</span><span style="color:#E1E4E8"> songsController </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> SongsController.</span><span style="color:#B392F0">create</span><span style="color:#E1E4E8">({ songs: songList });</span></span></code></pre> 1895<p>You can transition to using <code>Ember.computed.sort</code> like this:</p> 1896<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> SongsController</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> Ember.Controller.</span><span style="color:#B392F0">extend</span><span style="color:#E1E4E8">({</span></span> 1897<span class="line"><span style="color:#E1E4E8"> model: </span><span style="color:#79B8FF">null</span><span style="color:#E1E4E8">,</span></span> 1898<span class="line"><span style="color:#E1E4E8"> sortedSongs: Ember.computed.</span><span style="color:#B392F0">sort</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'model'</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">'songSorting'</span><span style="color:#E1E4E8">),</span></span> 1899<span class="line"><span style="color:#E1E4E8"> songSorting: [</span><span style="color:#9ECBFF">'trackNumber:desc'</span><span style="color:#E1E4E8">]</span></span> 1900<span class="line"><span style="color:#E1E4E8">});</span></span> 1901<span class="line"></span> 1902<span class="line"><span style="color:#F97583">let</span><span style="color:#E1E4E8"> songsController </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> SongsController.</span><span style="color:#B392F0">create</span><span style="color:#E1E4E8">({ songs: songList });</span></span></code></pre> 1903<p>You can <a href="http://emberjs.com/api/classes/Ember.computed.html#method_sort">read more about Ember.computed.sort in the Ember API documentation</a></p> 1904<p>Legacy support of <code>Ember.SortableMixin</code> will be provided via the <a href="https://github.com/emberjs/ember-legacy-controllers">ember-legacy-controllers</a> addon.</p> 1905</div> 1906 </section> 1907</div> 1908 <div class="padding-vertical-small bg-light-muted rounded-sm"> 1909 1910 <h3 id="toc_using-code-code-for-namespace-in-the-code-render-code-helper"> 1911 Using <code>/</code> for namespace in the <code>{{render}}</code> helper 1912 1913 <a title="Using `/` for namespace in the `{{render}}` helper" href="/id/using-code-code-for-namespace-in-the-code-render-code-helper" id="ember921" class="ember-view"> 1914 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512">
1915 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 1916 </svg> 1917 </a> 1918 </h3> 1919 1920 <div class="my-2"> 1921<!----> </div> 1922 <section> 1923 <div id="ember922" class="ember-view"><p>When using the render helper, its possible to specify a context within a nested directory structure. Prior to 1.13, it 1924was acceptable to separate nested directories using slashes <code>/</code>, but this is now deprecated, as Ember has 1925settled on using dot notation for namespacing.</p> 1926<p>For example, a developer might have a controller at <code>app/controllers/blog/posts.js</code> and is using the render helper to 1927render that controller context within another template.</p> 1928<p>Instead of using <code>{{render 'blog/posts'}}</code>, use <code>{{render 'blog.posts'}}</code>. That will render the template associated with 1929<code>app/controllers/blog/posts.js</code> in your directory structure.</p> 1930</div> 1931 </section> 1932</div> 1933 <div class="padding-vertical-small bg-light-muted rounded-sm"> 1934 1935 <h3 id="toc_using-code-each-code-as-a-leaf-node-in-a-dependent-key"> 1936 Using <code>@each</code> as a leaf node in a dependent key 1937 1938 <a title="Using `@each` as a leaf node in a dependent key" href="/id/using-code-each-code-as-a-leaf-node-in-a-dependent-key" id="ember923" class="ember-view"> 1939 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 1940 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 1941 </svg> 1942 </a> 1943 </h3> 1944 1945 <div class="my-2"> 1946<!----> </div> 1947 <section> 1948 <div id="ember924" class="ember-view"><p>Using <code>@each</code> at the end of a computed key is deprecated and will not work in 1949Ember 2.0</p> 1950<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#B392F0">invalid</span><span style="color:#E1E4E8">: Ember.</span><span style="color:#B392F0">computed</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'myObject.@each'</span><span style="color:#E1E4E8">, </span><span style="color:#F97583">function</span><span style="color:#E1E4E8"> () {</span></span> 1951<span class="line"><span style="color:#7e8791"> //no longer valid for monitoring changes to arrays</span></span> 1952<span class="line"><span style="color:#E1E4E8">});
1952</span></span></code></pre> 1953<p>When defining dependent keys for computed properties, ember 2.0+ will treat 1954<code>@each</code> and <code>[]</code> differently.</p> 1955<p><code>@each</code> will monitor specific properties within an array of objects.</p> 1956<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#B392F0">eachProp</span><span style="color:#E1E4E8">: Ember.</span><span style="color:#B392F0">computed</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'[email protected]'</span><span style="color:#E1E4E8">, </span><span style="color:#F97583">function</span><span style="color:#E1E4E8"> () {</span></span> 1957<span class="line"><span style="color:#7e8791"> //fired whenever one of the blog post titles is changed.</span></span> 1958<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1959<p><code>[]</code> will monitor mutations to the array.</p> 1960<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#B392F0">arrProp</span><span style="color:#E1E4E8">: Ember.</span><span style="color:#B392F0">computed</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'myObj.posts.[]'</span><span style="color:#E1E4E8">, </span><span style="color:#F97583">function</span><span style="color:#E1E4E8"> () {</span></span> 1961<span class="line"><span style="color:#7e8791"> //fired whenever a blog post is added or removed</span></span> 1962<span class="line"><span style="color:#E1E4E8">});</span></span></code></pre> 1963</div> 1964 </section> 1965</div> 1966 <div class="padding-vertical-small bg-light-muted rounded-sm"> 1967 1968 <h3 id="toc_using-code-guid-code-and-code-item-code-as-key-in-code-each-code"> 1969 Using @guid and @item as key in {{each}} 1970 1971 <a title="Using @guid and @item as key in {{each}}" href="/id/using-code-guid-code-and-code-item-code-as-key-in-code-each-code" id="ember925" class="ember-view"> 1972 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 1973 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 1974 </svg> 1975 </a> 1976 </h3> 1977 1978 <div class="my-2"> 1979<!----> </div> 1980 <section> 1981 <div id="ember926" class="ember-view"><p>As of 1.13.2 you should not use <code>key='@guid'</code> or <code>key='@item'</code> in the <code>{{each}}</code> helper. It is 1982<a href="http://guides.emberjs.com/v1.13.0/templates/displaying-a-list-of-items/#toc_specifying-keys">documented in 1.13</a> 1983that you can use these special values to uniquely identify each array entry so that the view code could 1984more efficiently re-render the display of the list.</p> 1985<p>This process was simplified as part of a <a href="https://github.com/emberjs/ember.js/pull/11461">bugfix</a>, 1986where the key now implicitly defaults to <code>@identity</code>, which will pick either a guid or an item identifier based on type 1987of each array entry. Therefore, providing the key attribute is no longer required for re-render optimizations.</p> 1988<p>Applications should replace instances of:</p> 1989<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">#each</span><span style="color:#FFAB70"> people</span><span style="color:#79B8FF"> key</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">'@guid'</span><span style="color:#FFAB70"> as</span><span style="color:#E1E4E8"> |</span><span style="color:#FFAB70">person</span><span style="color:#E1E4E8">|</span><span style="color:#79B8FF">}}</span></span> 1990<span class="line"><span style="color:#E1E4E8">...</span></span> 1991<span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">/each</span><span style="color:#79B8FF">}}</span></span></code></pre> 1992<p>and</p> 1993<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">#each</span><span style="color:#FFAB70"> people</span><span style="color:#79B8FF"> key</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">
1993'@item'</span><span style="color:#FFAB70"> as</span><span style="color:#E1E4E8"> |</span><span style="color:#FFAB70">person</span><span style="color:#E1E4E8">|</span><span style="color:#79B8FF">}}</span></span> 1994<span class="line"><span style="color:#E1E4E8">...</span></span> 1995<span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">/each</span><span style="color:#79B8FF">}}</span></span></code></pre> 1996<p>with</p> 1997<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">#each</span><span style="color:#FFAB70"> people</span><span style="color:#79B8FF"> as</span><span style="color:#E1E4E8"> |</span><span style="color:#FFAB70">person</span><span style="color:#E1E4E8">|</span><span style="color:#79B8FF">}}</span></span> 1998<span class="line"><span style="color:#E1E4E8">...</span></span> 1999<span class="line"><span style="color:#79B8FF">{{</span><span style="color:#F97583">/each</span><span style="color:#79B8FF">}}</span></span></code></pre> 2000</div> 2001 </section> 2002</div> 2003 <div class="padding-vertical-small bg-light-muted rounded-sm"> 2004 2005 <h3 id="toc_using-code-this-get-template-code"> 2006 Using <code>this.get('template')</code> 2007 2008 <a title="Using `this.get('template')`" href="/id/using-code-this-get-template-code" id="ember927" class="ember-view"> 2009 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 2010 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 2011 </svg> 2012 </a> 2013 </h3> 2014 2015 <div class="my-2"> 2016<!----> </div> 2017 <section> 2018 <div id="ember928" class="ember-view"><p>Prior to 1.13, developers had to check for the existance of the internal <code>template</code> property to determine the existance of a yielded block.
2019This is being deprecated in favor of using the new <a href="http://emberjs.com/api/classes/Ember.Component.html#property_hasBlock">hasBlock</a> 2020property within your templates.</p> 2021<h4 id="determiningifablockhasbeenprovidedfromjavascript">Determining if a block has been provided from JavaScript</h4> 2022<p>Currently the <code>hasBlock</code> property is not made available from the JavaScript component object, 2023so there is no clean alternative for checking whether a block has been passed. 2024See the <a href="https://github.com/emberjs/rfcs/pull/102">JavaScript hasBlock RFC</a> for discussion on making this information 2025available in the future, as well as possible workarounds.</p> 2026</div> 2027 </section> 2028</div> 2029 <div class="padding-vertical-small bg-light-muted rounded-sm"> 2030 2031 <h3 id="toc_using-code-trackedarray-code-or-code-subarray-code"> 2032 Using <code>TrackedArray</code> or <code>SubArray</code> 2033 2034 <a title="Using `TrackedArray` or `SubArray`" href="/id/using-code-trackedarray-code-or-code-subarray-code" id="ember929" class="ember-view"> 2035 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 2036 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 2037 </svg> 2038 </a> 2039 </h3> 2040 2041 <div class="my-2"> 2042<!----> </div> 2043 <section> 2044 <div id="ember930" class="ember-view"><p><code>TrackedArray</code> and <code>SubArray</code> were internal classes used as implementation 2045details of <code>ArrayComputed</code>. <code>ArrayComputed</code> is deprecated to be removed 2046in version 2.0.0. As a result, these 2 private classes will be removed as 2047well.</p> 2048</div> 2049 </section> 2050</div> 2051 <div class="padding-vertical-small bg-light-muted rounded-sm"> 2052 2053 <h3 id="toc_using-the-code-with-code-helper-with-the-code-controller-code-option"> 2054 Using the <code>{{with}}</code> Helper with the <code>controller</code> option 2055 2056 <a title="Using the `{{with}}` Helper with the `controller` option" href="/id/using-the-code-with-code-helper-with-the-code-controller-code-option" id="ember931" class="ember-view"> 2057 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 2058 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 2059 </svg> 2060 </a> 2061 </h3> 2062 2063 <div class="my-2"> 2064<!----> </div> 2065 <section> 2066 <div id="ember932" class="ember-view"><p>Another option deprecated due to the de-emphasis of controllers is the controller 2067option used with the <code>{{with}}</code> helper. In prior versions it was possible to 2068specify a controller when using <code>{{with}}</code>, which would use an instance of the 2069specified controller as the context within the block.</p> 2070<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#E1E4E8">{{#</span><span style="color:#F97583">with</span><span style="color:#E1E4E8"> item.posts controller</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"myposts"</span><span style="color:#E1E4E8">}}</span></span> 2071<span class="line"><span style="color:#E1E4E8"> {{</span><span style="color:#F97583">!-</span><span style="color:#E1E4E8"> numPosts fetched from the controller instance </span><span style="color:#9ECBFF">"myposts"</span><span style="color:#E1E4E8"> }}</span></span> 2072<span class="line"><span style="color:#E1E4E8"> There are {{numPosts}} posts.</span></span> 2073<span class="line"><span style="color:#E1E4E8">{{</span><span style="color:#F97583">with</span><span style="color:#E1E4E8">}</span></span></code></pre> 2074<p>Similar to the 2075<a href="http://emberjs.com/deprecations/v1.x#toc_view-and-controller-options-on-the-code-each-code-helper">deprecated {{each}} helper controller options</a> 2076, this approach triggers less performant compatibility code and is deprecated
2076in 2077favor of using local properties or components.</p> 2078<h4 id="usinglocalproperties">Using local properties</h4> 2079<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#E1E4E8">{{#</span><span style="color:#F97583">with</span><span style="color:#E1E4E8"> item.posts </span><span style="color:#F97583">as</span><span style="color:#F97583"> |</span><span style="color:#B392F0">myPosts</span><span style="color:#F97583">|</span><span style="color:#E1E4E8">}}</span></span> 2080<span class="line"><span style="color:#E1E4E8"> There are {{myPosts.</span><span style="color:#79B8FF">length</span><span style="color:#E1E4E8">}} posts.</span></span> 2081<span class="line"><span style="color:#E1E4E8">{{</span><span style="color:#F97583">with</span><span style="color:#E1E4E8">}}</span></span></code></pre> 2082<h4 id="usingacomponent">Using a component</h4> 2083<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-javascript line-numbers"><span class="line"><span style="color:#E1E4E8">{{</span><span style="color:#F97583">!</span><span style="color:#E1E4E8"> prints the number </span><span style="color:#F97583">of</span><span style="color:#B392F0"> posts</span><span style="color:#E1E4E8"> (if available) }}</span></span> 2084<span class="line"><span style="color:#E1E4E8">{{post</span><span style="color:#F97583">-</span><span style="color:#E1E4E8">status posts</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">item.posts}}</span></span></code></pre> 2085</div> 2086 </section> 2087</div> 2088 <div class="padding-vertical-small bg-light-muted rounded-sm"> 2089 2090 <h3 id="toc_view-and-controller-options-on-the-code-each-code-helper"> 2091 View and Controller options on the <code>{{each}}</code> helper 2092 2093 <a title="View and Controller options on the `{{each}}` helper" href="/id/view-and-controller-options-on-the-code-each-code-helper" id="ember933" class="ember-view"> 2094 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"> 2095 <path d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path> 2096 </svg> 2097 </a> 2098 </h3> 2099 2100 <div class="my-2"> 2101<!----> </div> 2102 <section> 2103 <div id="ember934" class="ember-view"><p>The options <code>itemView</code>, <code>itemViewClass</code>, <code>tagName</code>, <code>emptyView</code>, 2104<code>emptyViewClass</code> and <code>itemController</code> on the <code>{{each}}</code> helper have been deprecated.</p> 2105<p>These options were added when controllers were more prominent, and the 2106component story was less fully fleshed out. In Ember 1.13+, using these options 2107triggers a less performant compatibility mode.</p> 2108<p>The usage of all the above mentioned options should be replaced with components.</p> 2109<h4 id="anexample">An example</h4> 2110<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#79B8FF">{{</span><span style="color:#FFAB70">each</span><span style="color:#FFAB70"> view.comments</span><span style="color:#FFAB70"> itemController</span><span style="color:#B392F0">=</span><span style="color:#9ECBFF">
2110"comment"</span></span> 2111<span class="line"><span style="color:#FFAB70"> itemView</span><span style="color:#B392F0">=</span><span style="color:#9ECBFF">"commentView"</span></span> 2112<span class="line"><span style="color:#FFAB70"> emptyView</span><span style="color:#B392F0">=</span><span style="color:#9ECBFF">"noCommentsView"</span></span> 2113<span class="line"><span style="color:#FFAB70"> tagName</span><span style="color:#B392F0">=</span><span style="color:#9ECBFF">"ul"</span><span style="color:#79B8FF">}}</span></span></code></pre> 2114<p>Can be replaced with:</p> 2115<pre class="shiki github-dark" style="background-color:#1c1e24;color:#e1e4e8" tabindex="0"><code class="language-handlebars line-numbers"><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">ul</span><span style="color:#E1E4E8">></span></span> 2116<span class="line"><span style="color:#79B8FF"> {{</span><span style="color:#F97583">#each</span><span style="color:#FFAB70"> comments</span><span style="color:#79B8FF"> as</span><span style="color:#E1E4E8"> |</span><span style="color:#FFAB70">comment</span><span style="color:#E1E4E8">|</span><span style="color:#79B8FF">}}</span></span> 2117<span class="line"><span style="color:#79B8FF"> {{</span><span style="color:#FFAB70">post-comment</span><span style="color:#FFAB70"> comment</span><span style="color:#B392F0">=</span><span style="color:#FFAB70">comment</span><span style="color:#79B8FF">}}</span></span> 2118<span class="line"><span style="color:#79B8FF"> {{</span><span style="color:#F97583">else</span><span style="color:#79B8FF">}}</span></span> 2119<span class="line"><span style="color:#79B8FF"> {{</span><span style="color:#FFAB70">no-comments</span><span style="color:#79B8FF">}}</span></span> 2120<span class="line"><span style="color:#79B8FF"> {{</span><span style="color:#F97583">/each</span><span style="color:#79B8FF">}}</span></span> 2121<span class="line"><span style="color:#E1E4E8"></</span><span style="color:#85E89D">ul</span><span style="color:#E1E4E8">></span></span></code></pre> 2122<h4 id="breakingtheexampledown">Breaking the example down</h4> 2123<p>The <code>comment</code> controller and <code>commentView</code> view have been refactored into the 2124<code>{{post-comment}}</code> component.</p> 2125<p>The <code>noCommentsView</code> has been refactored in to the <code>{{no-comments}}</code> component.</p> 2126<p>Instead of the <code>itemController="comment"</code> and <code>itemView="commentView"</code> we use 2127the newly created <code>{{post-comment}}</code> component.</p> 2128<p>Instead of the <code>emptyView="noCommentsView"</code> we use the <code>{{no-comments}}</code> 2129component.</p> 2130<p>We replaced <code>tagName="ul"</code> part by just surrounding the <code>{{each}}</code> block with 2131<code><ul></code> tags.</p> 2132</div> 2133 </section> 2134</div> 2135</div> 2136</div> 2137 </div> 2138</main> 2139 2140<footer class="es-footer"> 2141 <div class="footer-info container"> 2142 <div class="footer-info-links"> 2143 2144 <img src="/images/ember-logo.svg" height="40px" width="83px" alt role="presentation" class="footer-logo"> 2145 2146 <div class="spacer"></div> 2147 2148 <a href="https://emberjs.com/team" class="info-link">Team</a> 2149 <a href="https://emberjs.com/sponsors" class="info-link">Sponsors</a> 2150 <a href="https://emberjs.com/security" class="info-link">Security</a> 2151 <a href="https://emberjs.com/about/legal" class="info-link">Legal</a> 2152 <a href="https://emberjs.com/logos" class="info-link">Branding</a> 2153 <a href="https://emberjs.com/guidelines" class="info-link">Community Guidelines</a> 2154 </div> 2155 <div class="footer-social hide-on-mobile"> 2156 <a href="http://twitter.com/emberjs" title="Twitter" aria-label="Official Ember Twitter Account" rel="me"> 2157 <svg class="undefined"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path d="M939.5 227.941q-37 54-90 93v23q0 73-21 145t-64 139q-43 67-103 117t-144 82q-84 32-181 30-151 0-276-81 19 2 43 2 126 0 224-77-59-1-105-36t-64-89q19 3 34 3 24 0 48-6-63-13-104-62t-41-115v-2q38 21 82 23-37-25-59-64t-22-86q0-49 25-91 68 83 164 133t208 55q-5-21-5-41 0-75 53-127t127-53q79 0 132 57 61-12 115-44-21 64-80 100 52-6 104-28z"/></svg> Twitter 2158 </a> 2159 <a href="https://github.com/emberjs/ember.js" title="GitHub" aria-label="Ember.js github repository" rel="me"> 2160 <svg class="undefined"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path d="M392 643q0 22-7 45t-24 43q-17 20-40 19t-41-19q-18-18-24-43t-7-45q-1-20 7-46t24-43q16-17 41-19t40 19q15 21 24 43t7 46zm357 0q0 22-7 45t-24 43q-17 20-40 19t-41-19q-18-18-24-43t-7-45q-1-20 7-46t24-43q16-17 41-19t40 19q15 21 24 43t7 46zm90 0q0-67-39-114t-104-47q-23 0-109 12-40 6-88 6t-87-6q-85-12-109-12-66 0-104 47t-39 114q0 49 18 85t45 58q27 22 68 33t78 17q37 6 83 4h94q46 0 83-4t78-17q41-13 69-33t45-58q17-38 18-85zm125-99q0 116-34 185-22 43-59 74t-79 48q-42 17-95 27t-96 12q-43 2-93 3-43 0-79-2t-82-7q-46-5-85-17t-77-29q-38-17-67-45t-48-64q-35-69-35-185 0-132 76-221-15-45-15-95 0-64 28-121 61 0 106 22t106 69q82-20 172-20 83 0 157 18 58-46 104-67t105-22q29 57 29 121 0 49-15 94 76 89 76 222z"/></svg> GitHub 2161 </a> 2162 <a href="https://discordapp.com/invite/zT3asNS" title="Discord" aria-label="Join the Ember Community Discord" rel="me"> 2163 <svg class="undefined"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 245 240"><path d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zm36.5 0c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z"/><path class="st0" d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2
2163-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z"/></svg> Discord 2164 </a> 2165 <a href="https://hachyderm.io/@emberjs" title="Mastodon" aria-label="Official Ember Mastodon Account" rel="me"> 2166 <svg class="undefined"xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mastodon" viewBox="0 0 16 16"> 2167 <path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"/> 2168</svg> Mastodon 2169 </a> 2170 </div> 2171</div> 2172 2173 <div class="footer-help"> 2174 <p class="container py-1"> 2175 2176If you want help you can contact us by <a href="mailto:[email protected]?subject=Help">email</a>, 2177open an <a href="https://github.com/ember-learn/ember-website/issues/new"> issue</a>, 2178or get realtime help by joining the <a href="https://discord.gg/emberjs">Ember Discord</a>. 2179 2180 </p> 2181</div> 2182 <div class="footer-statement"> 2183 <p class="footer-copyright container py-1"> 2184 © Copyright 2026 - <a href="https://www.tilde.io/" class="footer-copyright">Tilde Inc.</a> 2185 <br> 2186 Ember.js is free, open source and always will be. 2187<!----> </p> 2188</div> 2189 2190 <hr class="footer-spacer container py-0 my-3"> 2191 2192 <div class="footer-contributions-wrapper container pt-0 pb-3"> 2193 <div class="footer-contributions"> 2194 <span>Ember is generously supported by</span> 2195 <div class="sponsor-icons"> 2196 <a href="https://www.netlify.com/" title="Netlify" aria-label="Netlify" class="mr-2"> 2197 <svg class="footer-contributor-logo"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 147 40"> 2198 <radialGradient id="a" cy="0%" r="100.11%" gradientTransform="matrix(0 .9989 -1.152 0 .5 -.5)"> 2199 <stop offset="0" stop-color="#20c6b7"/> 2200 <stop offset="1" stop-color="#4d9abf"/> 2201 </radialGradient> 2202 <g fill="none" fill-rule="evenodd"> 2203 <path fill="#0e1e25" d="m53.37 12.978.123 2.198c1.403-1.7 3.245-2.55 5.525-2.55 3.951 0 5.962 2.268 6.032 6.804v12.568h-4.26v-12.322c0-1.207-.26-2.1-.78-2.681-.52-.58-1.371-.87-2.552-.87-1.719 0-3 .78-3.84 2.338v13.535h-4.262v-19.02h4.016zm24.378 19.372c-2.7 0-4.89-.852-6.567-2.557-1.678-1.705-2.517-3.976-2.517-6.812v-.527c0-1.898.365-3.595 1.096-5.089.73-1.494 1.757-2.657 3.078-3.49 1.321-.831 2.794-1.247 4.42-1.247 2.583 0 4.58.826 5.988 2.478 1.41 1.653 2.114 3.99 2.114 7.014v1.723h-12.4c.13 1.57.652 2.812 1.57 3.726s2.073 1.371 3.464 1.371c1.952 0 3.542-.79 4.77-2.373l2.297 2.198c-.76 1.136-1.774 2.018-3.042 2.645-1.269.627-2.692.94-4.27.94zm-.508-16.294c-1.17 0-2.113.41-2.832 1.23-.72.82-1.178 1.963-1.377 3.428h8.12v-.317c-.094-1.43-.474-2.51-1.14-3.243-.667-.732-1.59-1.098-2.771-1.098zm16.765-7.7v4.623h3.35v3.164h-3.35v10.617c0 .726.144 1.25.43 1.573.286.322.798.483 1.535.483a6.55 6.55 0 0 0 1.49-.176v3.305c-.97.27-1.905.404-2.806.404-3.273 0-4.91-1.81-4.91-5.431v-10.776h-3.124v-3.164h3.122v-4.623h4.261zm11.137 23.643h-4.262v-27h4.262zm9.172 0h-4.262v-19.02h4.262zm-4.525-23.96c0-.655.207-1.2.622-1.634.416-.433 1.009-.65 1.78-.65.772 0 1.368.217 1.79.65.42.434.63.979.63 1.635 0 .644-.21 1.18-.63 1.608-.422.428-1.018.642-1.79.642-.771 0-1.364-.214-1.78-.642-.415-.427-.622-.964-.622-1.608zm10.663 23.96v-15.857h-2.894v-3.164h2.894v-1.74c0-2.11.584-3.738 1.753
2203-4.887 1.17-1.148 2.806-1.722 4.91-1.722.749 0 1.544.105 2.386.316l-.105 3.34a8.375 8.375 0 0 0 -1.631-.14c-2.035 0-3.052 1.048-3.052 3.146v1.687h3.858v3.164h-3.858v15.856h-4.261zm17.87-6.117 3.858-12.903h4.542l-7.54 21.903c-1.158 3.199-3.122 4.799-5.893 4.799-.62 0-1.304-.106-2.052-.317v-3.305l.807.053c1.075 0 1.885-.196 2.429-.589.543-.392.973-1.051 1.289-1.977l.613-1.635-6.664-18.932h4.595z"/> 2204 <path fill="url(#a)" fill-rule="nonzero" d="m28.589 14.135-.014-.006c-.008-.003-.016-.006-.023-.013a.11.11 0 0 1 -.028-.093l.773-4.726 3.625 3.626-3.77 1.604a.083.083 0 0 1 -.033.006h-.015c-.005-.003-.01-.007-.02-.017a1.716 1.716 0 0 0 -.495-.381zm5.258-.288 3.876 3.876c.805.806 1.208 1.208 1.355 1.674.022.069.04.138.054.209l-9.263-3.923a.728.728 0 0 0 -.015-.006c-.037-.015-.08-.032-.08-.07s.044-.056.081-.071l.012-.005zm5.127 7.003c-.2.376-.59.766-1.25 1.427l-4.37 4.369-5.652-1.177-.03-.006c-.05-.008-.103-.017-.103-.062a1.706 1.706 0 0 0 -.655-1.193c-.023-.023-.017-.059-.01-.092 0-.005 0-.01.002-.014l1.063-6.526.004-.022c.006-.05.015-.108.06-.108a1.73 1.73 0 0 0 1.16-.665c.009-.01.015-.021.027-.027.032-.015.07 0 .103.014l9.65 4.082zm-6.625 6.801-7.186 7.186 1.23-7.56.002-.01c.001-.01.003-.02.006-.029.01-.024.036-.034.061-.044l.012-.005a1.85 1.85 0 0 0 .695-.517c.024-.028.053-.055.09-.06a.09.09 0 0 1 .029 0l5.06 1.04zm-8.707 8.707-.81.81-8.955-12.942a.424.424 0 0 0 -.01-.014c-.014-.019-.029-.038-.026-.06 0-.016.011-.03.022-.042l.01-.013c.027-.04.05-.08.075-.123l.02-.035.003-.003c.014-.024.027-.047.051-.06.021-.01.05-.006.073-.001l9.921 2.046a.164.164 0 0 1 .076.033c.013.013.016.027.019.043a1.757 1.757 0 0 0 1.028 1.175c.028.014.016.045.003.078a.238.238 0 0 0 -.015.045c-.125.76-1.197 7.298-1.485 9.063zm-1.692 1.691c-.597.591-.949.904-1.347 1.03a2 2 0 0 1 -1.206 0c-.466-.148-.869-.55-1.674-1.356l-8.993-8.993 2.349-3.643c.011-.018.022-.034.04-.047.025-.018.061-.01.091 0a2.434 2.434 0 0 0 1.638-.083c.027-.01.054-.017.075.002a.19.19 0 0 1 .028.032l8.999 13.059zm-14.087-10.186-2.063-2.063 4.074-1.738a.084.084 0 0 1 .033-.007c.034 0 .054.034.072.065a2.91 2.91 0 0 0 .13.184l.013.016c.012.017.004.034-.008.05l-2.25 3.493zm-2.976-2.976-2.61-2.61c-.444-.444-.766-.766-.99-1.043l7.936 1.646a.84.84 0 0 0 .03.005c.049.008.103.017.103.063 0 .05-.059.073-.109.092l-.023.01zm-4.056-4.995a2 2 0 0 1 .09-.495c.148-.466.55-.868 1.356-1.674l3.34-3.34a2175.525 2175.525 0 0 0 4.626 6.687c.027.036.057.076.026.106-.146.161-.292.337-.395.528a.16.16 0 0 1 -.05.062c-.013.008-.027.005-.042.002h-.002l-8.949-1.877zm5.68-6.403 4.489-4.491c.423.185 1.96.834 3.333 1.414 1.04.44 1.988.84 2.286.97.03.012.057.024.07.054.008.018.004.041 0 .06a2.003 2.003 0 0 0 .523 1.828c.03.03 0 .073-.026.11l-.014.021-4.56 7.063c-.012.02-.023.037-.043.05-.024.015-.058.008-.086.001a2.274 2.274 0 0 0 -.543-.074c-.164 0-.342.03-.522.063h-.001c-.02.003-.038.007-.054-.005a.21.21 0 0 1 -.045-.051l-4.808-7.013zm5.398-5.398 5.814-5.814c.805-.805 1.208-1.208 1.674-1.355a2 2 0 0 1 1.206 0c.466.147.869.55 1.674 1.355l1.26 1.26-4.135 6.404a.155.155 0 0 1 -.041.048c-.025.017-.06.01-.09 0a2.097 2.097 0 0 0 -1.92.37c-.027.028-.067.012-.101-.003-.54-.235-4.74-2.01-5.341-2.265zm12.506-3.676 3.818 3.818-.92 5.698v.015a.135.135 0 0 1 -.008.038c-.01.02-.03.024-.05.03a1.83 1.83 0 0 0 -.548.273.154.154 0 0 0 -.02.017c-.011.012-.022.023-.04.025a.114.114 0 0 1 -.043-.007l-5.818-2.472-.011-.005c-.037-.015-.081-.033-.081-.071a2.198 2.198 0 0 0 -.31-.915c-.028-.046-.059-.094-.035-.141zm-3.932 8.606 5.454 2.31c.03.014.063.027.076.058a.106.106 0 0 1 0 .057c-.016.08-.03.171-.03.263v.153c0 .038-.039.054-.075.069l-.011.004c-.864.369-12.13 5.173-12.147 5.173s-.035 0-.052-.017c-.03-.03 0-.072.027-.11a.76.76 0 0 0 .014-.02l4.482-6.94.008-.012c.026-.042.056-.089.104-.089l.045.007c.102.014.192.027.283.027.68 0 1.31-.331 1.69-.897a.16.16 0 0 1 .034-.04c.027-.02.067-.01.098.004zm-6.246 9.185 12.28-5.237s.018 0 .035.017c.067.067.124.112.179.154l.027.017c.025.014.05.03.052.056 0 .01 0 .016-.002.025l-1.052 6.462-.004.026c-.007.05-.014.107-.061.107a1.729 1.729 0 0 0 -1.373.847l-.005.008c-.014.023-.027.045-.05.057-.021.01-.048.006-.07.001l-9.793-2.02c-.01-.002-.152-.519-.163-.52z" transform="translate(-.702)"/> 2205 </g> 2206</svg> 2207 </a> 2208 <a href="https://www.heroku.com/" title="Heroku" aria-label="Heroku" class="mr-2"> 2209 <svg class="footer-contributor-logo"xmlns="http://www.w3.org/2000/svg" width="268" height="80" viewBox="0 0 268 80"> 2210 <path fill="#430098" fill-rule="evenodd" d="M64.8,0 C68.776,0 72,3.224 72,7.2 L72,7.2 L72,72.8 C72,76.776 68.776,80 64.8,80 L64.8,80 L7.2,80 C3.224,80 0,76.776 0,72.8 L0,72.8 L0,7.2 C0,3.224 3.224,0 7.2,0 L7.2,0 Z M64.8,4 L7.2,4 C5.436,4 4,5.435 4,7.2 L4,7.2 L4,72.8 C4,74.564 5.436,76 7.2,76 L7.2,76 L64.8,76 C66.565,76 68,74.564 68,72.8 L68,72.8 L68,7.2 C68,5.435 66.565,4 64.8,4 L64.8,4 Z M19,52 L28,60 L19,68 L19,52 Z M27,12 L27,34.711 C30.994,33.411 36.577,32 42,32 C46.945,32 49.905,33.944 51.517,35.575 C54.814625,38.91 54.995191,43.1202378 55.0003112,43.9159307 L55.0002258,68 L47,68 L47,44.11 C46.961,42.243 46.062,40 42,40 C34.230209,40 25.5570898,43.7328438 24.7166549,44.1028638 L24.651,44.132 L19,46.692 L19,12 L27,12 Z M191.995,25 C198.5525,25 205.37,29.165 205.37,39.15 C205.37,49.135 198.5525,53.3 191.995,53.3 C185.3975,53.2975 178.5825,49.135 178.5825,39.15 C178.5825,29.1675 185.3975,25 191.995,25 Z M251.99,25.5175 L251.99,41.805 C251.99,45.5625 253.205,47.2575 256.155,47.2575 C259.1025,47.2575 260.28,45.5625 260.28,41.805 L260.28,25.5175 L267.5,25.5175 L267.5,41.84 C267.5,49.0625 264.037
22105,53.1875 256.0775,53.1875 C248.1175,53.1875 244.62,49.0625 244.62,41.84 L244.62,25.5175 L251.99,25.5175 Z M220.94,25.5175 L220.94,35.3925 L228.4575,25.5175 L237.005,25.5175 L227.83,36.2775 L237.815,52.785 L229.4875,52.785 L223.04,41.8775 L220.94,44.31 L220.94,52.785 L213.57,52.785 L213.57,25.5175 L220.94,25.5175 Z M140.25,25.5175 L140.25,31.635 L128.165,31.635 L128.165,36.0575 L136.7875,36.0575 L136.7875,41.805 L128.165,41.805 L128.165,46.8525 L140.8775,46.8525 L140.8775,52.785 L120.7975,52.785 L120.7975,25.5175 L140.25,25.5175 Z M159.6175,25.5175 C166.6175,25.5175 170.8925,27.84 170.8925,34.3975 C170.8925,38.67 169.0875,41.1425 165.5125,42.355 L171.2975,52.7825 L163.4875,52.7825 L158.2175,43.315 L156.19,43.315 L156.19,52.7825 L148.9675,52.7825 L148.9675,25.5175 L159.6175,25.5175 Z M94.87,25.5175 L94.87,35.65 L103.935,35.65 L103.935,25.5175 L111.305,25.5175 L111.305,52.7825 L103.935,52.7825 L103.935,41.765 L94.87,41.765 L94.87,52.7825 L87.5,52.7825 L87.5,25.5175 L94.87,25.5175 Z M191.9925,31.0825 C188.1225,31.0825 185.95,34.14 185.95,39.15 C185.95,44.1625 188.125,47.405 191.9925,47.405 C195.825,47.4025 197.9975,44.1625 197.9975,39.15 C197.9975,34.14 195.8225,31.0825 191.9925,31.0825 Z M159.36,31.485 L156.1925,31.485 L156.1925,37.7125 L159.36,37.7125 C162.3825,37.7125 163.7075,36.865 163.7075,34.58 C163.7075,32.295 162.38,31.485 159.36,31.485 Z M55,12 C54.46,16.544 52.618,20.9 49,25 L49,25 L41,25 C44.144,20.875 46.118,16.534 47,12 L47,12 Z"/> 2211</svg> 2212 </a> 2213 <a href="https://www.fastly.com" title="Fastly" aria-label="Fastly" class="mr-2"> 2214 <svg class="footer-contributor-logo"enable-background="new 0 0 1709 735" viewBox="0 0 1709 735" xmlns="http://www.w3.org/2000/svg"><g fill="#ff282d"><path d="m1135.107 129.93v405.493h121.802v-61.956h-40.25v-405.303l-81.564.011z"/><path d="m77.437 473.467h41.405v-195.631h-41.405v-53.801l41.405-6.809v-54.462c0-65.969 14.359-94.598 98.487-94.598 18.17 0 39.707 2.683 58.563 6.08l-11.176 66.314c-12.77-2.023-19.104-2.382-27.176-2.382-29.639 0-37.133 2.957-37.133 31.916v47.131h61.541v60.611h-61.541v195.632h40.973v61.946l-163.941.017v-61.964z"/><path d="m1093.617 453.889c-12.759 2.692-23.915 2.368-31.988 2.567-33.557.825-30.658-10.204-30.658-41.844v-136.776h63.873v-60.611h-63.873v-149.061h-81.563v363.358c0 71.341 17.606 103.9 94.339 103.9 18.173 0 43.144-4.676 61.997-8.714z"/><path d="m1600.297 473.8c17.141 0 31.023 13.625 31.023 30.768 0 17.138-13.883 30.76-31.023 30.76-17.141 0-30.941-13.622-30.941-30.76.001-17.143 13.801-30.768 30.941-30.768m0 56.693c14.239 0 25.837-11.688 25.837-25.925 0-14.245-11.598-25.579-25.837-25.579-14.236 0-25.758 11.335-25.758 25.579.001 14.236 11.522 25.925 25.758 25.925m5.713-10.811-6.242-9.141h-4.306v9.141h-6.941v-30.239h12.651c7.473 0 12.133 3.782 12.133 10.468 0 4.914-2.463 8.258-6.327 9.398l7.558 10.372h-8.526zm-10.547-15.207h5.537c3.168 0 5.276-1.229 5.276-4.563 0-3.165-2.109-4.402-5.104-4.402h-5.71v8.965z"/><path d="m847.593 277.725v-10.851c-24.675-4.501-49.178-4.566-62.47-4.566-37.957 0-42.585 20.129-42.585 31.04 0 15.436 5.267 23.782 46.388 32.773 60.107 13.494 120.473 27.573 120.473 102.104 0 70.682-36.377 107.198-112.947 107.198-51.238 0-100.954-10.999-138.888-20.625v-60.909h61.764l-.036 10.821c26.579 5.134 54.448 4.62 68.997 4.62 40.487 0 47.037-21.767 47.037-33.34 0-16.061-11.611-23.774-49.562-31.47-71.5-12.217-128.244-36.628-128.244-109.257 0-68.746 45.979-95.714 122.55-95.714 51.875 0 91.318 8.045 129.272 17.676v60.5z"/><path d="m472.333 331.263-6.207-6.209-31.522 27.47c-1.591-.57-3.293-.897-5.071-.897-8.506 0-15.392 7.089-15.392 15.824 0 8.745 6.886 15.832 15.392 15.832 8.502 0 15.404-7.087 15.404-15.832 0-1.659-.252-3.257-.713-4.76z"/><path d="m597.261 453.889-.053-253.81h-81.562v23.802c-16.799-10.078-35.511-17.285-55.455-20.979h.461v-28.166h9.951v-20.714h-82.125v20.714h9.95v28.166h.566c-78.009 14.361-137.126 82.671-137.126 164.833 0 92.595 75.062 167.657 167.657 167.657 31.602 0 61.155-8.755 86.385-23.955l14.694 23.986h86.152v-81.535h-19.495zm-162.851-.185v-9.588h-9.772v9.561c-43.775-2.551-78.789-37.721-81.073-81.567h9.713v-9.772h-9.663c2.596-43.542 37.466-78.378 81.023-80.917v9.61h9.772v-9.638c42.935 2.295 77.52 35.973 81.257 78.51v2.802h-9.791v9.772h9.793l.001 2.676c-3.717 42.557-38.311 76.256-81.26 78.551z"/><path d="m1463.34 217.225h168.223v60.552h-40.209l-103.17 253.82c-29.569 71.3-78.136 138.408-152.102 138.408-18.186 0-42.396-2.015-59.185-6.049l7.377-74.028c10.773 2.015 24.884 3.341 32.288 3.341 34.301 0 72.993-21.253 85.094-58.257l-104.536-257.233h-40.211v-60.552h168.31v60.552h-40.205l59.223 145.702 59.223-145.702h-40.121v-60.554z"/></g></svg> 2215 </a> 2216 <a href="https://percy.io" title="Percy" aria-label="Percy" class="mr-2"> 2217 <svg class="footer-contributor-logo"width="142" height="42" viewBox="0 0 142 42" fill="none" xmlns="http://www.w3.org/2000/svg"> 2218 <path d="M20.9714 2.79645C9.38911 2.79645 1.15002e-07 2.17034 1.15002e-07 1.39816C1.15002e-07 0.625984 9.38911 4.16326e-07 20.9714 4.16326e-07C32.5536 4.16326e-07 41.9428 0.625984 41.9428 1.39816C41.9428 2.17034 32.5536 2.79645 20.9714 2.79645Z" transform="translate(2.06818 39.2036)" fill="#390156" fill-opacity="0.2"/> 2219 <path d="M51.6147 9.25742C51.3857 8.52394 50.7055 8.03104 49.922 8.03104C49.6887 8.03104 49.4604 8.0759 49.2433 8.16438C48.6875 8.39085 47.8206 8.65589 46.7369 8.70517C44.5468 7.14594 39.2359 3.37933 36.085 1.26608C36.085 1.26608 36.5264 2.52208 37.136 4.86861C37.136 4.86861 32.1536 2.11539 28.8366 -6.29924e-09C28.8366 -6.29924e-09 30.076 2.47659 30.1786 3.2785C30.1786 3.2785 26.2337 2.61219 20.4653 1.38946C20.4653 1.38946 24.756 3.737 25.8127 5.15041C25.8127 5.15041 20.6512 4.80824 14.5721 4.46809C14.5721 4.46809 17.6534 5.99517 19.1566 7.22849C19.1566 7.22849 13.646 8.02209 9.44809 8.22298C9.44809 8.22298 12.5616 10.6073 13.8181 11.762C13.8181 11.762 8.57655 13.7897 2.31689 17.3506C2.31689 17.3506 5.61541 17.5106 7.9936 18.2535C7.9936 18.2535 5.12517 20.7343 -1.39458e-09 26.4228C-1.39458e-09 26.4228 3.29119 26.304 5.94662 25.9523C5.94662 25.9523 3.86719 29.1058 1.28155 34.7706C1.28155 34.7706 3.05514 33.6712 4.77272 33.273C4.77272 33.273 4.957 39.6318 8.52942 40.6505L8.53238 40.6461C8.70739 40.7 8.87441 40.719 9.0194 40.719C9.19389 40.719 9.37623 40.6928 9.56154 40.641C10.6953 40.3253 11.5533 39.2364 12.5468 37.9758C12.9131 37.511 13.2908 37.0322 13.6972 36.5697C13.8102 36.9151 13.9567 37.3274 14.1325 37.7435C14.7841 39.2864 15.4821 40.0364 16.2665 40.0364C16.3263 40.0364 16.3868 40.0317 16.4461 40.0226C17.4474 39.8687 18.3755 37.9793 19.1514 36.1514C19.547 35.2198 19.8949 34.2894 20.1316 33.6303C20.1596 33.6321 20.1871 33.633 20.2151 33.6351C22.6249 33.8192 24.1108 36.1522 25.3048 38.0267C26.2047 39.4396 26.9155 40.5556 27.9077 40.6625C27.9774 40.67 28.0469 40.6738 28.1145 40.6738C29.6311 40.6738 30.1641 38.9504 30.839 36.7686C30.8838 36.6234 30.9298 36.4748 30.9769 36.3236C31.1139 36.5868 31.263 36.8621 31.4219 37.1387C32.5309 39.069 33.5127 40.0142 34.4234 40.0285L34.4492 40.0288C35.2045 40.0288 35.7026 39.5346 35.9299 38.5603C36.0998 37.8325 36.136 36.8325 36.1779 35.6744C36.2746 33.0032 36.4078 29.3559 38.2736 26.2214C39.6531 25.3756 41.175 24.6052 42.6686 23.8493C46.1458 22.0894 49.4302 20.4272 51.0778 17.9052C51.9018 16.644 52.3103 15.0963 52.2917 13.3051C52.2752 11.6985 51.9145 10.2171 51.6147 9.25742Z" transform="translate(0.221924 0.18277)" fill="#2B023F"/> 2220 <path d="M5.45908 6.81247C2.9605 6.81247 1.31568 7.94975 4.03112e-07 9.33392C0.347559 10.4624 1.2209 12.8886 2.26873 12.7275C3.2899 12.5705 4.8026 8.72634 5.49553 6.8131C5.48355 6.81297 5.47106 6.81247 5.45908 6.81247ZM21.2565 1.60044C18.929 3.82862 17.8377 6.56672 17.1013 8.82918C17.8663 10.3776 19.2046 12.7096 20.3342 12.7275C22.6079 12.7633 20.3924 5.83222 23.2796 9.19409e-07C22.5369 0.50109 21.8517 1.03079 21.2565 1.60044Z" transform="translate(14.3193 26.9798)" fill="#9E66BF"/> 2221 <path d="M36.6372 2.57107C35.439 2.26129 34.2877 2.6768 34.0656 3.49927C33.8436 4.32185 34.6349 5.23972 35.833 5.5495C37.0312 5.8594 38.1825 5.44376 38.4046 4.6213C38.6266 3.79884 37.8353 2.88084 36.6372 2.57107ZM43.998 7.52625C43.8216 8.07675 43.5769 8.61237 43.247 9.11736C40.3926 13.4868 31.8983 15.4032 27.5969 19.5209C22.3197 24.5729 23.2535 31.9347 20.5673 31.6452C18.6768 31.4414 17.2586 24.9523 12.8583 24.6161C6.21568 24.1087 4.75745 30.8785 2.02373 31.64C-0.709998 32.4016 -0.313635 25.5367 1.09836 22.4973C2.34515 19.8131 4.58181 16.0503 8.00048 16.9137C10.2626 17.485 7.63553 21.1987 7.63553 21.1987C7.63553 21.1987 12.4197 21.5022
222115.3704 17.1994C17.3301 14.3417 23.8225 4.56622 30.33 13.0221C30.33 13.0221 27.7806 5.92519 29.4344 2.47302C30.7915 -0.359727 33.9148 -0.303265 36.7572 0.417239C39.0876 1.00793 40.9342 0.565827 42.0444 0.11351C42.2612 0.0251644 42.4876 0.00147176 42.7028 0.0318446C42.2929 0.051001 41.6627 0.264115 41.2981 1.29415C40.7538 2.83195 43.7142 1.64992 44.3475 4.06034C44.3475 4.06034 44.5423 7.71908 41.4476 7.26966L41.5684 6.47618C41.5684 6.47618 40.5721 7.10343 41.2842 8.34304L41.3983 7.59381C42.0217 7.81284 42.903 7.91946 43.998 7.52625ZM44.3476 4.06034H44.3475V4.06022L44.3476 4.06034Z" transform="translate(7.61865 8.69904)" fill="#D6B5E5"/> 2222 <path d="M21.3153 1.34548C18.9679 3.59269 17.878 6.35839 17.1415 8.63194C17.5536 9.45516 18.412 10.7732 18.412 10.7732C18.3671 6.21069 22.269 0.914967 22.9706 6.5798e-07C22.3693 0.425347 21.8107 0.871235 21.3153 1.34548ZM3.67342e-08 9.1411C0.229088 9.79871 0.690224 10.7732 0.690224 10.7732C0.690224 10.7732 2.08651 7.19698 5.47943 6.55814C2.96552 6.57024 1.31864 7.73626 3.67342e-08 9.1411Z" transform="translate(14.2605 27.2348)" fill="#5C007B"/> 2223 <path d="M4.30028e-07 9.7449C2.73373 8.98331 4.19195 2.21357 10.8346 2.72096C15.2349 3.0572 16.6531 9.54628 18.5436 9.75007C18.5436 9.75007 17.5246 7.71307 16.7037 5.14196C15.8828 2.57098 13.0853 4.56737e-07 10.5436 4.56737e-07C8.00171 4.56737e-07 5.12157 1.33918 3.51396 4.69519C1.09238 9.75007 4.30028e-07 9.7449 4.30028e-07 9.7449Z" transform="translate(9.6424 30.5942)" fill="#C393DB"/> 2224 <path d="M19.3784 7.41123C17.5036 7.65636 12.3633 8.15051 9.40624 8.29204C9.40624 8.29204 10.0791 8.71916 10.6596 9.17273C14.6017 8.8961 19.7189 7.63859 19.3784 7.41123ZM14.0399 11.9447C12.2853 12.6757 7.35372 14.5845 2.27375 17.6107C2.27375 17.6107 2.94479 17.5531 3.57333 17.6107C9.20394 14.5294 14.2454 12.1204 14.0399 11.9447ZM26.0346 5.33315C24.1258 5.21065 18.7688 4.80194 14.5322 4.56475C14.5322 4.56475 15.6156 5.05815 16.6168 5.6215C21.7055 5.91628 26.4433 5.66359 26.0346 5.33315ZM8.21547 18.4362C6.21691 19.9398 3.33098 22.905 0 26.7424C0 26.7424 0.382585 26.5997 0.660993 26.587C5.29206 21.5131 8.36575 18.4772 8.21547 18.4362ZM46.8682 8.82199C46.8682 8.82199 40.1859 4.04564 36.1432 1.33426C36.1432 1.33426 36.4726 1.9208 36.7402 2.82241C40.5088 5.3828 46.8682 8.82199 46.8682 8.82199ZM6.16849 26.135C4.87806 27.6655 3.14953 31.0924 1.50343 34.9534C1.50343 34.9534 1.52622 34.9394 1.56704 34.9149C3.95887 29.8089 6.23404 26.1266 6.16849 26.135ZM37.3579 5.05135C35.8856 4.22674 31.4933 1.64203 28.9185 -3.55019e-10C28.9185 -3.55019e-10 29.4179 0.90123 29.7657 1.68929C32.9885 3.67512 37.4603 5.41885 37.3579 5.05135ZM23.0588 2.98284C21.8164 2.19038 20.4266 1.46458 20.4266 1.46458C24.8258 2.39694 29.0633 3.22469 30.4005 3.46125C30.552 3.84992 27.3119 3.845 23.0588 2.98284Z" fill="#9E66BF"/> 2225 <path d="M-1.06821e-07 6.15648e-08L4.37939 2.73251L7.22064 2.50556L-1.06821e-07 6.15648e-08Z" transform="translate(29.577 5.25861)" fill="#5C007B"/> 2226 <path d="M7.22031 2.50507L3.14969e-07 2.34524e-07L3.35338 1.58884C4.55471 2.15811 5.86626 2.47028 7.20061 2.50456L7.22031 2.50507Z" transform="translate(29.5771 5.25879)" fill="#9E66BF"/> 2227 <path d="M5.95146e-07 -2.46259e-07L6.93562 1.72686L9.96089 0.749448L5.95146e-07 -2.46259e-07Z" transform="translate(21.9153 9.23785)" fill="#5C007B"/> 2228 <path d="M9.96074 0.749995L5.59986e-07 1.7625e-07L6.12265 0.992726C6.97461 1.11598 7.83997 1.12405 8.69412 1.01655L9.96074 0.749995Z" transform="translate(21.9153 9.23755)" fill="#9E66BF"/> 2229 <path d="M5.72851 4.77127e-07L4.24838 1.0924L6.25666e-07 0.93807L5.72851 4.77127e-07Z" transform="translate(30.034 11.5306)" fill="#5C007B"/> 2230 <path d="M5.72822 3.13821e-07L7.43963e-07 0.937652L2.33105 0.867832C3.13395 0.843761 3.92694 0.685721 4.67563 0.400645L5.72822 3.13821e-07Z" transform="translate(30.0344 11.5309)" fill="#9E66BF"/> 2231 <path d="M8.9478 -3.00129e-07L6.57559 1.54731L1.37341e-07 0.937061L8.9478 -3.00129e-07Z" transform="translate(15.5197 12.623)" fill="#5C007B"/> 2232 <path d="M8.94729 2.20574e-07L-2.75745e-07 0.937652L4.9946 0.859262C6.1645 0.840862 7.32153 0.618926 8.41185 0.203788L8.94729 2.20574e-07Z" transform="translate(15.52 12.6226)" fill="#9E66BF"/> 2233 <path d="M8.94679 1.00043e-07L6.54058 1.31027L6.71446e-07 0.937062L8.94679 1.00043e-07Z" transform="translate(25.3356 15.179)" fill="#5C007B"/> 2234 <path d="M8.94729 2.10158e-07L6.06182e-07 0.937779L5.07856 0.858002C6.19296 0.840484 7.29513 0.629008 8.33382 0.233657L8.94729 2.10158e-07Z" transform="translate(25.3352 15.1785)" fill="#9E66BF"/> 2235 <path d="M10.0719 2.77042e-07L8.39474 2.68308L2.74683e-07 4.68228L10.0719 2.77042e-07Z" transform="translate(15.1758 17.9438)" fill="#5C007B"/> 2236 <path d="M-2.20955e-07 4.68208L10.0721 7.49835e-07L8.77679 1.00268C8.00905 1.59691 7.15116 2.07002 6.23404 2.405L-2.20955e-07 4.68208Z" transform="translate(15.1755 17.9439)" fill="#9E66BF"/> 2237 <path d="M3.12833e-07 5.56992L6.49958 2.78496L7.97771 -8.31125e-0
22377L3.12833e-07 5.56992Z" transform="translate(8.26013 16.811)" fill="#5C007B"/> 2238 <path d="M4.40547e-07 5.5692L7.9775 -7.76923e-07L7.95535 0.032642C7.13056 1.25348 6.01989 2.26398 4.71555 2.98007L4.40547e-07 5.5692Z" transform="translate(8.26025 16.8113)" fill="#9E66BF"/> 2239 <path d="M3.98735 2.30868e-07L3.73133 2.78597L9.15609e-08 7.34116L3.98735 2.30868e-07Z" transform="translate(7.21704 22.9347)" fill="#5C007B"/> 2240 <path d="M1.09038e-07 7.34091L3.98798 6.42466e-07C3.77138 1.2768 3.28179 2.49448 2.55113 3.57341L1.09038e-07 7.34091Z" transform="translate(7.21674 22.9351)" fill="#9E66BF"/> 2241 <path d="M1.29567 0.562707C1.29013 0.867066 0.995623 1.10891 0.637891 1.10261C0.280159 1.09656 -0.00545915 0.844633 7.80438e-05 0.540274C0.00561534 0.235789 0.300119 -0.00605963 0.657851 0.000115796C1.01558 0.00641721 1.30121 0.258222 1.29567 0.562707Z" transform="translate(42.6675 11.6351)" fill="white"/> 2242 <path fill-rule="evenodd" clip-rule="evenodd" d="M73.8306 24.4911C73.7528 24.7443 73.6263 24.9221 73.4523 25.022L73.402 25.0477C73.213 25.1269 73.0112 25.1155 72.7735 25.0557C72.0061 24.861 68.4478 24.4498 69.8711 20.1767L70.7151 17.6418L70.5237 17.1492L69.5985 14.8881L63.8032 1.04499C63.6759 0.757617 63.722 0.495948 63.8361 0.31771C63.9539 0.131887 64.1619 0.0379231 64.4558 0.0324454H67.7532C67.9791 0.0324454 68.1714 0.0952288 68.3187 0.212369C68.4665 0.32993 68.5747 0.509432 68.6663 0.730649L72.9204 10.9623L75.9719 0.759302C76.0372 0.514909 76.1529 0.329509 76.309 0.20647C76.4617 0.0859591 76.6569 0.0261244 76.885 0.0261244H80.4063C80.7051 0.0261244 80.9173 0.113347 81.0422 0.275995C81.167 0.444963 81.1837 0.689355 81.0913 1.00369L76.356 16.2833L74.5294 22.2119L73.8306 24.4911ZM59.9452 10.7368H63.5456C64.102 10.7368 64.4291 11.1013 64.2327 11.6647C63.2181 15.111 60.0106 17.4972 56.1809 17.4972C51.2059 17.4972 47.5077 13.686 47.5077 8.74841C47.5077 3.81084 51.2059 -2.44538e-07 56.1809 -2.44538e-07C60.0106 -2.44538e-07 63.2181 2.38578 64.2327 5.83213C64.4291 6.3955 64.102 6.7604 63.5456 6.7604H59.9452C59.5195 6.7604 59.2248 6.56151 58.963 6.19703C58.3741 5.36863 57.3595 4.90428 56.1809 4.90428C54.0538 4.90428 52.417 6.46207 52.417 8.74841C52.417 11.0352 54.0538 12.5925 56.1809 12.5925C57.3595 12.5925 58.3741 12.1286 58.963 11.3335C59.2248 10.9357 59.4866 10.7368 59.9452 10.7368ZM42.3134 0.895825V1.7592C42.7204 1.02855 43.6493 -0.00884887 46.0735 0.0244391C46.2492 0.0265459 46.3907 0.0943857 46.4947 0.203941C46.6475 0.364481 46.7207 0.581485 46.7207 0.862115V4.91229C46.7207 5.18702 46.6641 5.39307 46.5455 5.53043C46.4323 5.66738 46.2629 5.73648 46.0427 5.73648C45.5625 5.7192 45.1047 5.77061 44.6581 5.8907C44.2174 6.01037 43.8162 6.21684 43.4658 6.49705C43.1158 6.78315 42.8344 7.16744 42.6297 7.63558C42.422 8.11088 42.3167 8.68815 42.3134 9.37498L42.2905 13.6944C42.2663 18.2055 38.8686 17.5221 38.0754 17.4757C37.8049 17.4602 37.5947 17.4016 37.4482 17.2528C37.3013 17.1041 37.2277 16.8922 37.2277 16.6178V0.895825C37.2277 0.621515 37.3013 0.409568 37.4482 0.260826C37.5951 0.112084 37.8045 0.0379227 38.0754 0.0379227H41.4656C41.7365 0.0379227 41.9463 0.112084 42.0928 0.260826C42.2401 0.409568 42.3134 0.621094 42.3134 0.895825ZM27.6247 0.00800607C28.8212 0.0134838 29.9195 0.233437 30.9205 0.668708C31.9205 1.10356 32.7854 1.71454 33.5253 2.49659C34.259 3.28413 34.83 4.20313 35.2325 5.26034C35.6349 6.31754 35.8418 7.47377 35.8472 8.72902C35.8472 8.94392 35.8418 9.15292 35.8251 9.35138C35.8143 9.5549 35.7981 9.75336 35.7818 9.95141C35.7494 10.2156 35.6512 10.4082 35.4993 10.5295C35.3469 10.6509 35.1455 10.7111 34.9008 10.7111H24.0031C24.2096 11.3609 24.498 11.8893 24.8784 12.2967C25.2592 12.6987 25.7053 12.9907 26.2051 13.1778C26.7112 13.3649 27.2493 13.453 27.8208 13.453C28.2827 13.4475 28.7284 13.3759 29.1529 13.2275C29.5716 13.0788 29.9358 12.8803 30.235 12.6271C30.3927 12.4952 30.5505 12.3903 30.7028 12.3132C30.8605 12.2365 31.0399 12.1977 31.2463 12.1977L34.3789 12.1648C34.6781 12.1703 34.8954 12.2584 35.0261 12.429C35.1509 12.5997 35.1563 12.8201 35.0315 13.0897C34.602 14.0479 34.0306 14.8515 33.3185 15.4957C32.606 16.1455 31.7794 16.6296 30.8385 16.9604C29.8979 17.2849 28.8704 17.4505 27.7554 17.4505C26.3958 17.4446 25.1722 17.2191 24.0847 16.7784C22.9918 16.3381 22.0617 15.7271 21.2897 14.9341C20.5118 14.1469 19.9192 13.2216 19.5059 12.1703C19.0926 11.1131 18.8858 9.96784 18.8804 8.72902C18.8858 7.49021 19.0981 6.34493 19.5221 5.28815C19.9462 4.23642 20.5443 3.31152 21.3221 2.52398C22.0945 1.73139 23.0189 1.11999 24.0847 0.679664C25.1505 0.239336 26.3304 0.0134838 27.6247 0.00800607ZM4.73196 1.80808C5.39993 1.24134 6.14156 0.801018 6.92564 0.499319C7.74218 0.185823 8.60576 0.0223324 9.48098 0.0223324C11.6472 0.0223324 13.7651 1.00285 15.1851 2.58761C16.6031 4.17026 17.4804 6.35631 17.4804 8.76905C17.4804 11.1818 16.6031 13.3674 15.1851 14.9501C13.7651 16.5344 11.6472 17.5154 9.48098 17.5154C7.8945 17.5154 6.22979 17.0101 5.0699 15.8842L5.07322 21.2495C5.07614 25.7606 1.6514 25.0768 0.858162 25.0308C0.588478 25.0152 0.37
22427473 24.9558 0.230978 24.8075C0.0844829 24.6592 0.0108199 24.4464 0.0108199 24.1725L5.02144e-07 0.919421C5.02144e-07 0.639634 0.0753269 0.419259 0.2264 0.266725C0.377057 0.113769 0.593473 0.0375014 0.871065 0.0375014H3.84966C4.12725 0.0375014 4.34367 0.113769 4.49432 0.266725C4.6454 0.419259 4.71739 0.637527 4.72072 0.919421L4.73196 1.80808ZM13.1991 8.7227C13.1991 6.5948 11.5065 4.86973 9.41855 4.86973C7.33016 4.86973 5.63757 6.5948 5.63757 8.7227C5.63757 10.851 7.33016 12.5761 9.41855 12.5761C11.5065 12.5761 13.1991 10.851 13.1991 8.7227ZM25.292 5.05682C24.6773 5.48619 24.2424 6.1195 23.9869 6.94538H30.9746C30.8006 6.32302 30.5396 5.82202 30.1913 5.44784C29.8492 5.07873 29.4468 4.80905 28.9952 4.64388C28.5437 4.4787 28.0763 4.39611 27.5923 4.40159C26.6729 4.40707 25.9009 4.62197 25.292 5.05682Z" transform="translate(60.8499 8.8685)" fill="#5C007B"/> 2243 </svg> 2244 2245 </a> 2246 <a href="https://dnsimple.link/resolving-emberjs" title="Dnsimple" aria-label="Dnsimple" class="mr-2"> 2247 <?xml version="1.0" encoding="UTF-8"?> 2248 <svg class="footer-contributor-logo"width="460px" height="120px" viewBox="0 0 460 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 2249 <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch --> 2250 <title>blue</title> 2251 <desc>Created with Sketch.</desc> 2252 <g id="blue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 2253 <path d="M48.5310493,13 C46.3747323,13 44.2184154,13.1137371 42.1755889,13.5686854 L42.1755889,34.7237814 C39.2248394,33.5864106 35.8201285,33.0177253 31.2805139,33.0177253 C15.1648822,33.0177253 2,44.0502216 2,61.7932053 C2,79.9911374 14.0299786,90 31.7344754,90 C40.4732334,90 49.4389722,87.6115214 55,84.6543575 L55,13.5686854 C52.8436831,13.1137371 50.5738758,13 48.5310493,13 L48.5310493,13 Z M32.3807531,79.9855192 C22.665272,79.9855192 16,73.266446 16,62.4927596 C16,51.8349193 23.1171548,45 32.6066946,45 C36.4476987,45 39.9497908,45.4633844 43,47.4327679 L43,78.2478279 C39.6108787,79.5221349 36.1087866,80.1013653 32.3807531,79.9855192 L32.3807531,79.9855192 Z M95.8993289,33 C84.261745,33 74.7919463,37.5436105 70,41.5192698 L70,88.4320487 C72.1677852,88.8864097 74.3355705,89 76.3892617,89 C78.557047,89 80.8389262,88.8864097 82.8926174,88.4320487 L82.8926174,47.7667343 C85.4026846,46.2900609 89.852349,44.8133874 94.8724832,44.8133874 C103.201342,44.8133874 107.993289,48.5618661 107.993289,58.4442191 L107.993289,88.4320487 C110.275168,88.8864097 112.328859,89 114.496644,89 C116.550336,89 118.832215,88.8864097 121,88.4320487 L121,55.3772819 C121,42.9959432 113.355705,33 95.8993289,33 L95.8993289,33 Z M154.427861,90 C169.303483,90 178,83.2007952 178,71.9821074 C178,61.3300199 169.41791,57.3638171 157.631841,55.5506958 C148.363184,54.0775348 145.960199,52.3777336 145.960199,48.8648111 C145.960199,45.4652087 148.935323,43.3121272 155.800995,43.3121272 C162.323383,43.3121272 167.930348,45.2385686 171.706468,47.3916501 C174.338308,45.3518887 176.054726,42.1789264 176.626866,38.2127237 C173.079602,35.7196819 166.099502,33 156.258706,33 C142.527363,33 133.487562,39.7992048 133.487562,49.7713718 C133.487562,61.1033797 142.641791,64.6163022 152.253731,66.0894632 C161.9801,67.5626243 165.069652,69.6023857 165.069652,73.2286282 C165.069652,76.8548708 162.323383,79.6878728 154.656716,79.6878728 C146.074627,79.6878728 141.268657,76.7415507 137.950249,74.361829 C135.20398,76.0616302 133.029851,79.1212724 132,83.2007952 C135.089552,85.8071571 142.298507,90 154.427861,90 L154.427861,90 Z M195.616438,27 C200.157534,27 204,23.2222222 204,18.5 C204,13.7777778 200.157534,10 195.616438,10 C190.842466,10 187,13.7777778 187,18.5 C187,23.2222222 190.842466,27 195.616438,27 L195.616438,27 Z M195.557522,89 C197.743363,89 199.929204,88.8861284 202,88.4306418 L202,34.5693582 C199.929204,34.1138716 197.628319,34 195.557522,34 C193.371681,34 191.185841,34.1138716 189,34.5693582 L189,88.4306418 C191.185841,88.8861284 193.486726,89 195.557522,89 L195.557522,89 Z M279.136729,33 C271.758713,33 265.072386,35.8397566 260.576408,39.2474645 C256.541555,35.3853955 250.546917,33 242.707775,33 C231.294906,33 221.380697,37.7707911 217,41.5192698 L217,88.4320487 C219.190349,88.8864097 221.380697,89 223.455764,89 C225.646113,89 227.951743,88.8864097 230.02681,88.4320487 L230.02681,47.7667343 C232.908847,46.0628803 236.9437,44.8133874 241.209115,44.8133874 C250.085791,44.8133874 253.428954,50.3793103 253.428954,58.1034483 L253.428954,88.4320487 C255.619303,88.8864097 257.809651,89 260.115282,89 C262.190349,89 264.495979,88.8864097 266.571046,88.4320487 L266.571046,54.2413793
2253C266.571046,52.5375254 266.340483,50.8336714 265.994638,49.2434077 C268.646113,47.0851927 272.335121,44.8133874 277.63807,44.8133874 C286.514745,44.8133874 289.97319,50.3793103 289.97319,58.1034483 L289.97319,88.4320487 C292.048257,88.8864097 294.238606,89 296.544236,89 C298.619303,89 300.924933,88.8864097 303,88.4320487 L303,54.2413793 C303,42.5415822 294.930295,33 279.136729,33 L279.136729,33 Z M340.997854,33 C330.761803,33 322.23176,36.9807976 317,41.3028065 L317,109.431315 C319.274678,109.886263 321.321888,110 323.482833,110 C325.643777,110 327.804721,109.886263 329.851931,109.431315 L329.851931,88.5036928 C333.263948,89.6410635 336.903433,90.0960118 341.45279,90.0960118 C356.465665,90.0960118 370,79.5184638 370,61.3205318 C370,42.6676514 357.48927,33 340.997854,33 L340.997854,33 Z M338.619247,79 C334.439331,79 331.050209,78.3131313 328,76.8249158 L328,47.6329966 C331.276151,45.8013468 334.778243,45 338.506276,45 C348.334728,45 355,51.2962963 355,61.7138047 C355,72.4747475 348.334728,79 338.619247,79 L338.619247,79 Z M388,89 C390.333333,89 392.789474,88.8858859 395,88.4294294 L395,13.5705706 C392.666667,13.1141141 390.210526,13 387.877193,13 C385.54386,13 383.210526,13.1141141 381,13.5705706 L381,88.4294294 C383.45614,88.8858859 385.789474,89 388,89 L388,89 Z M458,57.2988048 C458,42.8784861 447.714286,33 433.2,33 C417.771429,33 406,45.0358566 406,61.7270916 C406,79.3266932 417.657143,90 433.885714,90 C444.742857,90 451.828571,86.0258964 456.4,82.3924303 C455.942857,79.0996016 453.657143,75.4661355 450.8,73.6494024 C447.257143,76.1474104 442.685714,79.2131474 434.8,79.2131474 C425.771429,79.2131474 420.285714,73.7629482 419.257143,64.9063745 L457.542857,64.9063745 C457.885714,61.9541833 458,60.1374502 458,57.2988048 L458,57.2988048 Z M419,57 C419.9163,49.5877193 424.84141,44 432.859031,44 C441.678414,44.1140351 445,50.6140351 445,57 L419,57 Z" id="dnsimple-copy" fill="#1A5EC6"></path> 2254 </g> 2255 </svg> 2256 </a> 2257 </div> 2258 </div> 2259</div> 2260</footer>
2260<script type="x/boundary" id="fastboot-body-end"></script>
2260 2261 2262
2262<script src="/assets/vendor-8cf0792cec47f39329abb5474045765b.js"></script>
vendor: 1 bytes, line 2262
2262
2263<script src="/assets/chunk.1422.bb57a581cf24f86ab606.js"></script>
vendor: 1 bytes, line 2263
2263
2264<script src="/assets/chunk.3524.1b09cb7d805ee15af53c.js"></script>
2264 2265
2265<script src="/assets/deprecation-app-7f7bfe36beba20c46e6758a433b445e7.js"></script>
2265 2266 2267 2268 </body> 2269</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.