1.3.4 属性

本文包括：

• 概览

• 依赖属性

  • Introduction
  • Declaring a dependency property
  • Adding a changed callback
  • Adding a validation callback
  • Creating an inheritable dependency property

• 样式属性

  • Introduction
  • Setting a style property

概览

作为一个 TypeScript 框架， NativeScript 使用 TypeScript 属性。转译之后，这些ES5格式的结果兼容JavaScript的setter和getter方法支持类成员的工作，从而保证可读和可管理的代码。示例1中的代码演示了如何 TypeScript 转换为JavaScript。

示例 1: TypeScript 如何转换成JavaScript.

TS

---

export class MyClass {

private _myProperty: number;

public get myProperty(): number { return this._myProperty; }

public set myProperty(value: number) { this._myProperty = value; }

}

JS

---

var MyClass = (function () {

function MyClass() { }

Object.defineProperty(MyClass.prototype, "myProperty", {

get: function () { return this._myProperty; },

set: function (value) { this._myProperty = value; },

enumerable: true,

configurable: true

});

return MyClass;

})();

exports.MyClass = MyClass;

TypeScript 转译器由一个grunt 脚本支持运行。

NativeScript有两种类型的属性： dependency properties依赖属性 和 style properties样式属性.。每种类型都会在后面部分介绍。

依赖属性

说明

依赖属性提供了有价值的功能，简化了创建一个丰富的UI（用户界面），包括：

• 内存优化： 创建一个丰富的自定义用户界面控件不免要创建数量众多的属性，其中大部分都使用默认值。用传统的方法，你最终得到的每一个属性都有一个私域。使用依赖属性，你只需存储你修改过的实例属性。默认值存储在依赖属性中。此外，依赖属性在类外部被声明为静态，这更有助于优化内存占用。

• 值验证：依赖属性提供业务逻辑验证。其实现是作为一个专门的验证回调函数，以新值为参数，并根据值有效或者无效分别返回真和假。

• 变更通知：当属性值改变时，另一个回调函数被调用。它用一个 EventData 作为参数被调用。

• 继承：依赖属性的一个最重要的特性就是继承。它是通过一个专用的UI元素来实现的，该元素允许它从视觉树中的父元素得到它的属性。例如，一个按钮可以从父窗口，布局，或其他容器继承它的样式（或主题）属性值。这给了你一个选项，通过只改变一个单一的设置（ Window.theme ），戏剧性地改变你整个应用的外观。

声明一个依赖属性

只有从 DependencyObservable 派生的类可以拥有一个依赖属性。 这个类有内置的方法，来支持依赖属性的整个基础结构。

示例2中的代码创建了一个基础的属性，该属性参照标准属性实现，添加了一个静态部分。

示例2: 如何参照标准属性创建添加l一个静态部分的属性.

JS

---

var dependencyObservable = require("ui/core/dependency-observable");

exports.myPropertyProperty = new dependencyObservable.Property(

"myProperty",

"MyClass",

new dependencyObservable.PropertyMetadata("", dependencyObservable.PropertyMetadataSettings.None)

);

var MyClass = (function (_super) {

__extends(MyClass, _super);

function MyClass() {

_super.apply(this, arguments);

}

Object.defineProperty(

MyClass.prototype,

"myProperty",

{

get: function () {return this._getValue(exports.myPropertyProperty); },

set: function (value) { this._setValue(exports.myPropertyProperty, value); },

enumerable: true,

configurable: true

}

);

return MyClass;

})(dependencyObservable.DependencyObservable);

exports.MyClass = MyClass;

增加一个变化了的回调

示例 3 演示了如何实现改变通知的功能。它添加一个回调函数， onMyPropertyChanged ，该函数对属性的变更打印一个消息。

示例 3: 如何操作 onPropertyChange事件.

JS

---

var dependencyObservable = require("ui/core/dependency-observable");

function onMyPropertyChanged(eventData) {

var myClassInstance = eventData.object;

var value = eventData.newValue;

console.log("myProperty of the object " + myClassInstance.toString() + " changed with " + value);

}

exports.myPropertyProperty = new dependencyObservable.Property(

"myProperty",

"MyClass",

new dependencyObservable.PropertyMetadata("", dependencyObservable.PropertyMetadataSettings.None, onMyPropertyChanged)

);

var MyClass = (function (_super) {

__extends(MyClass, _super);

function MyClass() {

_super.apply(this, arguments);

}

Object.defineProperty(

MyClass.prototype,

"myProperty",

{

get: function () { return this._getValue(exports.myPropertyProperty); },

set: function (value) { this._setValue(exports.myPropertyProperty, value); },

enumerable: true,

configurable: true

}

);

return MyClass;

})(dependencyObservable.DependencyObservable);

exports.MyClass = MyClass;

添加一个验证回调

示例 4 演示了如何实现值验证。 它添加了一个回调函数，validateMyProperty，该函数拿到新属性值并用一个简单的规则验证它。

示例 4: 如何实现值验证.

JS

---

var dependencyObservable = require("ui/core/dependency-observable");

function validateMyProperty(value) {

if (value > 0) { return true; }

return false;

}

exports.myPropertyProperty = new dependencyObservable.Property(

"myProperty",

"MyClass",

new dependencyObservable.PropertyMetadata("", dependencyObservable.PropertyMetadataSettings.None, null, validateMyProperty)

);

var MyClass = (function (_super) { ...

创建可继承的依赖属性

示例 5 演示如何创建一个可继承的依赖属性：

示例 5: 如何创建可继承的依赖属性.

JS

---

var dependencyObservable = require("ui/core/dependency-observable");

exports.myPropertyProperty = new dependencyObservable.Property(

"myProperty",

"MyClass",

new dependencyObservable.PropertyMetadata("", dependencyObservable.PropertyMetadataSettings.Inheritable)

);

var MyClass = (function (_super) {

__extends(MyClass, _super);

function MyClass() { _super.apply(this, arguments); }

Object.defineProperty(

MyClass.prototype,

"myProperty",

{

get: function () { return this._getValue(exports.myPropertyProperty); },

set: function (value) { this._setValue(exports.myPropertyProperty, value); },

enumerable: true, configurable: true

}

);

return MyClass;

})(dependencyObservable.DependencyObservable);

exports.MyClass = MyClass;

创建一个可继承的属性相当简单（正如示例5里看到的）。但是，请记住，继承只发生在视觉树上。对非视觉元素设置属性不允许继承。

样式属性

说明

可能可继承属性最好的应用情景就是对UI组件使用不同的样式和主题了。您只需要对最基本的容器设置一个属性（主题或样式），而每一个UI组件就可以通过视觉树继承它。

设置一个样式属性

设置一个样式属性类似于设置一个常规属性，但你使用嵌套 style 对象（这是 View 类的属性，这意味着每个UI组件都有样式）。

代码里设置

在代码里设置样式属性：

JS

---

var color = require("color");

someButton.style.backgroundColor = new color.Color("red");

CSS里设置

在CSS里设置样式属性：

JS

---

someButton.id = "someButton";

someButton.css = "#someButtton {background-color: red}";