TypeScript bobril.createVirtualComponent函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中bobril.createVirtualComponent函数的典型用法代码示例。如果您正苦于以下问题：TypeScript createVirtualComponent函数的具体用法？TypeScript createVirtualComponent怎么用？TypeScript createVirtualComponent使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了createVirtualComponent函数的7个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: setInterval

import * as c from 'bobril-build-override-const-lib-sample';

let color = "#123456";
const icon = b.sprite("light.png", c.cstr);
const iconDynamicColor = b.sprite("light.png", () => color);

setInterval(() => {
    color = "#" + color.substr(2, 5) + color[1];
    b.invalidateStyles();
}, 1000);

let page = b.createVirtualComponent({
    render(ctx: any, me: b.IBobrilNode, oldMe?: b.IBobrilCacheNode): void {

        me.children = [
            b.style({
                tag: 'div'
            }, icon),
            b.style({
                tag: 'div'
            }, iconDynamicColor),
            {
                tag: 'p',
                children: "cstr: " + c.cstr + " dyn color: " + color
            }
        ];
    }
});

b.init(() => page({}));

开发者ID:Bobris，项目名称:bobril-build，代码行数:30，代码来源:app.ts

示例2: render

import * as b from 'bobril';

export interface IData {
    children?: b.IBobrilChildren;
    onAction?: () => void;
    style?: b.IBobrilStyle;
}

interface ICtx extends b.IBobrilCtx {
    data: IData;
}

export default b.createVirtualComponent<IData>({
    render(ctx: ICtx, me: b.IBobrilNode) {
        me.tag = 'button';
        me.children = ctx.data.children;
        b.style(me, ctx.data.style);
    },
    onClick(ctx: ICtx): boolean {
        let a = ctx.data.onAction;
        if (a) {
            a();
            return true;
        }
        return false;
    }
});

开发者ID:Bobris，项目名称:bobril-build，代码行数:27，代码来源:index.ts

示例3: render

export interface IData {
  children?: b.IBobrilChildren;
  onAction?: () => void;
  style?: b.IBobrilStyle;
  disabled?: boolean;
}

interface ICtx extends b.IBobrilCtx {
  data: IData;
}

export const IncrementButton = b.createVirtualComponent<IData>({
  render(ctx: ICtx, me: b.IBobrilNode) {
    me.children = Button({
      type: ButtonType.Raised,
      feature: Feature.Secondary,
      disabled: ctx.data.disabled,
      children: ctx.data.children
      })
  },
  onClick(ctx: ICtx): boolean {
    let fct = ctx.data.onAction;
    if (fct) {
      fct();
      return true;
    }
    return false;
  }
});

开发者ID:mathieugauthier，项目名称:Bobril-example，代码行数:29，代码来源:button.ts

示例4: init

export const RadioButton = b.createVirtualComponent<IRadioButtonData>({
    init(ctx: IRadioButtonCtx) {
        ctx.action = () => {
            ctx.group.forceFocus = true;
            b.emitChange(ctx.group.data, ctx.data.value);
        }
    },
    render(ctx: IRadioButtonCtx, me: b.IBobrilNode) {
        let data = ctx.data;
        const group: IRadioButtonGroupCtx = (ctx.cfg || {})[radioButtonCfgName];
        if (group == null) throw new Error("RadioButton must be wrapped in RadioButtonGroup");
        ctx.group = group;
        let list = group.list;
        let idx = -1;
        for (let i = 0; i < list.length; i++) {
            if (list[i] === ctx) { idx = i; break; }
        }
        if (idx === -1) {
            idx = list.length;
            list.push(ctx);
        }
        ctx.idx = idx;
        let checked = false;
        if (b.getValue(group.data.value) === data.value) {
            if (group.selIdx !== -2) throw new Error("Duplicate value in RadioButton");
            group.selIdx = idx;
            checked = true;
        }
        const disabled = data.disabled;
        let tabindex = group.data.tabindex || 0;
        if (group.firstEnabled === -1 && !disabled) {
            group.firstEnabled = idx;
            if (!checked) tabindex = null;
        } else {
            if (group.selIdx === -1 || !checked) tabindex = null;
        }
        me.children = checkbox.Checkbox({
            checked,
            tabindex: tabindex,
            disabled,
            action: ctx.action,
            icons: radioButtonIcons,
            children: data.children
        });
    },
    onKeyDown(ctx: IRadioButtonCtx, ev: b.IKeyDownUpEvent): boolean {
        if (ev.which === 37 || ev.which === 38) {
            let i = ctx.idx;
            while (i-- > 0) {
                const ii = ctx.group.list[i];
                if (!ii.data.disabled) {
                    ii.action();
                    return true;
                }
            }
        }
        if (ev.which === 39 || ev.which === 40) {
            let i = ctx.idx;
            while (++i < ctx.group.list.length) {
                const ii = ctx.group.list[i];
                if (!ii.data.disabled) {
                    ii.action();
                    return true;
                }
            }
        }
        return false;
    },

});

开发者ID:JakubJecminek，项目名称:bobril-m，代码行数:70，代码来源:radiobutton.ts

示例5: init

export const Clicker = b.createVirtualComponent({
  init(ctx: ICtx) {
    ctx.counter = ctx.data.time;
    ctx.disabled = false;
    const interval = setInterval(() => {
      ctx.counter--;
      if (ctx.counter <= 0) {
        clearInterval(interval);
        ctx.disabled = true;
      }
      b.invalidate();
    }, 1000);
  },
  render(ctx: ICtx, me: b.IBobrilNode) {
    console.log(ctx.counter);
    me.tag = 'div';
    me.children = [
      {
        tag: 'h2',
        children: ctx.counter + 'seconds remaining ! Click on it !'
      },

      IncrementButton({
        children: increment,
        disabled: ctx.disabled,
        onAction: () => {
          increment++;
          b.invalidate();
        }
      })
    ];
  }
});

开发者ID:mathieugauthier，项目名称:Bobril-example，代码行数:33，代码来源:clicker.ts

示例6: render

import * as b from 'bobril';

export const mainPage = b.createVirtualComponent({
    render(_ctx: b.IBobrilCtx, me: b.IBobrilNode): void {
        me.children = [
            { tag: 'h1', children: 'Hello World!' },
            {
                tag: 'p',
                children: [
                    'See examples on ',
                    {
                        tag: 'a',
                        attrs: { href: 'https://github.com/Bobris/Bobril' },
                        children: 'Bobril GitHub pages.'
                    }
                ]
            }
        ];
    }
});

开发者ID:Bobris，项目名称:bobril-build，代码行数:20，代码来源:mainPage.ts

示例7: init

    }
});

export interface IClickAwayListenerData {
    onClick: () => void;
}

interface IClickAwayListenerCtx extends b.IBobrilCtx {
    id: string;
    data: IClickAwayListenerData;
}

export const ClickAwayListener = b.createVirtualComponent<IClickAwayListenerData>({
    init(ctx: IClickAwayListenerCtx) {
        ctx.id = "" + lastId++;
        onClicks[ctx.id] = ctx.data.onClick;
        count++;
        if (count === 1) {
            layerId = b.addRoot(() => clickAwayListenerLayer());
        }
    },
    destroy(ctx: IClickAwayListenerCtx) {
        delete onClicks[ctx.id];
        count--;
        if (count === 0) {
            b.removeRoot(layerId!);
            layerId = undefined;
        }
    },
});

开发者ID:jirgl，项目名称:bobril-m，代码行数:30，代码来源:clickAwayListener.ts

注：本文中的bobril.createVirtualComponent函数示例整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。