I am experienced, but new to Aurelia and cannot figure out how to call a specific function from the console.
Using this source:
<code>
import {} from 'css/style.css';
import {inject} from 'aurelia-framework';
import {DOM} from 'aurelia-pal';
export class App {
constructor() {
this.message = 'Test Application';
this.todos = ['a','b','c','d'];
this.DOM = DOM;
}
getFish() {
this.DOM.getElementById("#theMessage").style.color="green";
}
}
</code>
I want to call getFish from the console. One may think that App.getFish() would do it, but no so much.
How DOES one call class functions in the debug console for Aurelia?
I would simply log this in the constructor or really in any of the VM's functions:
export class App {
constructor() {
console.log('App VM', this);
}
getFish() {
console.log('get fish called');
}
}
Then I would right click on the the object that is logged and click "Store as global variable." That will give me a variable to use. I can then call the function as desired.
Related
Is there any way to use next-intl outside of a react component?
For now I get t by calling the hook useTranslations, and then pass its instance to my function:
function formatFoo(t, foo) {
if ....
t('bar');
}
export default function MyComponent() {
const t = useTranslations();
return <div>{formatFoo(t, "bar")}</div>
}
I wish I could just import t from next-intl as i18next permits for example.
my name is DP, I have 2 years Vue2 experience, but I am new to Vue3. I am learning Vue3 recently, as I found the "setup(Composition API)" just like the "Controller(in MVC)" that I did in other language, so I am trying to build my test Vue3 project in MVC way, but I go some problem can anyone help? thx!
MVC Plan
M - use class
V - use <template> ... </template>
C - use setup
My Problem
working: using loadTopic_inSetup().then() in setup is working, because topicList_inSetup is defined in setup() too.
not working: using loadTopic_inModel() in setup is not working, I guess some kind data keep problem, because in console I can see the data already got from API
as u can see, I am not expert for js/ts, I am a backend developer, so if you know how to do it, plz help thx very much.
BTW, VUE is greet, I love it.
My Code
//APIBased.ts
import { ajax } from "#/lib/eeAxios"
export class APIBased {
//load data with given url and params
loadData(apiPath: string, params?: object): Promise<any> {
apiPath = '/v1/'+apiPath
return ajax.get(apiPath, params)
}
}
//Topic.ts
import { APIBased } from "./APIBased";
import { ref } from 'vue'
export class Topic extends APIBased {
//try keep data in model
topicList: any = ref([]);
constructor() {
super()
}
//direct return ajax.get, let setup do the then+catch
loadTopic_inSetup() {
return super.loadData('topics', { t_type_id: 1 })
}
//run ajax get set return data to this.topicList, keep data in model
loadTopic_inModel() {
super.loadData('topics', { t_type_id: 1 }).then((re) => {
console.log(re.data)
this.topicList = re.data
})
}
}
//EETest.vue
<template>
<EELayoutMainLayout>
<template v-slot:mainContent>
<h1>{{ "Hello Vue3 !!" }}</h1>
<hr/>
{{to.topicList}} //not working... just empty array
<hr/>
{{topicList_inSetup}} //working... topic list return from API show here.
</template>
</EELayoutMainLayout>
</template>
<script lang="ts">
import { defineComponent, getCurrentInstance, ref } from 'vue'
import EELayoutMainLayout from '#/components/eeLayout/EELayoutMainLayout.vue'
import { Topic } from "#/models/Topic";
export default defineComponent({
name: 'EETest',
props: {
},
setup() {
let topicList_inSetup = ref([])
const to = new Topic()
//try keep data in setup, it's working
to.loadTopic_inSetup().then((re) => {
topicList_inSetup.value = re.data
console.log(re.data)
})
//try keep data in model, the function is run, api return get, but data not show, even add ref in model
to.loadTopic_inModel()
return {
topicList,
to,
}
},
components: {
EELayoutMainLayout,
},
})
</script>
A few digressions before solving the problem. Maybe you are a java developer. I personally think it is inappropriate to write the front end with Java ideas. The design of vue3's setup is more inclined to combined functional programming
To fully understand why you need some pre knowledge, Proxy and the get and set method of Object
They correspond to the two core apis in vue, reactive and ref,
The former can only be applied to objects( because proxy can only proxy objects),The latter can be applied to any type(primary for basic javascript types, get and set can apply for any type)
You can modify the code to meet your expectations
loadTopic_inModel() {
super.loadData('topics', { t_type_id: 1 }).then((re) => {
console.log(re.data)
this.topicList.value = re.data
})
}
You cannot modify a ref object directly, a test case to explain what is reactive
when ref function is called, a will be like be wrapped in a class has value properties, and has get and set method
the effect function will call the arrow function, and in this time, the get method of a will be called and it will track as a dependence of the effect function, when a changed, the set method of a will be called, and it will trigger the arrow function,
so when you direct modify the a, the setter method will never trigger, the view will not update
const a = ref(1)
let dummy
let calls = 0
effect(() => {
calls++
dummy = a.value
})
expect(calls).toBe(1)
expect(dummy).toBe(1)
a.value = 2
expect(calls).toBe(2)
expect(dummy).toBe(2)
// same value should not trigger
a.value = 2
expect(calls).toBe(2)
I am using an ion-loading component which works fine the first time the view is accessed and the loader is presented and dismissed.
import { AlertController, LoadingController } from 'ionic-angular';
constructor(
public zone: NgZone,
public loadingCtrl: LoadingController,
public alertCtrl: AlertController,
private storage: Storage,
public navCtrl: NavController
) {
this.loading = this.loadingCtrl.create();
}
tryGeolocation() {
this.loading.present();
//misc code
this.markers.push(marker);
this.map.setCenter(pos);
//if(this.loading){
this.loading.dismiss();
}
However when I navigate back to the view and the loader is again presented I get a error:
Error: Uncaught (in promise): removeView was not found
I have tried to followe the advice here and introduced checks to see if loader has been dismissed but now the loader never comes into view:
if (this.loading == null){
console.log("Map.ts: Presenting loader.");
this.loading.present();
}
if (this.loading != null){
console.log("Map.ts: Dismissing loader.");
this.loading.dismiss();
}
I am using ionic 3.9.9, angular 5.2.11
Any input appreciated.
Seems to be allot of different solutions out there depending on the context, for me the solution was to move the loader create call from the module constructor to the method calling present and dismiss:
tryGeolocation() {...
this.loading = this.loadingCtrl.create();
this.loading.present();
//some code
this.loading.dismiss();
}
I want to define a method in a groovy class that I can pass an xpath to on the fly(in order for the same method to be reusable depending on the application). The code snippet below is just a proof of concept, however I would eventually like to build a library of re-usable commands/components, which is why I would like to learn how to dynamically define page content.
If I try this:
import geb.Page;
class oneStepDefMethodClass extends Page {
static url = 'http://www.google.com'
static content = {
queryInput { $("input", id: "gbqfq") }
queryButton { $("button",name: "btnG") }
//songLink { $("span._BZ")}
}
....
void assertSongInResults2(String xpathOfSongLink){
println "Waiting on video link "+ xpathOfSongLink
songLink { $(xpathOfSongLink)}
waitFor {
songLink.displayed
}
}
}
I get this error :groovy.lang.MissingMethodException: No signature of method: geb.navigator.NonEmptyNavigator.songLink() is applicable for argument types: (oneStepDefMethodClass$_assertSongInResults2_closure3) values: [oneStepDefMethodClass$_assertSongInResults2_closure3#7c455e96]
If I throw a
content={songLink {$(xpathOfSongLink)}
}
block in the assertSongInResults2 method, I get this error:
geb.error.UnresolvablePropertyException: Unable to resolve songLink as content for oneStepDefMethodClass, or as a property on its Navigator context. Is songLink a class you forgot to import?
So, yeah is there a way to dynamically define page content like that? The program executes fine if I define it statically up top with the rest of the content , but that is not the point, I want to create re-usable resources instead of redefining the wheel every time I want to use geb.
Solved as I was writing the question, but thought I would post in case anyone else has a similar problem
static String someXpath
static content = {
queryInput { $("input", id: "gbqfq") } //
queryButton { $("button",name: "btnG") } //
songLink { $(someXpath) } //syntax element.className
}
....
void assertSongInResults2(String xpathOfSongLink){
println "Waiting on video link "+ xpathOfSongLink
someXpath=xpathOfSongLink
waitFor {
songLink.displayed
}
}
No, this topic won't answer my question and NO, the solution is not simply importing Command in the nav.ts file. nav.ts is one of many viewModel-files and they will be loaded dynamically on demand. The only problem is to set the parameter's type in the constructor of the class. (Type has to be "Command")
In the following class, which will be loaded by require.js, the method viewModel() requires a new class dynamically. In this case NavViewModel .
command.ts
export class Command {
...
public viewModel(name: string, callback: Function) {
require(["noext!boot/getViewModel/" + name], function (viewModel) {
callback(viewModel);
});
}
}
This is the class which will be fetched by viewModel():
nav.ts
export class NavViewModel extends kendo.Router {
constructor(command: Command) {
super();
this.route('/:name', function (name) {
command.view(name, $('div.content'));
});
this.start();
}
}
EDIT:
Here is the entry-point (requested in comment 2)
main.ts (EntryPoint)
import lib = require("command");
var cmd = new lib.Command();
cmd.viewModel('nav', function (o) {
cmd.view('nav', $('div.header'), function () {
kendo.bind($('.header .nav'), new o.NavViewModel(cmd));
});
});
/EDIT
The Problem:
Visual Studio will throw the error TS2095: Could not find symbol 'Command', because the "Command" class ist not defined in this Module.
The program works fine if the "Command"-Type will be removed from the NavViewModel constructor. Is there any solution to reference the Command class in the NavViewModel?
This won't work:
/// <reference path="../../Scripts/command.ts" />
When using RequireJS, the import statement should be the full path from the root of the application.
I also use a slightly different export syntax
command.ts
class command {
...
}
export = command;
main.ts
// I'm assuming the Scripts folder is at the root of the application
import Command = require('Scripts/command');
var cmd = new Command();
Note
I'm using Typescript 0.9.1.1. I can't upgrade my machine to 0.9.5 as a large internal application is affected by some breaking changes between versions