[DOC model] convert api examples to native classes/Octane (#7292)

* [DOC model] convert api examples to native classes/Octane * [DOC model] change additional api examples * [Doc] convert remaining examples * fix linting error * review fixes * Update packages/model/addon/-private/has-many.js Co-authored-by: maxwondercorn <[email protected]> Co-authored-by: Scott Newcomer <[email protected]>
emberjs · Dec 10, 2020 · cafc3db · cafc3db
1 parent e75de9e
commit cafc3db
Show file tree

Hide file tree

Showing 8 changed files with 242 additions and 226 deletions.
diff --git a/packages/model/addon/-private/attr.js b/packages/model/addon/-private/attr.js
@@ -49,11 +49,11 @@ function hasValue(internalModel, key) {
   ```app/models/user.js
   import Model, { attr } from '@ember-data/model';
 
-  export default Model.extend({
-    username: attr('string'),
-    email: attr('string'),
-    verified: attr('boolean', { defaultValue: false })
-  });
+  export default class UserModel extends Model {
+    @attr('string') username;
+    @attr('string') email;
+    @attr('boolean', { defaultValue: false }) verified; 
+  }
   ```
 
   Default value can also be a function. This is useful it you want to return
@@ -62,15 +62,17 @@ function hasValue(internalModel, key) {
   ```app/models/user.js
   import Model, { attr } from '@ember-data/model';
 
-  export default Model.extend({
-    username: attr('string'),
-    email: attr('string'),
-    settings: attr({
+  export default class UserModel extends Model {
+    @attr('string') username;
+    @attr('string') email;
+
+    @attr({
       defaultValue() {
         return {};
       }
     })
-  });
+    settings;
+  }
   ```
 
   The `options` hash is passed as second argument to a transforms'
@@ -80,11 +82,12 @@ function hasValue(internalModel, key) {
   ```app/models/post.js
   import Model, { attr } from '@ember-data/model';
 
-  export default Model.extend({
-    text: attr('text', {
+  export default class PostModel extends Model {
+    @attr('text', {
       uppercase: true
     })
-  });
+    text;
+  }
   ```
 
   ```app/transforms/text.js

diff --git a/packages/model/addon/-private/belongs-to.js b/packages/model/addon/-private/belongs-to.js
@@ -30,17 +30,17 @@ import { computedMacroWithOptionalParams } from './util';
   ```app/models/user.js
   import Model, { belongsTo } from '@ember-data/model';
 
-  export default Model.extend({
-    profile: belongsTo('profile')
-  });
+  export default class UserModel extends Model {
+    @belongsTo('profile') profile;
+  }
   ```
 
   ```app/models/profile.js
   import Model, { belongsTo } from '@ember-data/model';
 
-  export default Model.extend({
-    user: belongsTo('user')
-  });
+  export default class ProfileModel extends Model {
+    @belongsTo('user') user;
+  }
   ```
 
   #### One-To-Many
@@ -50,17 +50,17 @@ import { computedMacroWithOptionalParams } from './util';
   ```app/models/post.js
   import Model, { hasMany } from '@ember-data/model';
 
-  export default Model.extend({
-    comments: hasMany('comment')
-  });
+  export default class PostModel extends Model {
+    @hasMany('comment') comments;
+  }
   ```
 
   ```app/models/comment.js
   import Model, { belongsTo } from '@ember-data/model';
 
-  export default Model.extend({
-    post: belongsTo('post')
-  });
+  export default class CommentModel extends Model {
+    @belongsTo('post') post;
+  }
   ```
 
   You can avoid passing a string as the first parameter. In that case Ember Data
@@ -69,9 +69,9 @@ import { computedMacroWithOptionalParams } from './util';
   ```app/models/comment.js
   import Model, { belongsTo } from '@ember-data/model';
 
-  export default Model.extend({
-    post: belongsTo()
-  });
+  export default class CommentModel extends Model {
+    @belongsTo post;
+  }
   ```
 
   will lookup for a Post type.
@@ -85,11 +85,12 @@ import { computedMacroWithOptionalParams } from './util';
   ```app/models/comment.js
   import Model, { belongsTo } from '@ember-data/model';
 
-  export default Model.extend({
-    post: belongsTo('post', {
+  export default class CommentModel extends Model {
+    @belongsTo('post', {
       async: false
     })
-  });
+    post;
+  }
   ```
 
   In contrast to async relationship, accessing a sync relationship

diff --git a/packages/model/addon/-private/errors.js b/packages/model/addon/-private/errors.js
@@ -22,10 +22,10 @@ import { DeprecatedEvented } from '@ember-data/store/-private';
   ```app/models/user.js
   import Model, { attr } from '@ember-data/model';
 
-  export default Model.extend({
-    username: attr('string'),
-    email: attr('string')
-  });
+  export default class UserModel extends Model {
+    @attr('string') username;
+    @attr('string') email;
+  }
   ```
   And you attempted to save a record that did not validate on the backend:
 
@@ -53,15 +53,15 @@ import { DeprecatedEvented } from '@ember-data/store/-private';
   - `attribute` The name of the property associated with this error message
 
   ```handlebars
-  <label>Username: {{input value=username}} </label>
-  {{#each model.errors.username as |error|}}
+  <label>Username: <Input @value={{@model.username}} /> </label>
+  {{#each @model.errors.username as |error|}}
     <div class="error">
       {{error.message}}
     </div>
   {{/each}}
 
-  <label>Email: {{input value=email}} </label>
-  {{#each model.errors.email as |error|}}
+  <label>Email: <Input @value={{@model.email}} /> </label>
+  {{#each @model.errors.email as |error|}}
     <div class="error">
       {{error.message}}
     </div>
@@ -72,7 +72,7 @@ import { DeprecatedEvented } from '@ember-data/store/-private';
   object to get an array of all the error strings.
 
   ```handlebars
-  {{#each model.errors.messages as |message|}}
+  {{#each @model.errors.messages as |message|}}
     <div class="error">
       {{message}}
     </div>
@@ -148,7 +148,7 @@ export default ArrayProxy.extend(DeprecatedEvented, {
     record. This is useful for displaying all errors to the user.
 
     ```handlebars
-    {{#each model.errors.messages as |message|}}
+    {{#each @model.errors.messages as |message|}}
       <div class="error">
         {{message}}
       </div>
@@ -435,19 +435,19 @@ export default ArrayProxy.extend(DeprecatedEvented, {
   /**
     Checks if there are error messages for the given attribute.
 
-    ```app/routes/user/edit.js
-    import Route from '@ember/routing/route';
+    ```app/controllers/user/edit.js
+    import Controller from '@ember/controller';
+    import { action } from '@ember/object';
 
-    export default Route.extend({
-      actions: {
-        save: function(user) {
-          if (user.get('errors').has('email')) {
-            return alert('Please update your email before attempting to save.');
-          }
-          user.save();
+    export default class UserEditController extends Controller {
+      @action
+      save(user) {
+        if (user.get('errors').has('email')) {
+          return alert('Please update your email before attempting to save.');
         }
+        user.save();
       }
-    });
+    }
     ```
 
     @method has

diff --git a/packages/model/addon/-private/has-many.js b/packages/model/addon/-private/has-many.js
@@ -26,18 +26,18 @@ import { computedMacroWithOptionalParams } from './util';
 
   ```app/models/post.js
   import Model, { hasMany } from '@ember-data/model';
-
-  export default Model.extend({
-    comments: hasMany('comment')
-  });
+  
+  export default class PostModel extends Model {
+    @hasMany('comment') comments; 
+  }
   ```
 
   ```app/models/comment.js
   import Model, { belongsTo } from '@ember-data/model';
-
-  export default Model.extend({
-    post: belongsTo('post')
-  });
+  
+  export default class CommentModel extends Model {
+    @belongsTo('post') post; 
+  }
   ```
 
   #### Many-To-Many
@@ -47,17 +47,17 @@ import { computedMacroWithOptionalParams } from './util';
   ```app/models/post.js
   import Model, { hasMany } from '@ember-data/model';
 
-  export default Model.extend({
-    tags: hasMany('tag')
-  });
+  export default class PostModel extends Model {
+    @hasMany('tag') tags;
+  }
   ```
 
   ```app/models/tag.js
   import Model, { hasMany } from '@ember-data/model';
 
-  export default Model.extend({
-    posts: hasMany('post')
-  });
+  export default class TagModel extends Model {
+    @hasMany('post') posts; 
+  }
   ```
 
   You can avoid passing a string as the first parameter. In that case Ember Data
@@ -66,9 +66,9 @@ import { computedMacroWithOptionalParams } from './util';
   ```app/models/post.js
   import Model, { hasMany } from '@ember-data/model';
 
-  export default Model.extend({
-    tags: hasMany()
-  });
+  export default class PostModel extends Model {
+    @hasMany tags;
+  }
   ```
 
   will lookup for a Tag type.
@@ -88,22 +88,24 @@ import { computedMacroWithOptionalParams } from './util';
   ```app/models/comment.js
   import Model, { belongsTo } from '@ember-data/model';
 
-  export default Model.extend({
-    onePost: belongsTo('post'),
-    twoPost: belongsTo('post'),
-    redPost: belongsTo('post'),
-    bluePost: belongsTo('post')
-  });
+  export default class CommentModel extends Model {
+    @belongsTo('post') onePost;
+    @belongsTo('post') twoPost
+    @belongsTo('post') redPost;
+    @belongsTo('post') bluePost;
+  }
   ```
 
   ```app/models/post.js
-  import Model, { hasMany } from '@ember-data/model';
+  import Model from '@ember-data/model';
+  import { hasMany } from '@ember-decorators/data';
 
-  export default Model.extend({
-    comments: hasMany('comment', {
+  export default class PostModel extends Model {
+    @hasMany('comment', {
       inverse: 'redPost'
     })
-  });
+    comments;
+  }
   ```
 
   You can also specify an inverse on a `belongsTo`, which works how
@@ -118,11 +120,12 @@ import { computedMacroWithOptionalParams } from './util';
   ```app/models/post.js
   import Model, { hasMany } from '@ember-data/model';
 
-  export default Model.extend({
-    comments: hasMany('comment', {
+  export default class PostModel extends Model {
+    @hasMany('comment', {
       async: false
     })
-  });
+    comments;
+  }
   ```
 
   In contrast to async relationship, accessing a sync relationship