Use this. prefix for properties on related JS class

.template-lintrc.js

@@ -9,6 +9,5 @@ module.exports = {
     'require-valid-alt-text': false,
     'no-action': false,
     'no-curly-component-invocation': false,
-    'no-implicit-this': false,
   },
 };

app/templates/application.hbs

@@ -16,16 +16,21 @@
   </LinkTo>
 
   <form class='search' action='/search' {{ action "search" on="submit" }} data-test-search-form>
-    <input type="text" class="search" name="q" id="cargo-desktop-search"
-            placeholder="Click or press 'S' to search..."
-            value={{searchQuery}}
-            oninput={{action (mut searchQuery) value="target.value"}}
-            autocorrect="off"
-            autocapitalize="off"
-            autofocus="autofocus"
-            spellcheck="false"
-            required
-            data-test-search-input>
+    <input
+      type="text"
+      class="search"
+      name="q"
+      id="cargo-desktop-search"
+      placeholder="Click or press 'S' to search..."
+      value={{this.searchQuery}}
+      oninput={{action (mut this.searchQuery) value="target.value"}}
+      autocorrect="off"
+      autocapitalize="off"
+      autofocus="autofocus"
+      spellcheck="false"
+      required
+      data-test-search-input
+    >
     <label for="cargo-desktop-search">Search</label>
   </form>
 
@@ -58,11 +63,11 @@
       </RlDropdown>
     </RlDropdownContainer>
     <span class="sep">|</span>
