Skip to content
Permalink
Browse files

Fixing typos

  • Loading branch information...
shankarsridhar committed Jul 10, 2019
1 parent 2020362 commit 04a84d25e35556d00ca314490261f0e83886dce4
@@ -198,7 +198,7 @@ For now, paste the following HTML in [`app/templates/application.hbs`](../app/te
<!-- Channel Footer -->
<footer class="pb-6 px-4 flex-none channel-footer">
<form class="flex w-full rounded-lg border-2 border-grey overflow-hidden" aria-labeledby="message-label">
<form class="flex w-full rounded-lg border-2 border-grey overflow-hidden" aria-labelledby="message-label">
<h1 id="message-label" class="sr-only">
Message Input
</h1>
@@ -260,7 +260,7 @@ and the following in [`app/styles/app.css`](../app/styles/app.css)

</details>

If `ember serve` is runing, you should be able to visit `http://localhost:4200` and see something on the screen like this
If `ember serve` is running, you should be able to visit `http://localhost:4200` and see something on the screen like this

<p align='center'>

@@ -29,7 +29,7 @@ Our component is now parameterized, and ready to receive data!

### Syntax breakdown

- The `{{double-braces}}` indicate that the whatever is between them should be evaluted as a handlebars expression
- The `{{double-braces}}` indicate that the whatever is between them should be evaluated as a handlebars expression
- The `@` indicates that `title` and `description` are named args, passed into the component from the outside world

### Passing in data
@@ -242,14 +242,14 @@ import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
module('Integration | Helper | format-timestmp', function(hooks) {
module('Integration | Helper | format-timestamp', function(hooks) {
setupRenderingTest(hooks);
// Replace this with your real tests.
test('it renders', async function(assert) {
this.set('inputValue', '1234');
await render(hbs`{{format-timestmp inputValue}}`);
await render(hbs`{{format-timestamp inputValue}}`);
assert.equal(this.element.textContent.trim(), '1234');
});
@@ -263,7 +263,7 @@ You can view the current state of the tests by visiting <http://localhost:4200/t
+ test('01-01-2019', async function(assert) {
- this.set('inputValue', '1234');
-
- await render(hbs`{{format-timestmp inputValue}}`);
- await render(hbs`{{format-timestamp inputValue}}`);
+ await render(hbs`{{format-timestamp '01-01-2019'}}`);
- assert.equal(this.element.textContent.trim(), '1234');
@@ -20,7 +20,7 @@ The contents of our [app/templates/application.hbs](../app/templates/application

The `application` route (we have no corresponding file for this in our project) is the highest-level route, and children can be nested such that we URL-specific content to meet our app's needs

### An Example Routing Higherarchy
### An Example Routing Hierarchy

```yaml
application # application.hbs
@@ -138,7 +138,7 @@ You should now see...

## ⌨️ Task: Creating a basic link

In this task, we'll create our first link between routes. The default browser behavior when recieving a click on an `<a href="..."></a>` is to trigger a full page load, and this is not what we want.
In this task, we'll create our first link between routes. The default browser behavior when receiving a click on an `<a href="..."></a>` is to trigger a full page load, and this is not what we want.

Ember provides a tool for this called [`link-to`](https://api.emberjs.com/ember/release/classes/Ember.Templates.helpers/methods/link-to?anchor=link-to).

@@ -4,7 +4,7 @@ Ember Octane's `tracked` property system allows us to decorate our lowest-level

Let's use tracked properties to enhance our `<LoginForm />` component in the following ways:

- We should have a class field `userId` that's kept in sync with the `<select>`'s valuee
- We should have a class field `userId` that's kept in sync with the `<select>`'s value
- The example validation message should be replaced with `"Logging in with userId {{this.userId}}"`, and should only be displayed if/when a valid `userId` is present
- We should have an `isDisabled` field that indicates whether the form has an invalid `userId` or not
- The `input[type="submit"]` should be disabled whenever `isDisabled` is true
@@ -13,7 +13,7 @@ Let's use tracked properties to enhance our `<LoginForm />` component in the fol

Let's get started!

Opene up your component JS module [`app/components/login-form.js`](../app/components/login-form.js) and add the userId class field. For now, let's initialize it to `'1'`.
Open up your component JS module [`app/components/login-form.js`](../app/components/login-form.js) and add the userId class field. For now, let's initialize it to `'1'`.

```js
/**
@@ -22,7 +22,7 @@ Opene up your component JS module [`app/components/login-form.js`](../app/compon
userId = '1';
```

Also, let's add a very simple piece of derivied state for `isDisabled`. Its value should be true if `userId` is falsy.
Also, let's add a very simple piece of derived state for `isDisabled`. Its value should be true if `userId` is falsy.

```ts
get isDisabled() {
@@ -40,7 +40,7 @@ This is pretty ugly, and gets uglier as more of these cross-cutting areas are ad
<img src="https://github.com/mike-north.png" height=64 align="left" style="margin-right: 10px" />
</a>
<p>
Sharing state "horizontaly" across many different concerns in an app is not unique to Ember.js. <a href="https://reactjs.org/docs/context.html">React's Context API</a> and <a href="https://angular.io/guide/dependency-injection">Angular's Dependency Injection</a> system are designed to solve the same problem.
Sharing state "horizontally" across many different concerns in an app is not unique to Ember.js. <a href="https://reactjs.org/docs/context.html">React's Context API</a> and <a href="https://angular.io/guide/dependency-injection">Angular's Dependency Injection</a> system are designed to solve the same problem.
</p>
</blockquote>
</p>
@@ -20,7 +20,7 @@ The pattern of container and presentational components was made popular by [this

First, let's define two ideas that are central to this topic

- A _container component_ owns state and may have some state-manipulating actions, doesn't do much in terms of rendering somethign to the screen. The primary purpose of one of these components is to "do things"
- A _container component_ owns state and may have some state-manipulating actions, doesn't do much in terms of rendering something to the screen. The primary purpose of one of these components is to "do things"
- A _presentational component_ owns no state, and has no state-manipulating actions (although it may be passed these things as arguments). The primary purpose of one of these components is to "display things"

In our app, we're going to use a container component to load channel messages, and in future exercises, create and delete messages.
@@ -118,7 +118,7 @@ export default class ChannelContainerComponent extends Component {

One piece of code that's worth pointing out is that last line in our new action: `this.messages = messages;`. This looks a little strange, but sheds light on the fact that _updates to tracked properties are triggered on assignment_. You can think of this like a `this.set('messages', this.get('messages'));` in the classic ember world, or `this.setState({ messages: this.messages });` in the react world.

Messages should now load with the app, but they're visually idential regardless of the data passed to them. This is because we haven't parameterized them yet. In [`app/templates/components/chat-message.hbs`](../app/templates/components/chat-message.hbs) we can fix this by using the `@message` param that's now passed to this component
Messages should now load with the app, but they're visually identical regardless of the data passed to them. This is because we haven't parameterized them yet. In [`app/templates/components/chat-message.hbs`](../app/templates/components/chat-message.hbs) we can fix this by using the `@message` param that's now passed to this component

```diff
<!-- Message -->
@@ -58,7 +58,7 @@ Next, let's enhance our channel container by implementing a `createMessage` acti
}
```

In this component's template, let's create a new `acts` object that's yielded out, and pass our new action along as a property. Conusmers can then do something like `channel.acts.createMessate` to access this function. Make the following change to [`app/templates/components/channel-container.hbs`](../app/templates/components/channel-container.hbs)
In this component's template, let's create a new `acts` object that's yielded out, and pass our new action along as a property. Consumers can then do something like `channel.acts.createMessage` to access this function. Make the following change to [`app/templates/components/channel-container.hbs`](../app/templates/components/channel-container.hbs)

```diff
<main class="flex-1 flex flex-col bg-white overflow-hidden channel"
@@ -139,8 +139,8 @@ Now let's hook up that submit event. Make one more change to [`app/templates/com
```diff
<!-- Channel Footer -->
<footer class="pb-6 px-4 flex-none channel-footer">
- <form class="flex w-full rounded-lg border-2 border-grey overflow-hidden" aria-labeledby="message-label">
+ <form class="flex w-full rounded-lg border-2 border-grey overflow-hidden" aria-labeledby="message-label"
- <form class="flex w-full rounded-lg border-2 border-grey overflow-hidden" aria-labelledby="message-label">
+ <form class="flex w-full rounded-lg border-2 border-grey overflow-hidden" aria-labelledby="message-label"
+ {{on "submit" this.onSubmit}} >
<h1 id="message-label" class="sr-only">
Message Input
@@ -184,7 +184,7 @@ <h5 class="text-sm">

<!-- Channel Footer -->
<footer class="pb-6 px-4 flex-none channel-footer">
<form class="flex w-full rounded-lg border-2 border-grey overflow-hidden" aria-labeledby="message-label">
<form class="flex w-full rounded-lg border-2 border-grey overflow-hidden" aria-labelledby="message-label">
<h1 id="message-label" class="sr-only">
Message Input
</h1>

0 comments on commit 04a84d2

Please sign in to comment.
You can’t perform that action at this time.