本文整理匯總了TypeScript中@aurelia/runtime.CustomElementResource.define方法的典型用法代碼示例。如果您正苦於以下問題：TypeScript CustomElementResource.define方法的具體用法？TypeScript CustomElementResource.define怎麽用？TypeScript CustomElementResource.define使用的例子？那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類@aurelia/runtime.CustomElementResource的用法示例。
在下文中一共展示了CustomElementResource.define方法的6個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: it
it('100', function () {
const App = CE.define(
{
name: 'app',
template: '${a}<foo b.two-way="a"></foo>',
dependencies: [
CE.define(
{
name: 'foo',
template: '${b}',
bindables: ['b']
},
class {
public b: string;
public attached(this: this & ICustomElement<Node>): void {
expect(this.b).to.equal('x');
expect(this.$host.textContent).to.equal('x');
this.b = 'y';
}
}
)
]
},
class {
public a: string;
public bound(this: this & ICustomElement<Node>): void {
expect(this.a).to.equal('x');
}
public attached(this: this & ICustomElement<Node>): void {
expect(this.a).to.equal('y');
expect(this.$host.textContent).to.equal('xx');
}
}
);
const host = ctx.createElement('div');
const component = new App();
component.a = 'x';
const au = new Aurelia(ctx.container);
au.app({ host, component });
au.start();
expect(host.textContent).to.equal('xx');
ctx.lifecycle.processFlushQueue(LF.none);
expect(component.a).to.equal('y');
expect(host.textContent).to.equal('yy');
});示例2: it
it(`bindSpec ${bindSpec.t}, templateSpec ${templateSpec.t}`, function () {
const { forof, item, expected, initialize } = bindSpec;
const { createTemplate } = templateSpec;
const ctx = TestContext.createHTMLTestContext();
const { container } = ctx;
container.register(TestConfiguration);
const markup = createTemplate(forof, item);
const App = CustomElementResource.define({ name: 'app', template: markup }, class {});
const host = ctx.createElement('div');
const component = new App();
initialize(component);
const au = new Aurelia(container);
au.app({ host, component });
au.start();
expect(host.textContent).to.equal(expected);
au.stop();
expect(host.textContent).to.equal('');
});示例3: it
it(`@containerless yields ContainerlessProjector (with child)`, function () {
const parent = ctx.createElement('div');
const host = ctx.createElement('div');
const child = ctx.createElement('div');
parent.appendChild(host);
host.appendChild(child);
const Foo = CustomElementResource.define(
{
name: 'foo',
containerless: true
},
class {}
) as ICustomElementType<Node>;
const component = new Foo();
const projector = locator.getElementProjector(dom, component, host, Foo.description);
expect(projector).to.be.instanceof(ContainerlessProjector);
expect(projector['childNodes'][0]).to.equal(child);
expect(host.parentNode).to.equal(null);
expect(parent.firstChild).to.be.instanceof(ctx.Comment);
expect(parent.firstChild.textContent).to.equal('au-start');
expect(parent.lastChild).to.be.instanceof(ctx.Comment);
expect(parent.lastChild.textContent).to.equal('au-end');
expect(parent.firstChild.nextSibling['$customElement']).to.equal(component);
expect(projector.provideEncapsulationSource()).not.to.equal(projector['host']);
expect(projector.provideEncapsulationSource()).to.equal(parent);
});示例4: req
req(depsToLoad, function (): void {
const templateImport = parseImport(name);
const templateSource = {
name: kebabCase(templateImport.basename),
template: description.template,
build: {
required: true,
compiler: 'default'
},
dependencies: Array.prototype.slice.call(arguments, 1)
};
onLoad({default: CustomElementResource.define(templateSource, null)});
});示例5: it
it('05.', function () {
let boundCalls = 0;
@customElement({ name: 'foo1', template: `<template><foo2 value.bind="value" value2.bind="value1"></foo2>\${value}</template>` })
class Foo1 {
@bindable()
public value: any;
public value1: any;
public bound(): void {
expect(this.value).to.equal('w00t', 'Foo1.this.value');
expect(this.value1).to.equal('w00t1', 'Foo1.this.value1');
boundCalls++;
}
public valueChanged(newValue: any): void {
this.value1 = `${newValue}1`;
}
}
@customElement({ name: 'foo2', template: `<template><foo3 value.bind="value" value2.bind="value2"></foo3>\${value}</template>` })
class Foo2 {
@bindable()
public value: any;
public value1: any;
@bindable()
public value2: any;
public bound(): void {
expect(this.value).to.equal('w00t', 'Foo2.this.value');
expect(this.value1).to.equal('w00t1', 'Foo2.this.value1');
expect(this.value2).to.equal('w00t1', 'Foo2.this.value2');
boundCalls++;
}
public valueChanged(newValue: any): void {
this.value1 = `${newValue}1`;
}
}
@customElement({ name: 'foo3', template: `<template><foo4 value.bind="value" value2.bind="value2"></foo4>\${value}</template>` })
class Foo3 {
@bindable()
public value: any;
public value1: any;
@bindable()
public value2: any;
public bound(): void {
expect(this.value).to.equal('w00t', 'Foo3.this.value');
expect(this.value1).to.equal('w00t1', 'Foo3.this.value1');
expect(this.value2).to.equal('w00t1', 'Foo3.this.value2');
boundCalls++;
}
public valueChanged(newValue: any): void {
this.value1 = `${newValue}1`;
}
}
@customElement({ name: 'foo4', template: `<template><foo5 value.bind="value" value2.bind="value2"></foo5>\${value}</template>` })
class Foo4 {
@bindable()
public value: any;
public value1: any;
@bindable()
public value2: any;
public bound(): void {
expect(this.value).to.equal('w00t', 'Foo4.this.value');
expect(this.value1).to.equal('w00t1', 'Foo4.this.value1');
expect(this.value2).to.equal('w00t1', 'Foo4.this.value2');
boundCalls++;
}
public valueChanged(newValue: any): void {
this.value1 = `${newValue}1`;
}
}
@customElement({ name: 'foo5', template: `<template>\${value}</template>` })
class Foo5 {
@bindable()
public value: any;
public value1: any;
@bindable()
public value2: any;
public bound(): void {
expect(this.value).to.equal('w00t', 'Foo5.this.value');
expect(this.value1).to.equal('w00t1', 'Foo5.this.value1');
expect(this.value2).to.equal('w00t1', 'Foo5.this.value2');
boundCalls++;
}
public valueChanged(newValue: any): void {
this.value1 = `${newValue}1`;
}
}
const customElementCtors: any[] = [Foo1, Foo2, Foo3, Foo4, Foo5];
const { container, lifecycle } = ctx;
container.register(...customElementCtors);
container.register(TestConfiguration);
const host = ctx.createElement('app');
const au = new Aurelia(container);
const App = CustomElementResource.define({ name: 'app', template: '<template><foo1 value.bind="value"></foo1>\${value}</template>' }, null);
const component = new App();
component.value = 'w00t';
au.app({ host, component }).start();
//.........這裏部分代碼省略.........
示例6:
() => CustomElementResource.define({ name: 'foo', bindables: { foo: {} } }, class Foo {})