Skip to content

Commit

Permalink
Improve the Weather Report Recipe
Browse files Browse the repository at this point in the history 
- Rearrange one of the solution sections to avoid a console warning that would appear after the HTML was updated but not the JS
- For solutions that only have one step, consistently write them as a paragraph instead of a list
- Make the JS Bin tab names bold and match what JS Bin uses
- Other minor enhancements
  • Loading branch information
@chasenlehara
chasenlehara committed Jun 12, 2017
1 parent 9bc1585 commit 9643108
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 43 deletions.
25 changes: 19 additions & 6 deletions docs/can-guides/commitment/recipes/weather-report/weather-report-advanced.md
View file
Expand Up @@ -25,7 +25,6 @@ The following sections are broken down into:
- Things to know — Information about CanJS that is useful for solving the problem.
- Solution — The solution to the problem.


## Removing Imperative Code

### The problem
Expand Down Expand Up @@ -232,14 +231,14 @@ We want to define the behavior of `place` so that it becomes `null` when `locati

### The solution

Update the `JS` tab to:
Update the __JavaScript__ tab to:

- Mixin [can-define-stream-kefir] into the `WeatherViewModel`.
- Remove the setter side-effects from `location`
- Change `place` to derive its value from:
1. Remove the setter side-effects from `location`.
2. Change `place` to derive its value from:
- changes in `location` - `place` should be `null` if `location` changes.
- the `.places` value - `place` should be the one and only _place_ in `places` if there is only one _place_ in `places`.
- the set `.place` value.
3. Mix [can-define-stream-kefir] into the `WeatherViewModel`.

@sourceref ./advanced-1/js.js
@highlight 4,35-52,79,only
Expand Down Expand Up @@ -359,9 +358,13 @@ We will do this by:

### The solution

Update the __JavaScript__ tab:

@sourceref ./advanced-2/js.js
@highlight 3-21,24-40,only

Update the __HTML__ tab:

@sourceref ./advanced-2/html.html
@highlight 1-3,only

Expand Down Expand Up @@ -397,6 +400,8 @@ fetch("https://api.flickr.com/services/rest/?"+

### The solution

Update the __JavaScript__ tab:

@sourceref ./advanced-3/js.js
@highlight 41-60,108,only

Expand All @@ -413,9 +418,13 @@ Display the message while `geoLocation` and `geoLocationError` are undefined.

### The solution

Update the __JavaScript__ tab:

@sourceref ./4-enable-location.js
@highlight 61-63,only

Update the __HTML__ tab:

@sourceref ./4-enable-location.html
@highlight 6-10,only

Expand All @@ -428,13 +437,17 @@ Show the location entry `<div>` only when geo location has failed.

### What you need to know

Nothing, you've learned it all by this point. Apply what you know!
Nothing, you’ve learned it all by this point. Apply what you know!

### The solution

Update the __JavaScript__ tab:

@sourceref ./5-show-location.js
@highlight 64-66,only

Update the __HTML__ tab:

@sourceref ./5-show-location.html
@highlight 12,17,only

Expand Down
67 changes: 30 additions & 37 deletions docs/can-guides/commitment/recipes/weather-report/weather-report.md
View file
Expand Up @@ -17,11 +17,11 @@ To use the widget:
2. If the location name isn’t unique, __click__ on the intended location.
3. See the 10-day forecast for your selected city.

__Start this tutorial by cloning the following JSBin__:
__Start this tutorial by cloning the following JS Bin__:

<a class="jsbin-embed" href="https://jsbin.com/fudakiz/1/embed?html,output">JS Bin on jsbin.com</a>

This JSBin has initial prototype HTML and CSS which is useful for
This JS Bin has initial prototype HTML and CSS which is useful for
getting the application to look right.

The following sections are broken down into:
Expand All @@ -35,7 +35,7 @@ The following sections are broken down into:

### The problem

Get the basic setup for a CanJS app (in a JSBin) setup by:
Get the basic setup for a CanJS app (in a JS Bin) setup by:

1. Creating a template that outputs the pre-constructed HTML.
2. Defining a `WeatherViewModel` constructor function.
Expand Down Expand Up @@ -75,7 +75,7 @@ Get the basic setup for a CanJS app (in a JSBin) setup by:

### The solution

Update the `HTML` tab to wrap the template in a `script` tag:
Update the __HTML__ tab to wrap the template in a `script` tag:

```html
<script id="app-template" type="text/stache">
Expand Down Expand Up @@ -113,7 +113,7 @@ Update the `HTML` tab to wrap the template in a `script` tag:
```
@highlight 1,32,only

Update the `JS` tab to:
Update the __JavaScript__ tab to:

- Define a ViewModel.
- Create an instance of the ViewModel .
Expand Down Expand Up @@ -170,7 +170,22 @@ We want an `input` element to:

### The solution

Update the template in the `HTML` tab to:
Update the __JavaScript__ tab to define a `location` property as a string.

```js
var WeatherViewModel = can.DefineMap.extend({
location: "string"
});

