Skip to content

Commit

Permalink
Fix some issues in the TodoMVC guide
Browse files Browse the repository at this point in the history
The biggest change in this commit is not using the generic API names in the descriptions that appear before the code changes.

Here’s an example of a sentence that appeared previously:

> Use `{{#each expression}}` to loop through every todo.

With this commit, the following is displayed:

> Use `{{#each todos}}` to loop through every todo.

The code still links to the API docs and it makes it easier for readers to connect the sample code with the description.

Related to #2867
  • Loading branch information
chasenlehara committed Dec 13, 2016
1 parent b96debf commit 7d53678
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 16 deletions.
28 changes: 14 additions & 14 deletions docs/can-guides/experiment/todomvc/todomvc.md
Original file line number Diff line number Diff line change
Expand Up @@ -92,10 +92,10 @@ Update the `JavaScript` tab to:

Update the `HTML` tab to:

- Use [can-stache.helpers.each] to loop through every todo.
- Use [can-stache.helpers.each `{{#each todos}}`] to loop through every todo.
- Add `completed` to the `<li>`’s `className` if the `<li>`’s todo is complete.
- Use [can-stache-bindings.twoWay] to two-way bind the checkbox’s `checked` property to its todo’s `complete` property.
- Use [can-stache.tags.escaped] to insert the value todo’s `name` as the content of the `<label>` and
- Use [can-stache-bindings.twoWay `{($checked)}`] to two-way bind the checkbox’s `checked` property to its todo’s `complete` property.
- Use [can-stache.tags.escaped `{{name}}`] to insert the value todo’s `name` as the content of the `<label>` and
`value` of the text `<input/>`.
- Insert the active and complete number of todos.

Expand Down Expand Up @@ -123,7 +123,7 @@ In this section, we will:

Update the `JavaScript` tab to:

- Define what the RESTful service layer’s parameters are with [can-set].
- Define what the RESTful service layer’s parameters are with [can-set.Algebra can-set.Algebra].
- Create a fake data store that is initialized with data for 3 todos with [can-fixture.store].
- Trap AJAX requests to `"/api/todos"` and provide responses with the data from the fake data store with [can-fixture].
- Connect the `Todo` and `Todo.List` types to the RESTful `"/api/todos"` endpoint using [can-connect/can/super-map/super-map]. This allows you to load, create, update, and destroy todos
Expand All @@ -138,7 +138,7 @@ on the server.

Update the `HTML` tab to:

- Use [can-stache.helpers.each] to loop through the promise’s resolved value, which
- Use [can-stache.helpers.each `{{#each todosPromise.value}}`] to loop through the promise’s resolved value, which
is the list of todos returned by the server.
- Read the active and completed number of todos from the promise’s resolved value.

Expand All @@ -165,7 +165,7 @@ In this section, we will:
Update the `HTML` tab to:

- Add `destroying` to the `<li>`’s `className` if the `<li>`’s todo is being destroyed using [can-connect/can/map/map.prototype.isDestroying].
- Call the `todo`’s [can-connect/can/map/map.prototype.destroy] method when the `<button>` is clicked using [can-stache-bindings.event].
- Call the `todo`’s [can-connect/can/map/map.prototype.destroy] method when the `<button>` is clicked using [can-stache-bindings.event `($click)`].

