1. 2016

    How to get a value to a checkbox of input template in ember js

    Posted By

    Recently started playing around with using EmberJS framework, which is a good framework you can use to build single-page applications (SPA). Interesting enough, I had some problems using straight out of the box input checkbox {{input type=”checkbox”}} provided by EmberJs. The issue was the input checkbox element uses returns from checked attribute as its default value, in cases where you would like the value attribute to be different you run into a problem.

    Most solutions require that you build a custom component for input checkbox to implement your changes, here is a solution that allows you to use it straight out of the box.

    For this example I am assuming that you already have a basic knowledge of how EmberJs, my solution incorporates bootstrap convention, but you still use it without bootstrap. As we have a route http://www.example.com/names .

    route – names.js

    import Ember from 'ember';
    export default Ember.Route.extend({
    	model: function() {
    		return Ember.RSVP.hash({});

    template – names.hbs

    <div class="form-group has-feedback">
    	<label for="type" class="control-label">Environment</label>
    	{{#each names as |choice|}}
    		<div class="checkbox">
    			<label for="{{choice.name}}" data-check="{{choice.check}}">
    				{{input type="checkbox" id=choice.name name=choice.name checked=choice.check}} {{choice.label}} 	
    		<div class="checkbox">
    			<label>No Names Found</label>
    <button type="submit" class="btn btn-default" {{action "submit"}}>Submit</button>

    controller – names.js

    import Ember from 'ember';
    export default Ember.Controller.extend({
    	names: Ember.computed(function() {
    		let _name = Ember.Object.extend({ label: '', name: '', value: '', check: false });
    		return [
    			_name.create({ label: 'Uche Ekenna', name: 'name-1', value: 'uche ekenna', check:  false) }),
    			_name.create({ label: 'Anna Green ', name: 'name-2', value: 'anna green', check: false }),
    			_name.create({ label: 'Tom Lee', name: 'name-3', value: 'tom lee', check: false })
    	actions: {
    		submit: function() {			
    			this.get('names').forEach(function(item) {
    				if(item.check) {
    					let _value = item.value;
    					// Do Your Action Here  

    Although the value assigned to checked attribute (parameter) must be a Boolean value, the nice thing about this solution is that ember’s input checkbox plumbing maps the value assigned to checked attribute (parameter) so it gets automatically updated.

    So now if you want to get the value of NAMES just iterate to check for items that have checked as “true”

    You can also assign values in input checkbox directly to your model in your route, just be sure to use the setupController(controller, model) method

    What is Ember.js

    Ember.js is an open-source JavaScript application framework, based on the model-view-controller (MVC) pattern. It allows developers to create scalable single-page web applications by incorporating common idioms and best practices into the framework.

    What is Single-Page Application (SPA)

    A single-page application (SPA) is a web application or web site that fits on a single web page with the goal of providing a more fluent user experience similar to a desktop application. In a SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions.

  2. About Emeka Echeruo

    Emeka Echeruo

    I love sports, football which I refuse to call soccer, and the outdoor especially walks in park. Software development is my passion, there is a beauty in creating something out of nothing but algebra that ends up becomes a part of a persons daily life. I love kids, dogs, nightlife and art because it finds you and moves you emotionally!

  3. Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.