var vm = new WeatherViewModel();

var template = can.stache.from("app-template");
var frag = template( vm );
document.body.appendChild(frag);
```
@highlight 2

Update the template in the __HTML__ tab to:

1. Update `location` on the ViewModel when the input changes.
2. Show value of the ViewModel’s `location` property.
Expand Down Expand Up @@ -211,24 +226,6 @@ Update the template in the `HTML` tab to:
```
@highlight 5,21,only


Update the `JS` tab to:

1. Define a `location` property as a string.

```js
var WeatherViewModel = can.DefineMap.extend({
location: "string"
});

var vm = new WeatherViewModel();

var template = can.stache.from("app-template");
var frag = template( vm );
document.body.appendChild(frag);
```
@highlight 2

## Get and display the places for the user’s location name

### The problem
Expand Down Expand Up @@ -297,7 +294,7 @@ on the page.
1. Show a “Loading places…” message while we wait on data.
2. Once the places are resolved, list each place’s name, state, country and type.

Update the template in the `HTML` tab to:
Update the template in the __HTML__ tab to:

```html
<script id="app-template" type="text/stache">
Expand Down Expand Up @@ -342,7 +339,7 @@ Update the template in the `HTML` tab to:
```
@highlight 8,12,14,18,19,20,21,22,25,only

Update the `JS` tab to:
Update the __JavaScript__ tab to:

1. Define a `placesPromise` property that will represent the loading places.
2. If the user has typed in at least two characters, we fetch the matching places.
Expand Down Expand Up @@ -441,7 +438,7 @@ When a user clicks on a place, we need to indicate their selection.

### The solution

Update the template in the `HTML` tab to:
Update the template in the __HTML__ tab to:

1. When a `<li>` is clicked on, call `pickPlace` with the corresponding `place`.
2. When a `place` has been set, write out the forecast header.
Expand Down Expand Up @@ -491,7 +488,7 @@ Update the template in the `HTML` tab to:
```
@highlight 19,27,29,39,only

Update the `JS` tab to:
Update the __JavaScript__ tab to:

1. Define a `place` property as taking any data type.
2. Define a `pickPlace` method that sets the place property.
Expand Down Expand Up @@ -564,7 +561,7 @@ selected place.

### The solution

Update the template in the `HTML` tab to:
Update the template in the __HTML__ tab to:

1. Display each forecast day’s details (date, text, high, and low).
2. Use the `toClassName` method to convert the forecast’s `text` into a `className` value that
Expand Down Expand Up @@ -617,7 +614,7 @@ Update the template in the `HTML` tab to:
```
@highlight 31,33,34,35,36,38,only

Update the `JS` tab to:
Update the __JavaScript__ tab to:

1. Define a `forecastPromise` property that gets a list of promises.
2. Define a `toClassName` method that lowercases and hyphenates any text passed in.
Expand Down Expand Up @@ -707,9 +704,7 @@ other city is still visible. Let’s hide it!

### The solution

Update the `JS` tab to:

1. Set the `place` property to null when the `location` changes.
Update the __JavaScript__ tab to set the `place` property to null when the `location` changes.

```js
var yqlURL = "//query.yahooapis.com/v1/public/yql?";
Expand Down Expand Up @@ -827,9 +822,7 @@ user to select their place; instead, we should show the forecast immediately.

### The solution

Update the template in the `HTML` tab to:

1. Use a `showPlacePicker` property to determine if we should show the `place` picker list.
Update the template in the __HTML__ tab to use a `showPlacePicker` property to determine if we should show the `place` picker list.

```html
<script id="app-template" type="text/stache">
Expand Down Expand Up @@ -880,7 +873,7 @@ Update the template in the `HTML` tab to:
```
@highlight 15,26,only

Update the `JS` tab to:
Update the __JavaScript__ tab to:

1. Define a `places` property that will have the places list returned by the `YQL` service.
2. Define a `showPlacePicker` property that is true if there’s more than one place in `places` and
Expand Down

0 comments on commit 9643108

Please sign in to comment.