Deep watch arbitriary JSON keys with computed properties in Ember

I have a use case where a Model has a JSON attribute used for arbitrary configurations: configuration: DS.attr().

I have a configurationService (initialized in every component/route/controller/…) with computed properties for easily retrieving this configurations throughout the application

Since the JSON configurations are quite large & have variable depth I can’t have a computed property for every single one.

Unfortunately, being the Service a singleton computed properties don’t detect the changes in the JSON keys (a.k.a. deep watch). I there a way to force deep watching a JSON attribute?

Example: I have the following computed property in my service:

profile: Ember.computed('configuration.profile', function() {
  return this.get('configuration.profile');
});

Considering the configuration object was: {configuration: {profile: {show_birthday: false}}}, if I somehow change show_birthday to true, it won’t be detected

• Note: I considered http://ift.tt/28Ixgaj but discarded it since it’s too verbose, the issue is that our configuration object can become quite large and deep, dynamic & unpredictable
• I tried computed.alias as well with no success.

Any hints or alternatives would be appreciated :)

Send a CSV file from Ember Js to Rails using Ajax

I'm trying to upload a csv file with ajax from Ember Js and read it in my Rails application. I've tried two different approaches. In the first one I tried to send the file from Ember like this:

submitImport() {
  var fd = new FormData();
  var file = this.get('files')[0];
  fd.append("csv_file", file);
  return this.get('authAjax')
    .request('/contacts/import/csv', {
      method: 'POST',
      processData: false,
      contentType: false,
      data: fd 
    });
}

but the problem is that I don't get the csv_file param in the rails application. The request.content_type is application/x-www-form-urlencoded and I need multipart form. I could use reques.raw_post but then I get something like this ------WebKitFormBoundarymgBynUffnPTUPW3l\r\nContent-Disposition: form-data; name=\"csv_file\"; filename=\"elevatr_import.csv\"\r\nContent-Type: text/csv\r\n\r\ngeorgica,gica@me.com\nleo, leonard@yahoo.com\ngigel, becali@oita.fcsb\n\r\n------WebKitFormBoundarymgBynUffnPTUPW3l--\r\n and I would need to somehow parse this, and I don't really like this solution.

The other approach was to send the file base64 encoded and then decode it from Rails. I've tried this:

`

submitImport() {
  var fd = new FormData();
  var file = this.get('files')[0];
  this.send('getBase64', file);
  var encoded_file = this.get('encoded_file');

  return this.get('authAjax')
    .request('/contacts/import/csv', {
      method: 'POST',
      data: { csv_file: encoded_file }
    });
},
getBase64(file) {
  var controller = this;
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function () {
    controller.set('encoded_file', reader.result);
  };
}

But for some reason, the post request is submitted first and only after that the getBase64 method is called. Does anyone knows why is this happening or if I should use a different approach?

Thanks

emberjs set deeply nested undefined key

I have a model with a property response, containing a json with various keys and nesting levels

I can bind an input field to a one level missing key, but not more

for example if after loading the model

model.response = { key1: { c1: 12} }

naturally, I can do

and see 12 in the input field

but, I can do

which will be recorded when I save the model, and found on page reload

but I cannot do

with two levels of missingness.

Not only the value is not saved, but also a computed property with dependent key 'reponse.misskey1.miss2' on the model is never triggered on input change

Do I need to set all missing keys or is there any other way to make it work ?

In this situation, shall I use unknwonProperty handler ?

Thanks

jQuery css on hidden elements

In have an emberjs addon which is a table that has hidden columns.
On that table I fix the table head (and left columns) via css-position and top.

    // Set table head fixed
    function fixHead () {
        console.log('tableFixer: fixHead()');
        var thead = Ember.$(settings.table).find("thead");
        var cells = thead.find("tr > *");

        cells.css({
            'position' : 'relative',
            'background' : '#ff0000',
        });
        console.log(cells); // in here I see ALL the cells, also the hidden ones
    }

I show that hidden column with an ember action.

    expandChildColumn: function(column, sourceIndex) {
        this.get('columns')[sourceIndex+1].set('visible',true);
    },

All fine til there, the "child"-column gets displayed, the th of the primaly shown columns are fixed.

But my problem is, that it seems, that jquery's css-mothod doesn't apply to hidden elements.
So the newly shown column is not fixed.
Neither position nor background gets applied.
I have not found anything about that in the docs.

Is there any special parameter to make css be applied to hidden elements?

Based on this question I'm about to think, that I have to show that column first, set css and hide it again: jQuery: Get height of hidden element in jQuery

Getting a random record with ember data

I've stored a collection of records in a firebase database. I've connected the firebase database to my ember app using emberfire. I 'd like to get just one random record from the collection every time I push a button. In my controller is there a specific method that I can use for this action? Something like 'this.store.random...??" How would you implement this action? Thanks Sandro

Ember template not rendering, even when I set templateName

I try to crate a route with some template and nothing happend.
The template not rendering, I will show my files structure:

application.hbs:

<div id="gif" class="wrapper">
     
</div>

my router.js file:

Router.map(function() {
    this.route('DrawYourGif');
    this.route('VideoToGif');
    this.route('ImagesToGif');
});

my DrawYourGif.js route file:

export default Ember.Route.extend({
    templateName: 'draw'
});

my draw.hbs file:

Bla Bla Bla

That's all, The problem is that nothing is rendering, I see blank page where the template should render (The header & footer rendering well).

What's the problem?
The index template is rendering into the outlet, so I don't know whats the problem here...

Ember + Pyramid Ember Data Request returned a 0 Payload (Empty Content-Type)

I need make application with pyramid and emberjs. I have pyramid view

@view_config(route_name='events', request_method='GET', renderer='json')
def events_view(request):
    query = request.dbsession.query(User)
    one = query.filter(User.id).all()
    json_string = json.dumps({"color": "red"})
    return Response(json_string)

For develop I need configure ember adapter with local host

import DS from 'ember-data';
export default DS.RESTAdapter.extend({
  corsWithCredentials: true,
  host: 'http://127.0.0.1:6543',
  namespace: ''
});

and I have this error

> Error while processing route: events.index "Ember Data Request
> GET http://ift.tt/2cI56jv returned a 0 Payload (Empty
> Content-Type) "