how to implement

[shopapps]

Hi Please excuse my inexperience, however could you expand on your usage instructions for me? for step 3 you have:

Call modal() within your router map, at whichever scope you choose and wire up any actions: 

what is a router map? I tried placing your example code in one of my module(pod)s route.js file and I get an error:

this.modal is not a function

which would imply to me that I need to extend something to get the route to understand it?

many thanks, and sorry for the (probably) dumb question.

Edit. So i did some experimenting I realise now you are referring to the core router.js file and the Router.map call in there. However I still get the this.modal is not a function error, which is what I would expect if we are not extending something else first? what am I missing :)

[pierrickrouxel]

With

bar: {
   foo: 'baz'
 }

and

otherParams: {
    foo: 'bar'
  }

you should have

{{bar.foo}}

in your template. It will display 'baz'.

You declare a binding. You don't set a value.

[pierrickrouxel]

If you can't send your application. Do your tests with my es-modal-example. I can't debug your program without sources.

[shopapps]

Hi,

Sorry it took so long, but now I have created a clone of your es-modal-example and set it up so that it is in a failing state.

the issues:

1) There is still the bug in ember-strap/addon/components/es-modal.js on line 166 (you have your from/to args the wrong way round) it should read:

args[from] = computed.alias('_source.' + to);

This means that if i set:

otherParams: {data: 'text',},   <--- or any other object here that is not called "data"

it will never work...

2) Only one of the modal's actually pops up the prime/edit one works the prime/index one does not.

Could you either advise me on where I could be going wrong? or point me in the direction of a workaround if it is a bug?

I couldn't figure out how to upload a zip, so I changed the extension to a .jpg and attached it here. If this does not work, I'll try and send it to you via email or some other method.

many thanks.

Paul.

[pierrickrouxel]

I will look for point 1 later.

For point 2, be careful to doesn't have duplicate id. If you are in a loop you should concat the index to your id for example.

[pierrickrouxel]

Ho sorry I ready too fast.

[shopapps]

Happy to check the id's but when you say duplicate Id? what Id are you referring to, where would i look for this?

[shopapps]

I htink I narrowed it down to an issue with the default or 'index' of a given route for example i think if you just had

http://yourapp/
http://yourapp/edit

it works, but if you have

http://yourapp/listings/
http://yourapp/listings/12345/edit

then the first 'listings'.'index' route fails to load the modal but the 'lisitings'.'edit' route works

[shopapps]

Yep, that's definitely where the issue is... if i have a route map of:

Router.map(function() {
  this.esModal('modal-basic', {
    withParams: ['showDelModal'],
    otherParams: {
      size: 'large',
      data: 'modalsconfirmdelete',
    },
    actions: {
      close: 'closeModal',
      ok: 'confirmedDelete',
    }
  });
    this.route('requests', function() {
        this.route('edit', {path: ':request_id/edit'}, function(){
          this.esModal('modal-basic', {
            withParams: ['showConfirmModal'],
            otherParams: {
              size: 'large',
              data: 'modals.markcomplete',
            },
            actions: {
              close: 'closeModal',
              ok: 'confirmedComplete',
            }
          });
    });
 });

However if i explicitly define the index route as follows : - then it works! yey!

Router.map(function() { 

    this.route('requests', function() {
        this.route('index', {path: '/'}, function(){
          this.esModal('modal-basic', {
            withParams: ['showDelModal'],
            otherParams: {
              size: 'large',
              data: 'modalsconfirmdelete',
            },
            actions: {
              close: 'closeModal',
              ok: 'confirmedDelete',
            }
         });
        });

        this.route('edit', {path: ':request_id/edit'}, function(){
          this.esModal('modal-basic', {
            withParams: ['showConfirmModal'],
            otherParams: {
              size: 'large',
              data: 'modals.markcomplete',
            },
            actions: {
              close: 'closeModal',
              ok: 'confirmedComplete',
            }
          });
    });
 });