fc-component-ria

0.0.1-beta.1 • Public • Published

fc-component-ria

fc-component-ria提供一个可以跟ER、ESUI整合的简易component开发模式。
浏览器支持:Chrome、Firefox3.5+、Opera10+、Safari3.2+、IE9+

基础特性支持:

  • 语义化标签:支持任意自定义标签作为component占位标签
  • 按需加载:任意的component在初始化及渲染时,依赖的JS文件为按需加载模式
  • 与ER、ESUI整合:通过fc-view,将component与er的渲染及fcui整合,自动尝试进行当前View视图内的component初始化
  • Model共享:默认当前被初始化的component的Model将使用父级Model,数据环境统一
  • ComponentContext共享:默认当前被初始化的component将使用父级的componentContext,这意味着可以直接获取环境内所有的component

建议使用edp进行项目及依赖包管理,安装EDP
fc-component-ria遵循AMD规范,因此需要一个AMD加载器,建议使用esl


依赖项目

Hello, World!

定义

src/helloWorld/helloworld.component.html (component的模板必须以.component.html作为文件后缀)

<fc-component name="hello-world" action="helloWorld/Action">
    <template>
        Hello, World!
        <div data-ui-id="hello-world-btn" data-ui-type="Button"></div>
    </template>
</fc-component>

src/helloWorld/Action.js

define(function (require) {
    var fc = require('fc-core');
    var overrides = {};
    overrides.uiEvents = {
        'hello-world-btn:click': function () {
            alert('hello, again');
        }
    };
    return fc.oo.derive(require('fc-view/component/BaseComponent'), overrides);
})

使用

src/entry/index/tpl.html

<hello-world></hello-world>

src/entry/index/View.js(注册component,如果已经注册过了,则无需此行为)

...
require('fc-component-ria/component!helloWorld/helloworld');
...

更多详尽教程:
生成API

查看DEMO

Readme

Keywords

none

Package Sidebar

Install

npm i fc-component-ria

Weekly Downloads

2

Version

0.0.1-beta.1

License

BSD

Last publish

Collaborators

  • leowang721