14 Sep 2015, 00:00

Default function options stash with ES6 destructuring assignment.

ES6 opens up a clean approach to define function options stash thanks to the destructuring assignment syntax,

Assuming we want options but let the user overrides it, we can declare our function that way:

function hello(param1, {debug = true, whatever = false} = {}) { }

The advantages are, clearly there is no code in the body function to achieve default options & user overrides.

13 Sep 2015, 00:00

Add additional properties to a result of a function or a fucntion map using ES6 spread operator.

Sometimes it makes sense to add additional properties to a result of a function,

Examples could be enhancing an operation result with some meta data, extending with a timestamp, run time, etc,

Using ES6, we could easily achieve this by:

bindData(oper, props) {
  if (typeof oper === 'function') {
    return (...args) => ({
      ...oper(...args),
      ...props
    });
  }
  if (typeof oper === 'object') {
    return Object.keys(oper).reduce((prev, key) => ({
      ...prev,
      [key]: bindData(oper[key], props)
    }), {});
  }
  return oper;
}

Here are some clarifications:

  1. If oper is a function, we decorate the original function by a closure, return (...args) is the closure (read more about the spread operator.

In general, myFunction(...args); is equelevent to (args) { oper.apply(null, args); },

  1. When the returned function is invoked, the result of the original function ...oper(...args) is then merged with the props object, in other words:

...oper(), ...props is equelevent to: Object.assign({}, oper(), props); Read more about Object.assign

  1. If oper is an object, we bind each of its key’s recursively (assuming each property is a function).

19 Sep 2014, 00:00

New Ember Components Suite!

Introducing a new Ember Components suite!

Ember Components is a set of rich web components written for Ember.js that let you create an astonishing UI for ambitious web applications.

This project aims to be the successor of our Bootstrap for Ember project as all components on this suite are not bound to any specific CSS framework.

Github repo: https://github.com/indexiatech/ember-components

Demo & docs: http://indexiatech.github.io/ember-components

02 Aug 2014, 00:00

Ember Forms

Smart, Intuitive forms for Ember.js styled with Bootstrap, Multi layouts and Validation support.

As my favorite web framework is emberjs, I lately needed forms support for one of my projects with the following set of features in mind:

  • Styled for Bootstrap but easy to stil differently.
  • Different layouts such inline and horizontal
  • Validations where validation rules are defined in model/controller and form supports for:
    • Change color & icons when validation rule fails.
    • Show error message per form input.
    • Submit button with async support that changes its styles & get disabled during async call.

So here is the result: https://github.com/indexiatech/ember-forms

Demo & docs: http://indexiatech.github.io/ember-forms

02 Sep 2013, 00:00

Bootstrap for Ember - more than 100 stars in 1 week

This is awesome! Bootstrap for Ember got more than 100 github stars in less than a week,

Thanks for the great feedbacks, here’s an interesting tweet of the author of Handlebars and Ember.js, Yehuda Katz.

Visit the project: https://github.com/ember-addons/bootstrap-for-ember

29 Aug 2013, 00:00

Bootstrap for Ember v0.2.0 released

Few days ago I submitted a post about Bootstrap for Ember, We released today the 2nd minor version 0.2.0,

So far, version 0.2.0 contains the following components:

Project details:

Have fun!

26 Aug 2013, 00:00

Bootstrap for Ember is born

Bootstrap is an amazing set of pure CSS3 / HTML 5 components, while EmberJs amazes in its beauty of making web applications right.

You can just hook both projects together by using Bootstrap as is in Handlebars templates, But soon enough, you will find yourself asking questions sucha s:

  • How do I interact between Bootstrap events and Ember (such as Controllers)?
  • How to pass Bootstrap components data from Ember (such as Controllers)

I’ve seen few options about the integration between both, but:

  • They are not easy and fun to use, they make the ease of Bootstrap too complex.
  • They are not well documented.
  • Development is too slow, I haven’t seen anything new lately.

So! I’m excited about a project I’ve been working lately with some guys to integrate Bootstrap & EmberJs together in a way that doesnt make Bootstrap usage more complex than using it as-is but providing great integration with EmberJs components.

Links!

08 Jul 2013, 00:00

Accessing EmberJS Controller from different scopes

Sometimes you want to use one ember controller from another, This simply can be done by “asking” ember access to the other controller:

App.PostController = Ember.ArrayController.extend({
    ...
})

App.CommentsController = Ember.ArrayController.extend({
  needs: "post"
});

Then you can simply use the Post controller in Comments’s template:

{% raw %}

<!-- use comments template -->
{{ controllers.post }}

{% endraw %}

This works pretty nice, especially when you have nested routes (you surely want to display some data of the post when you are in the post’s comments context.),

But what if you need to access a controller outside of Ember’s scope?

For instance, you may have a websocket listening to a certain top level event and would like to update a certian controller when data is pushed,

You can use the container lookup to retrieve a controller instance:

// Somewhere out of Ember`s scope
ss.event.on('incomingComment', function(comment) {
    commentsController = App.__container__.lookup('controller:Comments')
    commentsController.pushObject(comment)
})