PageSourceSearch

https://ember-deprecations.netlify.app/v1.x/

html ember-deprecations.netlify.app collected 2026-10-03 10:41:40 UTC 287,895 bytes, 2,269 lines download raw bytes

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>&lt;div id="foo"&gt;</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">  &#x3C;</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">&#x3C;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">></span></span>
482<span class="line"><span style="color:#E1E4E8">  &#x3C;</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">&#x3C;/</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">  &#x3C;</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">&#x3C;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">></span></span>
487<span class="line"><span style="color:#E1E4E8">  &#x3C;</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">&#x3C;/</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">&#x3C;</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">    &#x3C;</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">&#x3C;/</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">&#x3C;/</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">&#x3C;</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">    &#x3C;</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">&#x3C;/</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">&#x3C;/</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">&#x3C;</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">    &#x3C;</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">&#x3C;/</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">&#x3C;/</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">&#x3C;</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">    &#x3C;</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">&#x3C;/</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">&#x3C;/</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">&#x3C;</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">>&#x3C;/</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">&#x3C;</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">>&#x3C;/</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">&#x3C;</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">>&#x3C;/</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">&#x3C;</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">&#x3C;/</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">&#x3C;</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">&#x3C;/</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">&#x3C;</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">  &#x3C;</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">  &#x3C;/</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">&#x3C;/</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 &lt;select&gt; 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">&#x3C;</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">    &#x3C;</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">    &#x3C;/</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">&#x3C;/</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">&#x3C;</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">  &#x3C;!-- something something --></span></span>
1601<span class="line"><span style="color:#E1E4E8">&#x3C;/</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">  &#x3C;!-- 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">&#x3C;</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">&#x3C;/</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>&lt;ul&gt;</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.