Skip to content

Commit

Permalink
expected result of tns doctor, some edits in data binding article
Browse files Browse the repository at this point in the history
  • Loading branch information
tsonevn committed Jan 31, 2018
1 parent 83437bc commit 12c6ca6
Show file tree
Hide file tree
Showing 7 changed files with 27 additions and 6 deletions.
Binary file added .DS_Store
Binary file not shown.
22 changes: 16 additions & 6 deletions docs/core-concepts/data-binding.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,8 @@ environment: nativescript

#Data Binding

Data binding is the process of connecting application user interface (UI) to a data object (code). It enables changes propagation by reflecting UI modifications in the code and vise versa.
The perpose of this article is to explain what is Data Binding and how it is working in NativeScript. Also in the article could be found an samples, which demostrats different use cases of the data binding usage.

> In the following article, **source** is used as any object in the code and **target** as any UI control (like TextField).

* [Data flow direction](#data-flow-direction)
* [Basic binding concepts](#basic-binding-concepts)
Expand All @@ -27,6 +26,11 @@ Data binding is the process of connecting application user interface (UI) to a d
* [Using converters in bindings](#using-converters-in-bindings)
* [Stop binding](#stop-binding)


Data binding is the process of connecting application user interface (UI) to a data object (code). It enables changes propagation by reflecting UI modifications in the code and vise versa.

> In the following article, **source** is used as any object in the code and **target** as any UI control (like TextField).
##Data flow direction

Part of the data binding settings is the way data flows. NativeScript data binding supports the following data transmissions.
Expand All @@ -40,15 +44,15 @@ Part of the data binding settings is the way data flows. NativeScript data bindi
Generally, almost every UI control could be bound to a data object (all NativeScript controls are created with data binding in mind). After your code has met the following requirements, you can use data-binding out of the box.

* The target object has to be a successor of the **Bindable** class. All NativeScript UI controls already inherit from this class.
* For **two-way** data binding, the target property should be to a **dependency property**.
* For **two-way** data binding, the target property should be a **dependency property**.
* For **one-way** binding, using a plain property is sufficient.
* The data object should raise a **propertyChange** event for every change in the value of its property in order to notify all of the listeners interested in the change.

##How to create a binding

###Two-way binding in code

The example below consists of a `Label`, `TextField` and a source property to which the UI controls are bound. The purpose will be, when the user enters an input in the `TextField`, to update the property in the code and the `Label` text.
The example below consists of a `Label`, `TextField` and a source property to which the UI controls are bound. The purpose of the sample is to demostrate how the `Label`'s text will be changed, while editing the input of the `TextField`.

> You can find a runnable version of this example in NativeScript Playground for JavaScript [here](https://play.nativescript.org/?template=play-js&id=4zwcfW&v=2) and for TypeScript [here](https://play.nativescript.org/?template=play-tsc&id=8gVPMi&v=4).
Expand All @@ -67,7 +71,7 @@ const source = fromObject({
});
```
Next, **target** objects are created to bind to the source property. In this case, these will be a `Label` and a `TextField`, which inherit from the `Bindable` class (as all of the UI controls do).
Next, **target** objects are created to bind to the source property. In this case, these will be a `Label` and a `TextField`, which inherit the `Bindable` class (as all of the UI controls do).
``` JavaScript
// create the TextField
Expand Down Expand Up @@ -608,4 +612,10 @@ targetTextField.unbind("text");
targetTextField.unbind("text");
```

You can find more information about binding in [API-Ref](http://docs.nativescript.org/api-reference/classes/_ui_core_bindable_.bindable.html).
**API Reference for** [Binding](http://docs.nativescript.org/api-reference/classes/_ui_core_bindable_.bindable.html).


### See also

* [Architecture and Navigation](https://docs.nativescript.org/core-concepts/navigation)
* [Page Module](https://docs.nativescript.org/cookbook/ui/page)
Binary file added docs/img/start/maxos-tns-doctor.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/img/start/window-tns-doctor.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions docs/start/ns-setup-linux.md
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,9 @@ Complete the following steps to set up NativeScript on your Linux development ma
<pre class="add-copy-button"><code class="language-terminal">tns doctor
</code></pre>

If you see "No issues were detected" you are good to go!


## What’s Next

* [Return to the JavaScript tutorial](http://docs.nativescript.org/tutorial/chapter-1#11-install-nativescript-and-configure-your-environment)
Expand Down
4 changes: 4 additions & 0 deletions docs/start/ns-setup-os-x.md
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,10 @@ Complete the following steps to setup NativeScript on your macOS development mac
<pre class="add-copy-button"><code class="language-terminal">tns doctor
</code></pre>

If you see "No issues were detected" you are good to go!

![NativeScript tns doctor result](../img/start/maxos-tns-doctor.png)

## What’s Next

* [Return to the JavaScript tutorial](http://docs.nativescript.org/tutorial/chapter-1#11-install-nativescript-and-configure-your-environment)
Expand Down
4 changes: 4 additions & 0 deletions docs/start/ns-setup-win.md
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,10 @@ Complete the following steps to set up NativeScript on your Windows development
<pre class="add-copy-button"><code class="language-terminal">tns doctor
</code></pre>

If you see "No issues were detected" you are good to go!

![NativeScript tns doctor result](../img/start/windows-tns-doctor.png)

## What’s Next

* [Return to the JavaScript tutorial](http://docs.nativescript.org/tutorial/chapter-1#11-install-nativescript-and-configure-your-environment)
Expand Down

0 comments on commit 12c6ca6

Please sign in to comment.