Essential JS for Ember

27 Aug 20186 minutes to read

System Requirements

To work with Ember, you need to install the followings on your machine.

Create a simple Ember Application

Please follow the below steps to use Syncfusion Ember add-on in your Ember CLI application.

  • Create Ember CLI application using the command ember new ember-app.

  • Add syncfusion-ember in package.json to add the Syncfusion Ember add-on into your application ember-app.

  • Add syncfusion-javascript package for source files (scripts and css).

  • JS
    • "devDependencies": {
        ...
        "syncfusion-ember":"*"; //To install the latest version
        "syncfusion-javascript": "*"; // To install source files
    }
    • Disable EXTEND_PROTOTYPES option in the environment.js file under config folder to prevent on function prototype extension in our controls events.
  • JS
    • EmberENV: {
		FEATURES: {
			// Here you can enable experimental features on an ember canary build
			// e.g. 'with-controller': true
		},
		EXTEND_PROTOTYPES: false
    },

    • Open the command prompt in the root folder and run the command npm install to download the dependent files in node-modules.

    • Copy the files ej.web.all.min and jsrender.min from web/scripts folder which is in JavaScript build samples location (Click Explore Demos button from the Javascript Dashboard) or copy ej.web.all.min from node_modules/syncfusion-javascript/Scripts/ej/web and download jsrender.min file from CDN into the vendor folder. Import the same into the application using below code in ember-cli-build.js.

  • JS
    • module.exports = function(defaults) {
        var app = new EmberApp(defaults, {
            // Add options here
        });
        app.import('vendor/ej.web.all.min.js');
        app.import('vendor/jsrender.min.js');
        return app.toTree();
    };

    • Create the folder scripts and content in public folder and copy JavaScript and CSS files from web/scripts and web/themes folder which is in JavaScript build samples location (Click Explore Demos button from the Javascript Dashboard) or copy the themes files from node_modules/syncfusion-javascript/Content/ej/web into created folders.

    • And include the necessary file references in Index page which is in app folder of the Ember application.

  • HTML
    • <head>
        <link rel="stylesheet" href="{{rootURL}}
        content/ejthemes/default-theme/ej.web.all.min.css">
    </head>
    <body>
        <script src="{{rootURL}}scripts/scripts/jsondata.min.js" type="text/javascript"></script>
    </body>

    Create Grid sample in the Ember CLI application

    • Open the command prompt in the folder ember-app.

    • Use the command ember generate route grid/default to create template default.hbs file in templates folder and router default.js file in routes folder. It also add the routing content in router.js.

    • Use below code in default.hbs in templates folder to render the Grid.

  • HTML
    • <div class="e-control">
	
	{{ej-grid id="Grid" e-dataSource=model.data e-columns=model.cols e-allowPaging=true }}
	
	</div>
    • Use the below code in default.js in routes folder to bind the model to the Grid.
  • JS
    • export default Ember.Route.extend({
        model() {
            return {
                data: window.gridData,
                cols: [
                    { field: "OrderID", headerText: "Order ID", width: 75, textAlign: ej.TextAlign.Right },
                    { field: "CustomerID", headerText: "Customer ID", width: 80 },
                    { field: "EmployeeID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right},
                    { field: "Freight", width: 75, format: "{0:C}", textAlign: ej.TextAlign.Right, priority: 3 },
                    { field: "OrderDate", headerText: "Order Date", format: "{0:MM/dd/yyyy}"},
                    { field: "ShipCity", headerText: "Ship City", width: 110, priority: 2 }
               ]
           }
        }
    });
    • Use the below code in .eslintrc file to ignore the ESLint errors while using ej in samples as like ej.TextAlign.Right.
  • JS
    • ...
    rules: {
        ...
    },
    globals: {
	    ej: false
    }
    ...

    Build or Run the Ember CLI application

    • To Build the Ember CLI application using the command ember build which builds the application and creates the dist folder. Now you can host the dist folder in IIS.

    • To Run the Ember CLI application using the command ember serve which builds the application and creates the dist folder. However it hosts the application in the url http://localhost:4200.

    • Open the browser and navigates to http://localhost:4200.