aralejs Base Attribute demo

by noahua

HTML

<script src="https://a.alipayobjects.com/??seajs/1.3.1/sea.js,seajs/1.3.1/plugin-combo.js,jquery/jquery/1.7.2/jquery.js"></script>
<script>
    seajs.config({
      base: 'https://a.alipayobjects.com',
      alias: {
    '$': 'jquery/jquery/1.7.2/jquery',
    'base': 'arale/base/1.1.1/base'
      }
    });
    
</script>

JavaScript

/* panel.js */
define('panel', function(require, exports, module) {
    var Base = require('base');
    var $ = require('$');
    
    
    var Panel = Base.extend({
        attrs: {
            element: {
                value: '#test',
                readOnly: true
            },
            color: '#fff',
            size: {
                width: 100,
                height: 100
            },
            x: 200,
            y: 200,
            xy: {
                getter: function() {
                    return this.get('x') + this.get('y');
                },
                setter: function(val) {
                    this.set('x', val[0]);
                    this.set('y', val[1]);
                }
            }
        },

        initialize: function(config) {
            Panel.superclass.initialize.call(this, config);
            this.element = $(config.element).eq(0);
        },

        _onChangeColor: function(val) {
            this.element.css('backgroundColor', val);
        }
    });
    
    exports.Panel = Panel
    
});

define('test', function(require, exports, module) {
    var Panel = require('panel').Panel;
    
    var panel = new Panel({ element: '#test' });
    panel.set('color', '#00f'); // this.element 的背景色自动变为 '#00f'
    console.log(panel.get('x'))
    panel.set('xy', [5,5])
    console.log(panel.get('x'))


});

seajs.use('test')