CODEWITHSUNDEEP
javascripttwitter-bootstrapember.js
Mio
Mio

Reputation: 1502

Working with bootstrap modal and ember

I have a working version of bootstrap modals who open the nested list ('options') of a json who looks like that :

{ 
   product: [{
      id: 1,
      title: 'Some dope shoes',
      options: [
        { id: 1, name: 'Color' },
        { id: 2, name: 'Size' }
      ]
    },
    {
      id: 2,
      title: 'Some dope',
      options: [
        { id: 3, name: 'Lenght' },
        { id: 4, name: 'Flavor' }
      ]
    }
  ]
}

I've wrote everything for modals with templates I did used any file component. The trick is to make uniq modal id. Url looks like :

<a href="#" data-toggle="modal" data-target="#ma-modal{{optionid}}" title={{title}}>{{mmmh}}</a>

And modals looks like : 

<div class="modal" id="ma-modal{{optionid}}"></div>

I don't feel confident about this code and because I'm learning ember I would like to know if doing all of this in template without any file components is something bad ?

Playing with the ids appears to me as a hack.

Upvotes: 0

Views: 588

Answers (1)

Gennady Dogaev
Gennady Dogaev

Reputation: 5991

In my opinition, creating a component for modal is a way better solution, because:

  • Ember will generate ids and you will have an access to rendered element inside lifecycle hooks, so in many cases there is no need to know an id.
  • You will likely need to call some js-function to show a modal. Component gives a possibility to do this in the right moment (after rendering all elements) by using lifecycle hooks
  • It is easy to re-use a component if needed.

You may found all necessary info about components in documentation. Additionally, you can read about new (introduced in 1.13) lyfecycle hooks in this blog post.

And of course, you can use one of a many ember-cli addons, if you will find an appropriate one

Upvotes: 1

Related Questions