vendredi 28 juin 2019

Model properties are not set

I'm trying to get data from a server and set it to Ember's DS.Model (by ember's magic). But records are created with no data.

I have got a model models/product.js:

const { Model } = DS;

export default Model.extend({
    name: DS.attr(),
    price: DS.attr()
});

In routes/product.js I request all products:

    model() {
        return this.store.findAll('product');
    }

The server returns data: https://gyazo.com/ba38b756f334bc22d07fe18ccfddda34

I expect ember to create 3 records with data from the server. But actually, it creates this https://gyazo.com/a9a7b77d838ec33b05e5f81ef8304cdb

What is wrong? I guess I shouldn't specify any adapters and serializers to get default Ember behavior.




Recompute Ember custom helper on change of a controller property that is passed to the helper

I'm changing the value of a property in my controller and the helper fails to recompute them.

Sample code here:

My template looks like,


    <span>Warning</span>


In my controller,

changeAction: function() {
    let that = this,
        info = that.get("info");
    set(info, "showWarning", true);
}

my helper,

import { helper as buildHelper } from '@ember/component/helper';

export default buildHelper(function(params) {
    let that = this,
        info = that.get("info");
    if(info.showWarning ) {
        return true;
    } else {
        return false
    }
});




jeudi 27 juin 2019

Is it possible for Ember Liquid Fire to hide a bootstrap column?

I have a layout with a number of columns as follows:

<div class="container-fluid">
  <div class="row">
    <div class="col">
      //col content
    </div>
    <div class="col">
      //col content
    </div>
    <div class="col">
      //col content
    </div>
  </div>
</div>

I'd like to use Liquid Fire to hide some columns based on a property, something like this:

    
    <div class="col">
      //col content
    </div>
    

However this breaks the flex sizing of the row. The column that is the subject of the liquid-if is rendered very small when visible whilst the others size according to flex.

I think this is because Liquid-Fire creates it's own <div class="liquid-container"> and <div class="liquid-child"> which is breaking what Bootstrap expects for flex sizing.

With that in mind I tried to add the col class to the invocation:

    

      //col content

    

But when the property changes the content clears and the empty column remains in the DOM.

Is there anything I can do here? I don't really know any other way to animate DOM removals.




Type definition merge for Route in ember-cli-typescript

I'm using ember-cli-typescript to type my Ember.js app step by step. My legacy app uses Route.reopen in an initializer to add a method getParentRoute to the every Route. I could probably subclass Route and use the subclasses Route all over my project, instead I wanted to use typescript definitions in types/*.d.ts to tell the typescript compiler that there is the getParentRoute() method. I've looked at the typescript definitions, but I'm stuck.

I played around with something like:

declare module '@ember/routing/route' {
    export default interface Route {
        getParentRoute() : Route;
    }
}

But that lead to the TS-Error that I need to implement Route instead of extending it. Makes sense, as I declare the interface. But makes no sense for me, as this code is used in ember-data/index.d.ts.

I also tried something like that, but it TS keeps yelling at me that getParentRoute does not exist on Route.

declare module 'ember' {
  export namespace Ember {
    export class Route {
      getParentRoute() : Route;
    }
  }
}

I would expect that the default ember types can be extended, but it seems that is not an easy task due to the complexity of the ember module system. Any help is appreciated. Thanks in advance!




Babel build error when running coverage test with ember-cli-code-coverage

On any version of ember-cli-code-coverage over 1.0.0-beta.4 I get the same error

Build failed.
Build Error (Babel) in chat/components/chat-box.js

chat/components/chat-box.js: You gave us a visitor for the node type "ClassPrivateProperty" but it's not a valid type

chat-box.js has nothing to do with the error so it makes no sense and it also has no test for it.

So why am I getting this error and what does it mean?




Ember store.findAll is reloading view and store.query is not

At the moment, when an article is added to the store, my view is not updated when I use store.query(), filtering server side, in my route but it's updated when I use store.findAll() with filtering client side.

With findAll, filtering client side

//route.js
model() {
return this.get('store').findAll('article');
}

//controller.js
articleSorted: computed.filterBy('model', 'isPublished', true),

and with query filtering server side

//route.js
model() {
  return this.get('store').query('article', { q: 'isPublished' }),
}

The fact is that findAll is reloading and query is not.

I've found this but did not understand https://github.com/emberjs/ember.js/issues/15256




Yarn not installing packages

I'm trying to downgrade my version of ember-cli-code-coverage and once I change the version in my package.json and run yarn install it "installs" but when I go to run the coverage test COVERAGE=true ember test it gives me this error.

Missing yarn packages: 
Package: ember-cli-code-coverage
  * Specified: v1.0.0-beta.6
  * Installed: 1.0.0-beta.8

Run `yarn` to install missing dependencies.

So run yarn and then this is what I get.

yarn install v1.3.2
(node:8156) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
[1/5] Validating package.json...
[2/5] Resolving packages...
success Already up-to-date.
Done in 1.15s.

package.json (under devDependencies): "ember-cli-code-coverage": "v1.0.0-beta.5"