-    {{#if session.currentUser}}
+    {{#if this.session.currentUser}}
       <RlDropdownContainer class="dropdown-container">
         <RlDropdownToggle class="dropdown">
-          <UserAvatar @user={{session.currentUser}} @size="small" />
-          {{ session.currentUser.name }}
+          <UserAvatar @user={{this.session.currentUser}} @size="small" />
+          {{ this.session.currentUser.name }}
           <span class='arrow'></span>
         </RlDropdownToggle>
 
@@ -89,7 +94,7 @@
       </RlDropdownToggle>
       <RlDropdown @tagName="ul" class="dropdown current-user-links">
         <li><LinkTo @route="crates">Browse All Crates</LinkTo></li>
-        {{#if session.currentUser}}
+        {{#if this.session.currentUser}}
           <li><LinkTo @route="dashboard">Dashboard</LinkTo></li>
           <li><LinkTo @route="me">Account Settings</LinkTo></li>
           <li><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></li>
@@ -106,12 +111,17 @@
 </nav>
 
 <form id='mobile-search' class='search' action='/search' {{ action "search" on="submit" }} >
-  <input type="text" class="search" name="q" id="cargo-mobile-search"
-          placeholder="Search"
-          value={{searchQuery}}
-          oninput={{action (mut searchQuery) value="target.value"}}
-          autocorrect="off"
-          required>
+  <input
+    type="text"
+    class="search"
+    name="q"
+    id="cargo-mobile-search"
+    placeholder="Search"
+    value={{this.searchQuery}}
+    oninput={{action (mut this.searchQuery) value="target.value"}}
+    autocorrect="off"
+    required
+  >
   <label for="cargo-mobile-search">Search</label>
 </form>
 

app/templates/catch-all.hbs

@@ -7,7 +7,7 @@
     @type="text"
     class="search"
     placeholder="Search"
-    @value={{search}}
+    @value={{this.search}}
     @enter={{action "search"}}
     required={{true}}
   />

app/templates/categories.hbs

@@ -9,8 +9,8 @@
   <div class='nav' data-test-categories-nav>
     <span class='amt small'>
       Displaying
-      <span class='cur'>{{ currentPageStart }}-{{ currentPageEnd }}</span>
-      of <span class='total'>{{ totalItems }}</span> total results
+      <span class='cur'>{{ this.currentPageStart }}-{{ this.currentPageEnd }}</span>
+      of <span class='total'>{{ this.totalItems }}</span> total results
     </span>
   </div>
 
@@ -19,7 +19,7 @@
     <RlDropdownContainer class="dropdown-container">
       <RlDropdownToggle @tagName="a" class="dropdown" data-test-current-order>
         {{svg-jar "sort"}}
-        {{ currentSortBy }}
+        {{ this.currentSortBy }}
         <span class='arrow'></span>
       </RlDropdownToggle>
 
@@ -40,7 +40,7 @@
 </div>
 
 <div class='white-rows'>
-  {{#each model as |category|}}
+  {{#each this.model as |category|}}
     <div class='row' data-test-category={{category.slug}}>
       <div class='desc'>
         <div class='info'>
@@ -60,13 +60,13 @@
 </div>
 
 <div class='pagination'>
-  <LinkTo @query={{hash page=prevPage}} class="prev" @rel="prev" @title="previous page">
+  <LinkTo @query={{hash page=this.prevPage}} class="prev" @rel="prev" @title="previous page">
     {{svg-jar "left-pag"}}
   </LinkTo>
-  {{#each pages as |page|}}
+  {{#each this.pages as |page|}}
     <LinkTo @query={{hash page=page}}>{{ page }}</LinkTo>
   {{/each}}
-  <LinkTo @query={{hash page=nextPage}} class="next" @rel="next" @title="next page">
+  <LinkTo @query={{hash page=this.nextPage}} class="next" @rel="next" @title="next page">
     {{svg-jar "right-pag"}}
   </LinkTo>
 </div>

app/templates/category-slugs.hbs

@@ -8,7 +8,7 @@
 
   <div class='white-rows'>
     <dl>
-      {{#each model as |category|}}
+      {{#each this.model as |category|}}
         <dt data-test-category-slug={{category.slug}}>{{category.slug}}</dt>
         <dd data-test-category-description={{category.slug}}>{{category.description}}</dd>
       {{/each}}

app/templates/category/index.hbs

@@ -1,22 +1,22 @@
-{{ title category.category ' - Categories' }}
+{{ title this.category.category ' - Categories' }}
 
 <div id='crates-heading'>
   <LinkTo @route="categories" aria-label="Categories">{{svg-jar "crate"}}</LinkTo>
   <h1>
-    {{#each category.parent_categories as |parent|}}<LinkTo @route="category" @model={{parent.slug}}>{{parent.category}}</LinkTo>::{{/each}}
-    {{~ category.category }}
+    {{#each this.category.parent_categories as |parent|}}<LinkTo @route="category" @model={{parent.slug}}>{{parent.category}}</LinkTo>::{{/each}}
+    {{~ this.category.category }}
   </h1>
 </div>
 
 <div>
-  <p>{{ category.description }}</p>
+  <p>{{ this.category.description }}</p>
 </div>
 
-{{#if category.subcategories }}
+{{#if this.category.subcategories }}
   <div id='subcategories'>
     <h2>Subcategories</h2>
     <div class='white-rows'>
-      {{#each category.subcategories as |subcategory| }}
+      {{#each this.category.subcategories as |subcategory| }}
         <div class='row'>
           <div class='desc'>
             <div class='info'>
@@ -42,8 +42,8 @@
   <div class='nav' data-test-category-nav>
     <span class='amt small'>
       Displaying
-      <span class='cur'>{{ currentPageStart }}-{{ currentPageEnd }}</span>
-      of <span class='total'>{{ totalItems }}</span> total results
+      <span class='cur'>{{ this.currentPageStart }}-{{ this.currentPageEnd }}</span>
+      of <span class='total'>{{ this.totalItems }}</span> total results
     </span>
   </div>
 
@@ -52,7 +52,7 @@
     <RlDropdownContainer class="dropdown-container">
       <RlDropdownToggle @tagName="a" class="dropdown" data-test-current-order>
         {{svg-jar "sort"}}
-        {{ currentSortBy }}
+        {{ this.currentSortBy }}
         <span class='arrow'></span>
       </RlDropdownToggle>
 
@@ -83,19 +83,19 @@
 </div>
 
 <div id='crates' class='white-rows'>
-  {{#each model as |crate|}}
+  {{#each this.model as |crate|}}
     <CrateRow @crate={{crate}} />
   {{/each}}
 </div>
 
 <div class='pagination'>
-  <LinkTo @query={{hash page=prevPage}} class="prev" @rel="prev" @title="previous page">
+  <LinkTo @query={{hash page=this.prevPage}} class="prev" @rel="prev" @title="previous page">
     {{svg-jar "left-pag"}}
   </LinkTo>
-  {{#each pages as |page|}}
+  {{#each this.pages as |page|}}
     <LinkTo @query={{hash page=page}}>{{ page }}</LinkTo>
   {{/each}}
-  <LinkTo @query={{hash page=nextPage}} class="next" @rel="next" @title="next page">
+  <LinkTo @query={{hash page=this.nextPage}} class="next" @rel="next" @title="next page">
     {{svg-jar "right-pag"}}
   </LinkTo>
 </div>

app/templates/components/api-token-row.hbs

@@ -1,32 +1,33 @@
-<div class={{if api_token.isNew "row create-token" "row"}}>
+<div class={{if this.api_token.isNew "row create-token" "row"}}>
   <div class='name'>
-    {{#if api_token.isNew}}
+    {{#if this.api_token.isNew}}
       <Input
-        @type="text" placeholder="New token name"
-        @disabled={{api_token.isSaving}}
-        @value={{api_token.name}}
+        @type="text"
+        placeholder="New token name"
+        @disabled={{this.api_token.isSaving}}
+        @value={{this.api_token.name}}
         @autofocus="autofocus"
         @enter="saveToken"
         data-test-focused-input
       />
     {{else}}
-      {{ api_token.name }}
+      {{ this.api_token.name }}
     {{/if}}
   </div>
 
   <div class='spacer'></div>
 
-  {{#unless api_token.isNew}}
+  {{#unless this.api_token.isNew}}
     <div class='dates'>
       <div class='created-at'>
-        <span class='small' title={{api_token.created_at}}>
-          Created {{moment-from-now api_token.created_at}}
+        <span class='small' title={{this.api_token.created_at}}>
+          Created {{moment-from-now this.api_token.created_at}}
         </span>
       </div>
-      {{#if api_token.last_used_at}}
+      {{#if this.api_token.last_used_at}}
         <div class='last_used_at'>
-          <span class='small' title={{api_token.last_used_at}}>
-            Last used {{moment-from-now api_token.last_used_at}}
+          <span class='small' title={{this.api_token.last_used_at}}>
+            Last used {{moment-from-now this.api_token.last_used_at}}
           </span>
         </div>
       {{else}}
@@ -38,12 +39,12 @@
   {{/unless}}
 
   <div class='actions'>
-    {{#if api_token.isNew}}
+    {{#if this.api_token.isNew}}
       <button
         type="button"
         class='small yellow-button'
-        disabled={{disableCreate}}
-        title={{if emptyName "You must specify a name" ""}}
+        disabled={{this.disableCreate}}
+        title={{if this.emptyName "You must specify a name" ""}}
         {{action "saveToken"}}
       >
         Create
@@ -52,34 +53,34 @@
       <button
         type="button"
         class='small tan-button'
-        disabled={{api_token.isSaving}}
+        disabled={{this.api_token.isSaving}}
         {{action "revokeToken"}}
       >
         Revoke
       </button>
     {{/if}}
-    {{#if api_token.isSaving}}
+    {{#if this.api_token.isSaving}}
       <img class='overlay' src="/assets/ajax-loader.gif">
     {{/if}}
   </div>
 </div>
 
-{{#if serverError}}
+{{#if this.serverError}}
   <div class='row error'>
     <div>
-      {{ serverError }}
+      {{ this.serverError }}
     </div>
   </div>
 {{/if}}
 
-{{#if api_token.token}}
+{{#if this.api_token.token}}
   <div class='row new-token'>
     <div>
       Please record this token somewhere, you cannot retrieve
       its value again. For use on the command line you can save it to <code>~/.cargo/credentials</code>
       with:
 
-      <pre>cargo login {{ api_token.token }}</pre>
+      <pre>cargo login {{ this.api_token.token }}</pre>
     </div>
   </div>
 {{/if}}

app/templates/components/badge-appveyor.hbs

@@ -1,8 +1,8 @@
-<a href="https://ci.appveyor.com/project/{{ projectName }}">
+<a href="https://ci.appveyor.com/project/{{ this.projectName }}">
   <img
-      src="{{ imageUrl }}"
-      alt="{{ text }}"
+      src="{{ this.imageUrl }}"
+      alt="{{ this.text }}"
       width="106"
       height="20"
-      title="{{ text }}">
+      title="{{ this.text }}">
 </a>

app/templates/components/badge-azure-devops.hbs

@@ -1,3 +1,3 @@
-<a href="https://dev.azure.com/{{ project }}/_build/latest?definitionId={{ build }}">
-  <img src="https://dev.azure.com/{{ project }}/_apis/build/status/{{ pipeline }}" alt="{{ text }}" title="{{ text }}">
+<a href="https://dev.azure.com/{{ this.project }}/_build/latest?definitionId={{ this.build }}">
+  <img src="https://dev.azure.com/{{ this.project }}/_apis/build/status/{{ this.pipeline }}" alt="{{ this.text }}" title="{{ this.text }}">
 </a>

app/templates/components/badge-bitbucket-pipelines.hbs

@@ -1,6 +1,6 @@
-<a href="https://bitbucket.org/{{ repository }}/addon/pipelines/home#!/results/branch/{{ branch }}/page/1">
+<a href="https://bitbucket.org/{{ this.repository }}/addon/pipelines/home#!/results/branch/{{ this.branch }}/page/1">
   <img
-      src="https://img.shields.io/bitbucket/pipelines/{{ repository }}/{{ branch }}"
-      alt="{{ text }}"
-      title="{{ text }}">
+      src="https://img.shields.io/bitbucket/pipelines/{{ this.repository }}/{{ this.branch }}"
+      alt="{{ this.text }}"
+      title="{{ this.text }}">
 </a>

app/templates/components/badge-circle-ci.hbs

@@ -1,6 +1,6 @@
-<a href="https://circleci.com/gh/{{ repository }}">
+<a href="https://circleci.com/gh/{{ this.repository }}">
   <img
-      src="https://circleci.com/gh/{{ repository }}/tree/{{ branch }}.svg?style=shield"
-      alt="{{ text }}"
-      title="{{ text }}">
+      src="https://circleci.com/gh/{{ this.repository }}/tree/{{ this.branch }}.svg?style=shield"
+      alt="{{ this.text }}"
+      title="{{ this.text }}">
 </a>

app/templates/components/badge-cirrus-ci.hbs

@@ -1,6 +1,6 @@
-<a href="https://cirrus-ci.com/github/{{ repository }}">
+<a href="https://cirrus-ci.com/github/{{ this.repository }}">
   <img
-      src="https://api.cirrus-ci.com/github/{{ repository }}.svg?branch={{ branch }}"
-      alt="{{ text }}"
-      title="{{ text }}">
+      src="https://api.cirrus-ci.com/github/{{ this.repository }}.svg?branch={{ this.branch }}"
+      alt="{{ this.text }}"
+      title="{{ this.text }}">
 </a>

app/templates/components/badge-codecov.hbs

@@ -1,6 +1,6 @@
-<a href="https://codecov.io/{{ service }}/{{ repository }}?branch={{ branch }}">
+<a href="https://codecov.io/{{ this.service }}/{{ this.repository }}?branch={{ this.branch }}">
   <img
-      src="https://codecov.io/{{ service }}/{{ repository }}/coverage.svg?branch={{ branch }}"
-      alt="{{ text }}"
-      title="{{ text }}">
+      src="https://codecov.io/{{ this.service }}/{{ this.repository }}/coverage.svg?branch={{ this.branch }}"
+      alt="{{ this.text }}"
+      title="{{ this.text }}">
 </a>