jeudi 17 mars 2022

Ember has-block to detect empty block

In ember octane, is there a way to detect is not an empty string?

The has-block function will return true if we use an empty component like this <IntakeFormElement></IntakeFormElement> while false when <IntakeFormElement/>.

How do I get both <IntakeFormElement></IntakeFormElement> and <IntakeFormElement/> return false?


    Content: 

    No block

Ember Twiddle code:

https://ember-twiddle.com/7bf99058ec9f125b8b88dd73350ad3b4?openFiles=templates.components.intake-form%5C.hbs%2Ctemplates.components.intake-form%5C.hbs




mercredi 16 mars 2022

EmberJS 4.2 + SocketIO 4 setup

In my application, when I refresh the page, sometime I can't able to get data with SocketIO.

I think the event emitter was triggered before socket connecting to server.

SocketIO Code:

import { io } from 'socket.io-client';

export default class SocketIoService extends Service {

  @action io() {
    return io('http://localhost:3030', {});
  }
}

Data receiving Code:

export default class DataService extends Service {
  @service('socket-io') socket;

  @tracked data;

  @action getData() {
    let socket = this.socket.io();

    socket.on('data-response', (data) => {
      this.data = data
    })

    socket.emit('data-request');
  }
}

I'm new to EmberJS, I didn't find any latest class(oops) based example code.

Also suggest any boilerplate or open source with latest version please.




dimanche 13 mars 2022

Issue with ember-cli-rails and puma-dev

Just getting started with a rails api and ember frontend. I'm using ember-cli-rails and puma-dev. I'm getting an error when visiting the localhost at .test. I'm not sure what is causing it, or if it's due to both the front and back end bring set to "/".

Any point in the right direction would be appreciated!

NoMethodError undefined method `has_key?' for nil:NilClass Extracted source (around line #19):

  def action_encoding_template(action) # :nodoc:
    *if @_parameter_encodings.has_key?(action.to_s)*
      @_parameter_encodings[action.to_s]
    end
  end

https://github.com/wjacobs71086/keenmind




samedi 5 mars 2022

Ember Query Parameter cant send value in hash

I cant send the query param value to call set pageno value

template code :


  <LinkTo @route="getServices" @query=" }} ></LinkTo>

controller :

export default class GetServicesController extends Controller {
  queryParams = ['pageno'];

  @tracked pageno = "1";

  
}



samedi 26 février 2022

Ember js - send request and receive response from backend java server

I have build my backend using java and the datas will be returned in json format. Using ember as frontend, how do I send request and receive response to fetch the data from server. Im completely new to ember and expecting some examples.




How to replace `@computed` with setter returning new value with new native setters?

Problem

I've often used this kind of computed properties where the setter simply returns the new value :

  @computed('args.myValue')
  get myValue() {
    return this.args.myValue;
  }
  set myValue(newValue) {
    return newValue; // <==== this is no longer valid with native setter
  }

This does few things :

  1. Set initial value to args.myValue
  2. Allow to change the value (typically through an <Input @value= />)
  3. Restore the default value when args.myValue changes

The problem comes with native setters which can't return any value.

Notice I could probably find a "hackish" solution but I'd like to have code that follows new EmberJS conventions in order to avoid painfull later updates.

Things I tried

Manual caching

  @tracked _myValue = null;

  get myValue() {
    return this._myValue || this.args.myValue;
  }
  set myValue(newValue) {
    this._myValue = newValue;
  }

This does not work because _myValue is always set after the first myValue=(newValue). In order to make it work, there should be some kind of observer which resets it to null on args.myValue change.

Sadly, observers are no longer part of EmberJS with native classes.

helper

<Input @value= />

As expected, it does not work because it just doesn't update myValue.

helper combined with event.target.value handling

<Input @value=  />
  get myValue() {
    return this.args.myValue;
  }

  @action keyPressed(event) {
    this.doStuffThatWillUpdateAtSomeTimeMyValue(event.target.value);
  }

But the Input is still not updated when the args.myValue changes.

Initial code

Here is a more concrete use example :

Component

// app/components/my-component.js

export default class MyComponent extends Component {

  @computed('args.projectName')
  get projectName() {
    return this.args.projectName;
  }
  set projectName(newValue) {
    return newValue; // <==== this is no longer valid with native setter
  }

  @action
  searchProjects() {
    /* event key stuff omitted */
    const query = this.projectName;
    this.args.queryProjects(query);
  }
}


<Input @value=  />

Controller

// app/controllers/index.js

export default class IndexController extends Controller {

  get entry() {
    return this.model.entry;
  }

  get entryProjectName() {
    return this.entry.get('project.name');
  }

  @tracked queriedProjects = null;

  @action queryProjects(query) {
    this.store.query('project', { filter: { query: query } })
      .then((projects) => this.queriedProjects = projects);
  }

  @action setEntryProject(project) {
    this.entry.project = project;
  }
}


<MyComponent 
  @projectName= 
  @searchProjects= />

When the queriedProjects are set in the controller, the component displays them.

When one of those search results is clicked, the controller updates the setEntryProject is called.




jeudi 24 février 2022

Dynamic model in LinkTo component in Ember

I am using Ember 3.18, I am facing the below issue. Consider the following routes:

Router.map(function() {
  this.route('author');
  this.route('author' , {path:"/author/:author_id"});
});

Now, in my hbs file, I am trying to transition to the above routes using a single LinkTo. As you can see, only the second route requires model attribute. In simple terms, I want to combine the below 2 into a single line.

<LinkTo @route="author" />
<LinkTo @route="author" @model="2" />

As you can see, I require the model attribute to be gone in certain cases and availble in certain cases.

Please help.