数据绑定的部分设置是数据流动的方向。 NativeScript 数据绑定支持如下的数据传输：

  • 单向：这是默认设置，这使得当源属性改变时目标属性更新。然而，UI修改不会更新代码并且终止绑定链接。

  • 双向：该设置使得改变的反射在两个方向——从源到目标和从目标到源。当你要处理用户输入的时候，可以使用双向数据绑定。

通常，几乎每个UI控件都能绑定到一个数据对象（所有的 NativeScript 控件都是经由数据绑定创造的）。在你的代码与后面的要求匹配之后，你可以跳出盒子使用数据绑定。

  • 目标对象必须是 Bindable 类的继承者。所有的 NativeScript 控件已经从该类继承。
  • 对于双向数据绑定，目标属性应该是一个依赖属性。
  • 对于单向绑定，使用一个普通属性就足够了。
  • 数据对象要为其属性值里的每个变化声明一个 propertyChange 事件，来通知所有对变化有兴趣的监听。

下面的例子包含一个 ，TextField 和绑定UI控件的source属性。这样的目的是为了，当用户在 TextField 输入的时候，更新代码里的属性和 Label 的文本。

首先， source 对象创建时带有一个 textSource 属性。从 source 属性向 Label 传递变动的固定流向是必要的。因此，代码里的属性需要声明一个 propertyChange 事件来通知 Label 改变。要声明这个事件，使用了一个内置的类，它提供这个功能—— Observable 。

JS

var observableModule = require("data/observable");

var source = new observableModule.Observable();

source.textSource = "Text set via twoWay binding";

然后，创建目标对象以便绑定到 source 属性。在这里，它们是 一个 Label 和一个 TextField ，都是继承了 Bindable 类的（所有的UI控件都继承了该类）。

接着，目标对象绑定到 source 对象。 TextField 使用了一个双向绑定，所以用户输入能够改变代码里的属性。同时 Label 的绑定是单向的，用来只从代码向UI传递改变。

绑定lable的文本属性

//binding the TextField

var textFieldBindingOptions = {

targetProperty: "text",

twoWay: true

};

//binding the Label

var labelBindingOptions = {

sourceProperty: "textSource",

targetProperty: "text",

twoWay: false };

targetLabel.bind(labelBindingOptions, source);

在XML里绑定

要在XML里绑定，需要一个源对象，用同样的方式创建，像上面的例子那样（在代码里双向绑定）。然后在XML里描述这个绑定（使用一个小胡子语法）。在XML声明里，只设置属性名——目标：text，源: textSource 。有趣的是该绑定源不是显示地指定。关于这个主题更多的讨论会在 Binding source 文章里。

Binding to a property绑定到一个属性

设置源对象是数据绑定的一个重要部分。对于一个持续的数据流变动，目标属性需要发出一个 propertyChange 事件。 NativeScript 数据绑定可以和任何发出该事件的对象绑定。添加一个绑定源主要通过把它作为 bind(bindingOptions, source) 方法的第二个参数实现。当源被当作 Bindable 类的名为 bindingContext 的属性情况下，这个参数是可选和可以省略的。该属性特别之处在于它在整个视觉树是可继承的。这意味着一个UI控件可以使用它第一个父元素的 bindingContext ，该父元素显示地设置了 bindingContext。在 例子里， bindingContextcan 可以设置到一个 Page 或 StackLayout 实例并且 TextField 将继承它作为一个应有的源来绑定其 “text” 属性。

JS

page.bindingContext = source;

//or

stackLayout.bindingContext = source;

此处有个选项来绑定一个函数在特定事件上执行（像MVVM命令）。这个选项只能通过XML声明。要实现这个功能，源对象就需要有个事件处理器函数。

绑定函数到按钮点击事件

绑定到一个普通对象

通常的情况是提供一个普通元素（数字，日期，字符串）的列表（数组）到一个ListView 项目集合。上面的所有示例证明了如何绑定一个UI元素到 bindingContext 的属性。如果现在只有普通数据，这里就没有属性可以绑定，所以就要绑定到整个对象。这里 NativeScript 绑定的一个内容就出马了——对象或值绑定。要指向整个对象，即示例里的 Date() ，就要使用关键词 $value 。

XML

<Page>

<StackLayout>

<ListView items="{{ items }}" height="200">

<ListView.itemTemplate>

<Label text="{{ $value }}" />

</ListView.itemTemplate>

</ListView>

</StackLayout>

</Page>

JS

var appModule = require("application");

var list = [];

var i; for(i = 0; i < 5; i++) {

list.push(new Date());

}

source.set("items", list);

绑定到父绑定上