How do you target ember-cli-mirage from a regular AJAX request using ember-concurrency?

@jameshahn2 wrote:

Howdy! I’ve refactored the Debounced Type-Ahead Search Example from ember-concurrency's docs as follows:

// glossary-app/app/pods/application/controller.js

import Controller from "@ember/controller";
import { task, isBlank, timeout } from "ember-concurrency";
import $ from "jquery";

const DEBOUNCE_MS = 250;

export default Controller.extend({
  searchRepo: task(function * (term) {
  if (isBlank(term)) { return []; }

  yield timeout(DEBOUNCE_MS);

  let url = `/api?q=${term}`;

  let json = yield this.get("getJSON").perform(url);
  return json.items.slice(0, 10);
}).restartable(),

getJSON: task(function * (url) {
  let xhr;
  try {
    xhr = $.getJSON(url);
    let result = yield xhr.promise();
    return result;

  } finally {
    xhr.abort();
  }
}),
});

I placed the Template into the application like so:

// glossary-app/app/pods/application/template.hbs

<div class="container mx-auto max-w-xl bg-grey-white xxs:w-95p xsml:w-375 xsm:w-425 smm:w-480 sm:w-600 md:w-768 lg:w-980 md:shadow">

  {{ui-nav}}

</div>

<div class="container lg:mx-auto sm:flex sm:flex-col-reverse smm:flex smm:flex-col-reverse xsm:flex xsm:flex-col-reverse xsml:flex xsml:flex-col-reverse xxs:flex xxs:flex-col-reverse xxs:ml-15 xsml:mt-10 max-w-xl bg-grey-white md:flex md:flex-col-reverse lg:flex-row lg:w-980 md:shadow">

  <div>
    <input type="text" oninput={{perform searchRepo value="target.value"}} placeholder="Search GitHub..." />

    {{#if searchRepo.isRunning}}
      {{loading-spinner}}
    {{/if}}

    <ul>
      {{#each searchRepo.lastSuccessful.value as |repo|}}
        <li>{{repo.full_name}}</li>
      {{/each}}
    </ul>
  </div>

  <div class="xxs:w-95p mx-auto xxs:mr md:w-700 md:ml-20 md:mt-10">
    {{outlet}}
    {{glossaryData.data.url}}
  </div>
</div>

{{ui-footer}}

This throws:

Uncaught TypeError: (0 , _emberConcurrency.isBlank) is not a function

Which looks like…

Image may be NSFW.
Clik here to view.

Screenshot 2019-08-02 08.46.02.png1371×517 83.5 KB

If the context helps, I am using Mirage Fixtures and just pushed the latest code to Github here: https://github.com/jameshahn2/glossary-app

Can anyone spot what I’m doing wrong?

Posts: 6

Participants: 2

Read full topic