drunk.Component

实例化

new drunk.Component(model?: Object)

var app = new drunk.Component({
  list: [1, 2, 3]
});
console.log(app.list.length); // 3

实例属性和方法

_isActived: boolean protected

实例状态
template: string

模板字符串
templateUrl: string

模板链接
element: HTMLElement|HTMLElement[]

挂载的元素或元素列表
$filter: drunk.Filter.IFilter

实例上实现的私有数据过滤器对象

init(): any

实例初始化时调用的方法，需重载

class MyComponent extends drunk.Component {
  init() {
    // 在这初始化
  }
}

$setFilters(filters: { [name: string]: drunk.Filter.IFilter }): void

设置数据过滤器

// ...
init() {
  this.$setFilters({
    upper(input: string) {
      return input.toUpperCase();
    }
  });
}
// ...

$resolveData(dataDescriptors: { [name: string]: any|drunk.Promise }): drunk.Promise

初始化数据

// ...
init() {
  this.$resolveData({
    content: 'some text',
    remoteData: drunk.util.ajax({
      url: 'http://example.com/data.json',
      responseType: 'json'
    }),
    objData: () => {
      return {a: 1, b: 2};
    }
  });
}
// ...

$processTemplate(templateUrl?: string): drunk.Promise<HTMLElement>

处理模板，优先处理template,如果未提供再尝试处理templateUrl

class App extends drunk.Component {
  template = '<div></div>';
}
var app = new App();
app.$processTemplate().then(element => {
  app.$mount(element);
});

$mount(element: HTMLElement|HTMLElement[]): void

实例挂载到元素上，并创建绑定
```
var view = new drunk.Component();
view.$mount(document.body);
```
$watch(expr: string, action: IBindingAction, isDeepWatch?: boolean, immediateApplyAction?: boolean)

监听表达式，返回一个取消监听的函数

$computed(property: string, descriptor: any): void

设置计算属性
- $computed(property: string, descriptor: () => any);
  
  根据getter函数设置
```
var app = new drunk.Component({a: 1, b: 2});
app.$computed('sum', function() {
  return this.a + this.b;
});
```
- $computed(property: string, descriptor: { set?: (value: any) => void, get?: () => any; });
  
  根据descriptor设置getter,setter
```
app.$computed('avg', {
  get: function () {
    return (this.a + this.b) / 2;
  }
});
```

$release(): void

实例销毁,会触发drunk.Component.Event.release事件

var app = new drunk.Component();
app.$on(drunk.Component.Event.release, function () {
  console.log('准备销毁');
});
app.$release();

$on(eventType: string, callback: (...args: any[]) => any): drunk.Component

事件监听,别名$addListener

app
  .$on(drunk.Component.Event.mounted, function () {
    // ...
  })
  .$addListener(drunk.Component.Event.release, function () {
    // ...
  });

$once(eventType: string, callback: (...args: any[]) => any): drunk.Component

注册一次性事件监听，第一次触发后就被移除
```
app.$once('custom-event', function () {
  // 这个回调触发后，事件监听将被移除
});
```

$removeListener(eventType: string, callback?: IEventListener): drunk.Component

移除事件监听

app.$on('custom-event', function () {
  app.$removeListener('custom-event'); // 移除所有的custom-event事件监听
});

$emit(eventType: string, ...args: any[]): drunk.Component

触发事件

app.$emit('custom-event', {message: '这是回调的第1个参数'}, '这是回调的第2个参数');

类属性和方法

drunk.Component.Event: Object

组件实例事件
- drunk.Component.Event.created 实例已经创建完成，这个事件只会在子组件被创建时触发
- drunk.Component.Event.mounted 实例已经挂载到元素上
- drunk.Component.Event.templateLoadFailed 如果设置了templateUrl属性并加载模板失败时触发的事件
- drunk.Component.Event.release 实例即将销毁

drunk.Component.define(name?: string, options: drunk.IComponentOptinos): drunk.IComponentConstructor

定义并注册一个组件

interface IComponentOptions {
  init?(): any; // 实例初始化回调
  data?: { [name: string]: any }; // 数据，会调用实例的$resolveData方法
  filters?: { [name: string]: drunk.Filter.IFilter }; // 私有数据过滤器
  watchers?: { [expression: string]: drunk.IBindingAction }; // 数据监听
  template?: string; // 模板字符串
  templateUrl?: string; // 模板链接
}

interface IComponentConstructor {
  extend(name?: string, options: drunk.IComponentOptions): IComponentConstructor;
  new(): drunk.Component;
}

// es5
drunk.Component.define('alert-view', {
  templateUrl: './alert-view.html',
  data: {
    remoteData: function () {
      return drunk.util.ajax({url: 'http://example.com/remoteData.json', responseType: 'json'});
    }
  },
  filters: {
    upper: function (str) {
      return str.toUpperCase();
    }
  },
  watchers: {
    'remoteData': function (remoteData) {
      console.log('remote data is changed:', remoteData);
    }
  },
  init: function () {

  },
});

drunk.Component.extend(name: string, options: drunk.IComponentOptions)

拓展一个组件类，可以访问父类的方法和属性

// es5
var DialogView = drunk.Component.define({
  visible: false,
  content: '',
  confirm: function () {
    this.visible = false;
    this.$emit('confirm');
  }
});
var ConfirmView = DialogView.extend({
  cancel: function () {
    this.visible = false;
    this.$emit('cancel');
  }
});

drunk.Component.register(name: string, ctor: drunk.IComponentConstructor): drunk.IComponentConstructor

根据组件名和组件类构造函数注册组件;也可以通过drunk.component装饰器来注册
```
class AlertView extends drunk.Component {
  // ...
}
drunk.Component.register('alert-view', AlertView);

@drunk.component('toast-view')
class ToastView extends drunk.Component {
  // ...
}
```
drunk.Component.getByElement(element: HTMLElement): drunk.Component

获取挂载在元素上的drunk.Component实例
drunk.Component.getConstructorByName(name: string)

根据组件名获取组件构造函数

drunk.Component.registerResources(componentResources: {[name: string]: string})

注册并加载组件资源

drunk.Component.registerResources({
  'alert-view': './components/alert-view.html',
  'toast-view': './components/toast-view.html'
});

<!--alert-view.html-->
<link rel="stylesheet" href="alert-view.css" >
<div class="alert-view">...</div>
<script src="alert-view.js"></script>

<!--toast-view.html-->
<link rel="stylesheet" href="toast-view.css">
<div class="toast-view">...</div>
<script src="toast-view.js"></script>

drunk.Component.getResourceByName(name: string): string

获取根据registerResources方法注册的组件的资源链接

drunk.Component.registerResourcesLazy(componentResources: {[name: string]: string})

注册组件，组件资源只有需要创建该组件时才会被加载

drunk.Component.registerResourcesLazy({
  'alert-view': './components/alert-view.html',
  'toast-view': './components/toast-view.html'
});

drunk.Component.getConstructorByName('alert-view'); // undefined
drunk.Component.getResourceByName('alert-view'); // './components/alert-view.html'

drunk.Component

drunk.Component

实例化

实例属性和方法

类属性和方法

results matching ""

No results matching ""