component

引用名：component

说明：所有组件需要继承自 component 。component 中定义了组件的接口函数

示例代码：

/*
 组件类定义。
 */
define(['component'], function ( Component) {
    'use strict';
    return Component.extend({
        renderConfigurator: function () {

        },
        init: function () {

        },
        renderView: function () {

        }
    });
});

---

component 静态方法

component.extend(obj)

说明：工厂类，通过此方法可以创建继承自 component 的类定义

---

component.prototype

function init(data)

说明：初始化组件时调用

• 注意：需要由组件实现者覆盖此方法实现具体代码

function renderView()

说明：渲染预览窗口，当用户修改配置数据时，此方法会多次执行已渲染最新的预览效果

• 注意：需要由组件实现者覆盖此方法实现具体代码

function renderConfigurator()

说明：渲染配置窗口

• 注意：需要由组件实现者覆盖此方法实现具体代码

function getData()

说明：返回需要保存的用户数据

• 注意：需要由组件实现者覆盖此方法实现具体代码

functioin isValid()

说明：验证用户数据是否正确，当用户保存数据时都会调用此方法已保证每个组件自身数据正常

• 注意：需要由组件实现者覆盖此方法实现具体代码

function beforeInit()

说明：在init 前执行，如果返回false，将不会创建该组件

• 注意：需要由组件实现者覆盖此方法实现具体代码

---

component 其他属性/方法

说明：组件的初始化是由平台操作的。在创建一个组件时，会为组件添加如下属性，在编写组件代码时，可以使用this.xxx 来得到。

---

this.viewEl

说明：当前组件实例在预览窗的框架 dom

---

this.configEl

说明：当前组件实例在配置窗的框架 dom

---

this.opts

说明：获取组件的可编辑、可移动、可删除属性

---

this.data

说明：内置变量，默认所有用户数据是保存在this.data中。当调用this.getData()时返回this.data,开发者也可以不使用，但需要保证在覆盖getData() 方法时返回正确的用户配置数据。

---

this.getContext()

说明：获取编辑器内当前所有组件的数据对象（上下文环境）

---

function this.setComponentContainer(els, names, opts)

说明：设置一个或多个 dom 为容器，用户可以拖拽组件到容器内

参数：

els: 容器组件的 dom

names: 为每个容器设置的名字，不可重复

opts:{acceptRole:function(meta){}}: 容器可以接收组件的规则回调

---

this._meta

说明：获取当前组件的 meta（编写的组件package.json）数据.

示例代码

/*
 组件类定义。
 */
define(['component'], function ( Component) {
    'use strict';
    return Component.extend({
        "html_edit": "<div class='mod mod-html'>{{{content}}}</div>",
        renderConfigurator: function () {

        },
        init: function () {
           console.log(this._meta);
           this.setComponentContainer(this.viewEl.find('.sub-container'),'sub-container',{acceptRole:function(meta){return true}});
        },
        renderView: function () {

        }
    });
});