vendredi 25 septembre 2015

Decent tutorial on ember cli how to treat JSON

I've been wasting all my journey trying to find out a simple tutorial explaining how to make a simple app using ember cli for treating a basic json file...I've read http://ift.tt/1thCui6 of course, they explain a lot things but..I don't know how to proceed. Is there a basic example explaining (dummies level) how you make a simple app that parses a json response? I've used the RESTAdapter, I have build muy model but I don't really know how to make in order to send a kind of response to my template..

this is my main js file

App.Store = DS.Store.extend({
  revision: 12,
  adapter: DS.RESTAdapter.create({
    url: 'http://ift.tt/1KDQiah' // my stuff is here
  })
});

this is my model file import DS from "ember-data";

 export default DS.Model.extend({
    title: DS.attr('string')
 });

This is my handlebars template

<ul>    
{{#each model as |item|}}
        <li>{{item.title}}</li>
      {{/each}}
</ul>

I don't know how to relate the model with my template..

I also have tried the twilio tutorial (wich is one the best that I've found) ...but even this doesn't work

Sorry for the simplicity!




How to re-authorize the session for ember-simple-auth-devise when user's email changes

I'm using ember-simple-auth-devise.

When a user logs in, the user's email and token are added to the headers of every request.

When the user changes his email address, I can update the session's email but this does not propagate to the header as well.

What is the best way to trigger an update to the session email and the header email?




Ember Simple Auth when all pages requires authorization

I have website that requires authorization on all its pages. To achieve that there is server that response based on cookie. If there is cookie send ember app, login site otherwise. This allows to facebook like behavior. I am using ember-simple-auth addon to help with authorization.

Since user is never inside app without being successfully authorized, one should be able to save ember-data record object into session. This works nice for one tab but breaks horrible with multiple tabs. Is there way how to have ember-data objects in session and yet support multiple browser tabs?




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.




Ember Test Failed: "found no inverse relationships.."

I'm receiving an error on the test for my contact-info model. The error is

Assertion Failed: We found no inverse relationships by the name of
'address_contact_phones, address_contact_emails, contact_emails, 
contact_phones' on the 'individual' model. This is most likely due to a 
missing attribute on your model definition.

Here is my individual model

export default DS.Model.extend({
  ...
  address_contact_phones: DS.hasMany('contact_info'),
  address_contact_emails: DS.hasMany('contact_info'),
  contact_emails: DS.hasMany('contact_info'),
  contact_phones: DS.hasMany('contact_info'),
  ...
});

Here is my contact_info model

export default DS.Model.extend({
  typecode_desc: DS.attr('string'),
  contactnum: DS.attr('string'),
  email: DS.attr('number'),
  individual: DS.belongsTo('individual', {
              inverse: ['address_contact_phones', 'address_contact_emails', 
                       'contact_emails', 'contact_phones']
  })
});

And here are the models for address_contact_phone, address_contact_email, contact_email, contact_phone

export default DS.Model.extend({
  typecode_desc: DS.attr('string'),
  contactnum: DS.attr('string'),
  email: DS.attr('number')
});

Here is the test for the contact-info model

import { moduleForModel, test } from 'ember-qunit';

moduleForModel('contact-info', 'Unit | Model | contact info', {
  needs: ['model:individual']
});

test('it exists', function(assert) {
  var model = this.subject();
  assert.ok(!!model);
});

How exactly am I supposed to write the inverse relationship on the individual model? Do I need to write something on the individual model like:

address_contact_phones: DS.hasMany('contact_info', {
                          inverse: 'address_contact_phones' })




EmberJS bind checked value based on boolean

I've got my model setup so that it returns a user's status as a boolean. I have two radio buttons I want to use, one for active and another for inactive. I want to have the appropriate value binded like so:

{{ input type="radio" name="status" id="is_active" checked=model.status }}
{{ input type="radio" name="status" id="inactive" checked=model.status }}

What I have doesn't seem to work. Is there another way?




Calling controller method from controller action in Ember 2.0

Ember 2.0 is really giving me a hard time to understand the new functionality. I want to call a method in the controller from the action function, but dont seem to find a way how. Wasted some time on this already

I have read this: calling method from action of controller in emberjs but it is only working for Ember 1.x as in Ember 2.0 there is no ArrayController anymore and I cannot use this.send().

Basically what I would need is:

App.SomeController = Ember.Controller.extend({
   methodFunction: function(data) {
      console.log("YEY", data);
   }
   actions: {
      sessionAction: function(data) {
          this.methodFunction(data);
      }
   }
});

Problem is that this.methodFunction is not available