Code Monkey home page Code Monkey logo

ej2-javascript-ui-controls's Introduction

preview

Component web front-end development framework

virtual-dom + ES6 + Router + Components + sass/less + babel

Install

You can install it via npm:

npm install -S lego-core

Instantiation

Create the application entry file /src/main.js

import jQuery from 'jquery';
import Lego from 'lego-core';
window.$ = window.jQuery = jQuery;
Lego.setting({
    alias: 'Lego', //Lego instance alias
    version: '20161202', //The version number of the release
    pageEl: '#container', //Page rendering container
    defaultApp: 'home', //The application launches module by default
    rootUri: '/example/dist/', //Root directory
})
Lego.startApp('index');  //Launch the main page application

Get the global parameters, E.g Lego.config.pageEl

View/Component

Create a file /src/home/view/home.js

import './asset/home.css';
class Home extends Lego.View {
    constructor(opts = {}) {
        const options = {
            events: {
                'click #button': 'theClick'
            }
        };
        super(options);
    }
    render() {
        return hx`
	  <button id="button">${this.options.data.buttonText}</button>
	    <item id="theId"></item>    //the component replace this tag and be rendered to here;
	    `;
    }
    theClick(event){
        console.log('You clicked this button');
    }
}
export default Home;

dataSource

Create a file /src/home/data/home.js

class HomeData extends Lego.Data {
    constructor(opts = {}) {
        const options = {
            'apiName_a': {
                url: './content.json',
		method: 'GET',
                body: {param: paramValue}
                // reset: true   //Whether to re-pull the remote data, yes is 'true'
            },
            'apiName_b': {
                url: './content.json'
            }
	    ...
        };
        Object.assign(options, opts);
        super(options);
    }
    //return format data
    parse(datas, apiName) {
        return datas[0].data;
    }
}
export default HomeData;

Router

Create a file /src/home/app.js , this is home module entrance

import homeView from './view/home';
import itemView from './view/item';
import homeData from './data/home';
Lego.components('item', itemView);   //Register component;
Lego.router({
    '/home' () {
        const viewObj = Lego.create(homeView, {
        	el: '#container', //There is no such attribute,the default is Lego.config.pageEl
            data: {  //Modifying the data property will trigger the view update
            	buttonText: 'click me'
            },
	    ... //You can customize the parameters too, use "viewObj.options[attributeName]" get the attribute
            components: [{
            	el: '#theId',
	            dataSource: {   //dynamic data
		    	  api: ['apiName_a', 'apiName_b'],   //Data dependencies, cacheable
			      server: homeData
		        },
	            components: []
            }]
        });
    }
});

#Build the project Terminal command

npm run build

Other resources

Many thanks to

License

This content is released under the MIT License.

ej2-javascript-ui-controls's People

Contributors

ajithr avatar bharathm03 avatar essentialjs2 avatar saranya13 avatar vijays-git avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.