@sourceref ./4-destroy/html.html
@highlight 22-23,27,only
Expand All @@ -180,7 +180,7 @@ are created, updated or destroyed. If you’ve created the right [can-set.Algeb
shouldn’t have to manage lists yourself.

Finally, if you click “Run with JS” after deleting a todo, you’ll notice the page temporarily shows fewer items.
This is because the fall through cache’s data is shown before the response from fixtured data store
This is because the fall-through cache’s data is shown before the response from fixtured data store
is used.

<video controls>
Expand Down Expand Up @@ -210,8 +210,8 @@ Update the `JavaScript` tab to:
Update the `HTML` tab to:

- Create the `todo-create-template` that:
- Updates the `todo`’s `name` with the `<input>`’s `value` using [can-stache-bindings.twoWay].
- Calls `createTodo` when the `enter` key is pressed using [can-stache-bindings.event].
- Updates the `todo`’s `name` with the `<input>`’s `value` using [can-stache-bindings.twoWay `{($value)}`].
- Calls `createTodo` when the `enter` key is pressed using [can-stache-bindings.event `($enter)`].
- Use `<todo-create/>`

@sourceref ./5-create/html.html
Expand All @@ -228,8 +228,8 @@ lists that they belong within.

In this section, we will:

- Define a custom element that lists todos passed to it.
- Use that custom element.
- Define a custom element for showing a list of todos.
- Use that custom element by passing it the list of fetched todos.

Update the `JavaScript` tab to:

Expand All @@ -243,7 +243,7 @@ Update the `HTML` tab to:

- Create the `todo-list-template` that loops through a list of `todos` (instead of `todosPromise.value`).
- Create a `<todo-list>` element and set its `todos` property to the resolved value of `todosPromise`
using [can-stache-bindings.toChild].
using [can-stache-bindings.toChild `{todos}`].

@sourceref ./6-list/html.html
@highlight 18-32,43,only
Expand Down Expand Up @@ -277,8 +277,8 @@ Update the `HTML` tab to:
- When the checkbox changes, update the todo on the server with [can-connect/can/map/map.prototype.save],
- Call `edit` with the current context using [can-stache/keys/this].
- Set up the edit input to:
- Two-way bind its value to the current todo’s `name` using [can-stache-bindings.twoWay].
- Call `updateName` when the enter key is pressed using [can-stache-bindings.event].
- Two-way bind its value to the current todo’s `name` using [can-stache-bindings.twoWay `{($value)}`].
- Call `updateName` when the enter key is pressed using [can-stache-bindings.event `($enter)`].
- Focus the input when `isEditing` is true using the special [can-util/dom/attr/attr.special.focused] attribute.
- Call `cancelEdit` if the input element loses focus.

Expand Down
4 changes: 2 additions & 2 deletions docs/can-guides/introduction/comparison.md
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ Using **MobX** observables with **React** is fairly popular, though not as popul

### Data Fetching and Real-time Data

**[Can-Connect](../../can-connect.html)** allows for **CanJS** **observables** to be connected to a data source such as an RESTful API or a real-time data stream, with advanced features like fall through caching and batched minimal requests, so that your components can just request the data they need while can-connect figures out how to fetch that data in the most efficient way possible.
**[Can-Connect](../../can-connect.html)** allows for **CanJS** **observables** to be connected to a data source such as an RESTful API or a real-time data stream, with advanced features like fall-through caching and batched minimal requests, so that your components can just request the data they need while can-connect figures out how to fetch that data in the most efficient way possible.

**React**, being just a view layer, has no concept of this.

Expand Down Expand Up @@ -502,7 +502,7 @@ If your team needs to get started quickly, and hit the ground running, Angular 2

### Data Fetching and Real-time Data

**[Can-Connect](../../can-connect.html)** allows for **CanJS** **observables** to be connected to a data source such as an RESTful API or a real-time data stream, with advanced features like fall through caching and batched minimal requests, so that your components can just request the data they need while can-connect figures out how to fetch that data in the most efficient way possible.
**[Can-Connect](../../can-connect.html)** allows for **CanJS** **observables** to be connected to a data source such as an RESTful API or a real-time data stream, with advanced features like fall-through caching and batched minimal requests, so that your components can just request the data they need while can-connect figures out how to fetch that data in the most efficient way possible.

**Angular 2**’s HTTP Service doesn’t have the advanced features like minimal requests and fall-through caches, and any real-time data-source would require you to write a custom service.

Expand Down

0 comments on commit 7d53678

Please sign in to comment.