logo

Pochopení cesty Ember.js Public Assets Path pro prohlížeč a Cordova 🗄

Oprava

Děkujeme @neojp za jeho odpověď https://twitter.com/neojp/status/1269708074387939329

Napsal jsem tento blogový příspěvek, aniž bych plně pochopil důvody pro přepisování adres URL, otisky prstů a TIL <base /> jednoduchým a přímočarým řešením pro práci s adresami URL v obou prostředích je přidání <base href={{rootURL}} /> v /app/index.html. Začal jsem používat ember kolem 2.8 a právě jsem zjistil, jaký byl skutečný účel baseURL v config/environment.js a dobře, v ember-cli 2.7 byla zastaralá, to prakticky mění způsob, jakým adresy URL aktiv v ember fungují. Překvapivě doporučeným řešením je použití

Například 

{{! Old: (with baseURL and/or <base /> tag) }}
<img src="assets/images/logo.png" />

{{! New: }}
<img src="/assets/images/logo.png" />

Pokud chcete přidat základní značku, kterou doporučuji:

<!-- index.html -->
...
<head>
  <base href="{{rootURL}}" /> 
</head>

To znamená, že všechny ne zcela kvalifikované adresy URL získají kořenovou adresu URL vašeho souboru config/environment.js s předponou prohlížečem.

Myslím, že to ve skutečnosti není tak dobře zdokumentováno v průvodcích Ember.js nebo v tutoriálu Ember.js. Nové aplikace ember se spouští bez <base /> tag, nebude tedy bezproblémově fungovat v prohlížeči a v corberu, protože při běhu v cordově nemůžete jednoduše ukazovat relativní cesty, tj. /asset/img/photo.jpg , veškerý majetek je umístěn jinde. Stříbrná kulka je <base /> tag.

Pomocník navržený v tomto příspěvku na blogu je užitečný, pokud chcete přidat <base /> jiným způsobem tag ve vašem index.html kvůli nějakému neočekávanému chování kolem něj nebo jen následovat(?) aktuální plán ember-cli... následující pomocník vám dá správnou relativní cestu v šablonách a JS bez ohledu na to, zda běžíte v cordově nebo prohlížeče, musíte se jen ujistit, že tento pomocník běží po cordova.deviceReady 

// helpers/public-url
import Helper from '@ember/component/helper';
import config from 'ember-get-config';

let IS_READY = false;

export function publicUrl(url) {
  if (typeof FastBoot === 'undefined' && window.cordova && IS_READY) {
    return `${window.cordova.file.applicationDirectory}www/${config.ENV.rootURL}${url}`;
  }
  return `${config.ENV.rootURL}${url}`;
}

export default Helper.extend({
  cordovaEvents: service('ember-cordova/events'),

  deviceReadyObserver: subscribe('cordovaEvents.deviceready', 
    function(){
      IS_READY = true;
      recompute();
    })

  compute([url]){
    return publicUrl(url);
  }
});

A použijte to v šablonách, jako je tato 

<img src={{public-url "assets/images/teams/{{team.short_name}}.png"}} alt="{{team.name}}'s flag" style="width: 50px;">

A v js takhle 

import { publicUrl } from '../helpers/public-url';
publicUrl(`assets/images/teams/${team.short_name}.png`);