本文整理匯總了TypeScript中@ephox/alloy.AlloyEvents.derive方法的典型用法代碼示例。如果您正苦於以下問題：TypeScript AlloyEvents.derive方法的具體用法？TypeScript AlloyEvents.derive怎麽用？TypeScript AlloyEvents.derive使用的例子？那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類@ephox/alloy.AlloyEvents的用法示例。
在下文中一共展示了AlloyEvents.derive方法的2個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: function
const sketch = function (editor): SketchSpec {
const pickerDom = {
tag: 'input',
attributes: { accept: 'image/*', type: 'file', title: '' },
// Visibility hidden so that it cannot be seen, and position absolute so that it doesn't
// disrupt the layout
styles: { visibility: 'hidden', position: 'absolute' }
};
const memPicker = Memento.record({
dom: pickerDom,
events: AlloyEvents.derive([
// Stop the event firing again at the button level
AlloyEvents.cutter(NativeEvents.click()),
AlloyEvents.run(NativeEvents.change(), function (picker, simulatedEvent) {
extractBlob(simulatedEvent).each(function (blob) {
addImage(editor, blob);
});
})
])
});
return Button.sketch({
dom: Buttons.getToolbarIconButton('image', editor),
components: [
memPicker.asSpec()
],
action (button) {
const picker = memPicker.get(button);
// Trigger a dom click for the file input
picker.element().dom().click();
}
});
};示例2: renderBodyPanel
const checkboxSpec = (() => {
const memBodyPanel = Memento.record(
renderBodyPanel({
items: [
{ type: 'checkbox', name: 'checked', label: 'Checked' },
{ type: 'checkbox', name: 'unchecked', label: 'Unchecked' }
]
}, {
shared: sharedBackstage
})
);
return {
dom: {
tag: 'div'
},
components: [
memBodyPanel.asSpec(),
],
events: AlloyEvents.derive([
AlloyEvents.runOnAttached((component) => {
const body = memBodyPanel.get(component);
Representing.setValue(body, {
checked: true,
unchecked: false
});
})
])
};
})();