I have the following hbs snippet:
<div class='photo-viewer-control' local-class='leftbar'>
</div>
I want to render the div only if leftbar has yielded.
I already tried the following:
<div class='photo-viewer-control' local-class='leftbar'>
</div>
I added the has-block but the div is still rendering when there is no leftbar.
Is there any way to rollback model after model.save or model.destroyRecord failed
try {
await testModel.save();
} catch (error) {
// How to rollback testModel here?
}
I'm trying to make a modal component from scratch in ember js and I'm running into an issue with the button to open the modal. I want to allow the open button to be passed to the component using a block called <:buttonContent></:buttonContent> and pass in the function to open the modal. For some reason with this approach the open action only works once and then the button does nothing when clicking it. I can see that the button state is correct and it works as expected if I use a button directly in the modal component.
<Modal>
<:buttonContent as |action|>
<Button::Basic @action=>
AddCoin
</Button::Basic>
</:buttonContent>
<:default>
</:default>
</Modal>
<div class="curtain">
</div>
<div class= >
<Button::Icon @icon="close" @action= class="close-button"></Button::Icon>
<div class="modal-content">
</div>
</div>
// component controller
import { action } from '@ember/object';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class ModalComponent extends Component {
@tracked isOpen= false;
focusTrapOptions = {
allowOutsideClick: this.clickOutside
}
@action clickOutside(): boolean {
this.close();
return false;
}
@action open(): void {
this.isOpen = true;
}
@action close(): void {
this.isOpen = false;
}
}
I tried putting in a debugger breakpoint on the action and can see that it gets hit on the first call but all subsequent calls don't trigger it. I can also tell that other buttons still work on the page even though the open modal button doesn't.
I am using ember.js and one of the functionality of my component is to download a file. I'm trying to use the Capacitor to download a file.
Issue: Whenever the code below triggers, I am getting this error message on my xcode -> [error] - {"errorMessage":"Unable to download file","message":"Unable to download file","code":"DOWNLOAD"}. I only receive error when using native apps, it works really well for web app.
/components/component.js
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { Plugins, FilesystemDirectory, CapacitorHttp, Diretory } from '@capacitor/core';
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
import { Http } from '@capacitor-community/http'
export default class ExportLink extends Component {
@action
async onClick() {
this.isRequesting = true;
try {
// Fetch the download url, since a download has no Authentication information
const urlResponse = await this.store
.fetch('signed_urls', { type: 'post', body: { request_url: this.requestUrl } });
const options = {
url: urlResponse.url,
filePath: `${this.fileName}.${this.args.extension}`,
fileDirectory: Directory.Documents,
};
const response = await Http.downloadFile(options);
const blob = await response.blob;
const downloadResponse = new Response(blob, {
status: response.status,
headers: (new Headers(response.headers))
})
if (!downloadResponse.ok) {
throw downloadResponse.statusText
}
// create a new download link. Add the content of the download, so the download prompt is immediatly invoked
const link = document.createElement('a');
const objectUrl = URL.createObjectURL(blob);
link.setAttribute('href', objectUrl);
link.setAttribute('download', `${this.fileName}.${this.args.extension}`);
link.setAttribute('rel', 'noopener noreferrer');
link.setAttribute('target', '_blank'); // fallback if a direct download isnt supported
link.dispatchEvent(new MouseEvent('click'));
URL.revokeObjectURL(objectUrl);
}
catch(e) {
console.error({e: e});
this.notifications.add(this.intl.t('general.forms.unknown_error'), { type: 'warning' });
}
finally {
this.isRequesting = false;
}
return false;
}
}
Additional Question: What should be the filePath for the android or Ios? Or my question is irrelevant to the issue?
I have a input box in DOM, and monitor the input value in controller, and there's another button, if the input value is changed, I want to change the button title or properties accordingly, how can I do this in controller?
test.hbs
<input type="text" value="somevalue" />
<button type="button" id="test">test</button>
test.js
@action
updatevalue(value) {
//how to access test button, and change its title?
}
I'm trying to upgrade my ember Project to be specific i want to upgrade ember-auto-import to 2.x. But This requires at least ember 4.x so i upgraded every depencency in my package.json thats related to ember itself (ember-source, ember.data etc.). So after i upgraded everything this is my package.json. But as soon i start the application i get this error.
After a little interogation i realized that even the required package is in the package.json of the dependency, it doesnt get downloaded inside the node_moduels folder of the package. So i tried to import the missing package in the package.json of the application itself but that didn't help. But what i found is that if i remove the package that throws the error an other package throws an error that looks almost the same, so u think it's not an error whith the package itself but an error with ember auto import or my config. Does anybody know this kind of error and know how to solve it?
I defined a test component in emberjs, expect it output each value of testOpts, but got below error when rendering the page, how should I define the component ?
Uncaught (in promise) Error: Attempted to resolve a value in a strict mode template, but that value was not in scope: testOpts
at encodeOp (opcode-compiler.js:2160:1)
at pushOp (opcode-compiler.js:2067:1)
at opcode-compiler.js:468:1
at Compilers.compile (opcode-compiler.js:417:1)
at expr (opcode-compiler.js:587:1)
at CompilePositional (opcode-compiler.js:657:1)
at SimpleArgs (opcode-compiler.js:633:1)
at Call (opcode-compiler.js:719:1)
at opcode-compiler.js:436:1
at resolveHelper (opcode-compiler.js:229:1)
components/helper/test.hbs:
<div>
testOpt:
</div>
components/helper/test.js:
import Component from '@glimmer/component';
export default class TestComponent extends Component {
get testOpts() {
return ['a', 'b'];
}
}
application.hbs
<Helper::Test />
if I don't use the output is fine, but I'm wondering how should I get to work.
I have situation where a have component that with send a function to the controller and the data is computed in controller.Again I need to send the resultant of the function to the component and do the rest of the computation.As a beginner Im encountering it .Is it possible to do so?
I tried it to pass as a variable but it is getting a empty list
I'm trying to create my built folder for an emberJS project, but I get this error when I run the command yarn start
Build Error (CreateEmberL10nFastBootAssetMap)
ENOENT: no such file or directory, scandir '/var/folders/2z/169nvw1959q444m88mg24prc0000gn/T/broccoli-10881ZqfXS0rWIq4v/out-861-broccoli_merge_trees//var/folders/2z/169nvw1959q444m88mg24prc0000gn/T/broccoli-10881ZqfXS0rWIq4v/out-861-broccoli_merge_trees'
Stack Trace and Error Report: /var/folders/2z/169nvw1959q444m88mg24prc0000gn/T/error.dump.027ea1cdeb583673f9f08a5e2e797c1b.log
I'm trying upgrade to Node 16 enviroment on my emberJS project using yarn.
package.json:
{
"devDependencies": {
"@babel/core": "^7.22.1",
"@babel/plugin-proposal-object-rest-spread": "^7.17.3",
"@babel/plugin-transform-block-scoping": "^7.21.0",
"@ember/jquery": "^2.0.0",
"@ember/optional-features": "^2.0.0",
"@ember/render-modifiers": "^2.0.5",
"@glimmer/component": "^1.1.2",
"@glimmer/tracking": "^1.1.2",
"@open-event/theme": "^0.2.2",
"@sentry/browser": "^6.19.7",
"@sentry/integrations": "^6.19.7",
"@sentry/tracing": "^6.19.7",
"@types/ember": "^4.0.0",
"@types/ember-data": "^3.16.15",
"@types/ember-data__model": "^3.16.1",
"@types/ember-qunit": "^3.4.15",
"@types/ember__test-helpers": "^2.6.1",
"@types/lodash-es": "^4.17.6",
"@types/moment": "^2.13.0",
"@types/qunit": "^2.19.5",
"@types/rsvp": "^4.0.4",
"@types/url-parse": "^1.4.8",
"@typescript-eslint/eslint-plugin": "^5.23.0",
"@typescript-eslint/parser": "^5.59.8",
"async": "^3.2.3",
"babel-eslint": "^10.1.0",
"broccoli-asset-rev": "^3.0.0",
"broccoli-persistent-filter": "^3.1.3",
"croppie": "^2.6.5",
"css-loader": "^5.2.7",
"dompurify": "^3.0.3",
"ember-ajax": "5.1.2",
"ember-auto-import": "^1.12.2",
"ember-classic-decorator": "^3.0.0",
"ember-cli": "~4.12.1",
"ember-cli-accounting": "^2.1.0",
"ember-cli-app-version": "^5.0.0",
"ember-cli-autoprefixer": "2.0.0",
"ember-cli-babel": "^7.26.11",
"ember-cli-cjs-transform": "^2.0.0",
"ember-cli-clipboard": "^0.16.0",
"ember-cli-code-coverage": "^2.0.0",
"ember-cli-dependency-checker": "^3.3.1",
"ember-cli-deploy": "^1.0.0",
"ember-cli-deploy-build": "^2.0.0",
"ember-cli-deploy-git": "^1.3.4",
"ember-cli-deploy-html-manifest": "0.0.6",
"ember-cli-deploy-revision-data": "^2.0.0",
"ember-cli-deprecation-workflow": "^2.1.0",
"ember-cli-document-title-northm": "^1.0.3",
"ember-cli-dotenv": "^3.1.0",
"ember-cli-fastboot": "^4.1.1",
"ember-cli-flash": "^2.2.0",
"ember-cli-head": "^2.0.0",
"ember-cli-html-minifier": "^1.1.0",
"ember-cli-htmlbars": "^6.0.1",
"ember-cli-ifa": "^0.10.0",
"ember-cli-inject-live-reload": "^2.1.0",
"ember-cli-moment-shim": "^3.7.1",
"ember-cli-nouislider": "^1.2.1",
"ember-cli-pace": "devotox/ember-cli-pace#master",
"ember-cli-qunit": "^4.4.0",
"ember-cli-sass": "^11.0.1",
"ember-cli-scss-lint": "^2.4.1",
"ember-cli-shims": "^1.2.0",
"ember-cli-string-helpers": "^6.1.0",
"ember-cli-stripe": "^3.0.0",
"ember-cli-typescript": "^5.2.1",
"ember-cli-typescript-blueprints": "^3.0.0",
"ember-cli-uglify": "^3.0.0",
"ember-composable-helpers": "^5.0.0",
"ember-config-service": "^1.0.0",
"ember-cookies": "^0.5.2",
"ember-data": "3.14.1",
"ember-data-has-many-query": "^0.3.1",
"ember-data-storefront": "^0.18.1",
"ember-decorators": "^6.1.1",
"ember-drag-drop": "^0.8.2",
"ember-exam": "^6.1.0",
"ember-export-application-global": "^2.0.1",
"ember-fetch": "8.1.1",
"ember-fullcalendar": "^1.8.0",
"ember-h-captcha": "^2.5.1",
"ember-href-to": "5.0.0",
"ember-infinity": "^2.3.0",
"ember-l10n": "^4.3.1",
"ember-leaflet": "^5.0.1",
"ember-link-action": "2.0.4",
"ember-load-initializers": "^2.1.2",
"ember-math-helpers": "^3.0.0",
"ember-maybe-import-regenerator": "^1.0.0",
"ember-metrics": "^1.5.0",
"ember-moment": "^8.0.2",
"ember-notify": "^6.0.3",
"ember-power-select": "^5.0.4",
"ember-print-this": "^2.0.0",
"ember-qunit": "^4.6.0",
"ember-resolver": "^8.0.3",
"ember-route-action-helper": "^2.0.8",
"ember-router-scroll": "^3.3.7",
"ember-simple-auth": "^4.2.2",
"ember-simple-auth-token": "^5.3.0",
"ember-source": "3.20.3",
"ember-table": "^2.2.3",
"ember-template-lint": "^2.21.0",
"ember-truth-helpers": "^3.1.1",
"ember-uuid": "^2.1.0",
"eslint": "^7.32.0",
"eslint-plugin-ember": "^10.6.1",
"eslint-plugin-ember-suave": "^2.0.1",
"eslint-plugin-node": "^11.1.0",
"fastboot-app-server": "^4.1.1",
"google-material-color": "^1.3.1",
"http-status": "^1.6.2",
"leaflet": "^1.8.0",
"loader.js": "^4.7.0",
"lodash-es": "^4.17.21",
"mini-css-extract-plugin": "^2.7.6",
"moment-timezone": "^0.5.31",
"npm-run-all": "^4.1.5",
"object-to-formdata": "^4.5.1",
"paypal-checkout": "^4.0.338",
"pre-commit": "^1.2.2",
"query-string": "^7.1.1",
"qunit-dom": "^2.0.0",
"sass": "^1.62.1",
"semantic-ui-calendar": "^0.0.8",
"semantic-ui-ember": "3.0.5",
"string_decoder": "^1.3.0",
"style-loader": "^2.0.0",
"tinyColorPicker": "https://github.com/PitPik/tinyColorPicker#1.1.1",
"torii": "^0.10.1",
"typescript": "^5.0.4",
"url-parse": "^1.5.10",
"webpack-bundle-analyzer": "^4.5.0",
"wysihtml": "^0.5.5",
"xgettext-template": "^4.1.2"
},
"engines": {
"node": ">= 12.x <17",
"yarn": ">= 1.2.0"
},
"private": true,
"dependencies": {
"@stripe/stripe-js": "^1.53.0",
"ua-parser-js": "^1.0.35"
},
"ember": {
"edition": "octane"
},
"ember-addon": {
"paths": [
"lib/cache-updater",
"lib/start-title"
]
},
"fastbootDependencies": [
"crypto",
"node-fetch",
"ua-parser-js"
]
}
I run the below command to switch to node 16
nvm use 16
Then run the below command to upgrade all dependencies to node 16
yarn upgrade
Result as below:
1 error generated.
make: *** [Release/obj.target/binding/src/binding.o] Error 1
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit ([PROJECT_PATH]/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack at ChildProcess.emit (node:events:513:28)
gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:293:12)
gyp ERR! System Darwin 21.6.0
gyp ERR! command "[USERS_PATH]/.nvm/versions/node/v16.20.0/bin/node" "[PROJECT_PATH]/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd [PROJECT_PATH]/node_modules/node-sass
gyp ERR! node -v v16.20.0
Tried to remove node-sass then upgrade, but the problem stays the same.