archive-gh-me/yew
1
0
Fork 0
mirror of https://github.com/yewstack/yew.git synced 2025-12-08 21:26:25 +00:00
Code Issues Projects Releases Wiki Activity

Update getting started example to 0.14.3 (#58)

Browse Source 
The example in the getting started section was for an older version of yew, and didn't work with the latest version anymore.
This commit copies the example from [yew's docs](https://docs.rs/yew/0.14.3/yew/#example) and includes minor adaptations to the text to match the code.
This commit is contained in:
João Paiva 2020-04-20 12:10:27 +01:00 committed by Justin Starry
parent 293b768902
commit ec5ef0ebe2
1 changed files with 19 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
website/translated_docs/zh-TW/src/getting-started/build-a-sample-app.md
View File

@ -17,7 +17,7 @@ authors = ["Yew App Developer <name@example.com>"]
edition = "2018" edition = "2018"
[dependencies] [dependencies]
yew = { version = "0.13.0", features = ["std_web"] } yew = { version = "0.14.3", features = ["std_web"] }
``` ```
{% endcode %} {% endcode %}
@ -25,53 +25,52 @@ Copy the following template into your `src/main.rs` file:
{% code title="src/main.rs" %} {% code title="src/main.rs" %}
```rust ```rust
use yew::{html, Callback, ClickEvent, Component, ComponentLink, Html, ShouldRender}; use yew::prelude::*;
struct App { struct Model {
clicked: bool, link: ComponentLink<Self>,
onclick: Callback<ClickEvent>, value: i64,
} }
enum Msg { enum Msg {
Click, AddOne,
} }
impl Component for App { impl Component for Model {
type Message = Msg; type Message = Msg;
type Properties = (); type Properties = ();
fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self { fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
App { Self {
clicked: false, link,
onclick: link.callback(|_| Msg::Click), value: 0,
} }
} }
fn update(&mut self, msg: Self::Message) -> ShouldRender { fn update(&mut self, msg: Self::Message) -> ShouldRender {
match msg { match msg {
Msg::Click => { Msg::AddOne => self.value += 1
self.clicked = true;
true // Indicate that the Component should re-render
}
} }
true
} }
fn view(&self) -> Html { fn view(&self) -> Html {
let button_text = if self.clicked { "Clicked!" } else { "Click me!" };
html! { html! {
<button onclick=&self.onclick>{ button_text }</button> <div>
<button onclick=self.link.callback(|_| Msg::AddOne)>{ "+1" }</button>
<p>{ self.value }</p>
</div>
} }
} }
} }
fn main() { fn main() {
yew::start_app::<App>(); yew::initialize();
App::<Model>::new().mount_to_body();
} }
``` ```
{% endcode %} {% endcode %}
This template sets up your root `Component`, called `App` which shows a button that updates itself when you click it. Take special note of `yew::start_app::<App>()` inside `main()` which starts your app and mounts it to the page's `<body>` tag. If you would like to start your application with any dynamic properties, you can instead use `yew::start_app_with_props(..)`. This template sets up your root `Component`, called `Model` which shows a button that updates itself when you click it. Take special note of `App::<Model>::new().mount_to_body()` inside `main()` which starts your app and mounts it to the page's `<body>` tag. If you would like to start your application with any dynamic properties, you can instead use `App::<Model>::new().mount_to_body_with_props(..)`.
## Run your App! ## Run your App!