Before AMD, we could use methods directly in chrome/firebug command line like:dojo.byId() or dijit.byId() etc.
But in AMD form, how we will get methods available in a module in command line?
You can just put the complete syntax on one line like this:
require(["dojo/dom"], function(dom) { console.log(dom.byId("search")); });
and for dijit.byId():
require(["dijit/registry"], function(registry) { console.log(registry.byId("search")); });
You can also put the modules in the global space by putting the following snippet in your html :
<script type="dojo/require">
dom : "dojo/dom",
registry : "dijit/registry"
</script>
See http://dojotoolkit.org/reference-guide/1.9/dojo/parser.html#declarative-require
That way, you can use the modules directly in the chrome console. e.g. :
registry.byId("someId")
Related
I'm a total beginner with Vue.js and struggling to find the answer to what I feel is a fairly basic need.
I have a JavaScript library that cannot be installed locally and must be imported via script tag in the index.html file in the old-fashioned way:
<script src="https://foo.bar/scriptyscripts.js"></script>
This library has a bunch of methods in it that I need to use in various spots throughout my app, so it's not going to be a problem to load it globally. The issue I'm facing is that it's loading fine, but the methods are not being recognised in components.
I can use the methods and whatnot if I put them all in a script tag in the index.html however doing that rather defeats the whole point of having components.
Can anyone help me with the step that I'm missing to register all of the methods in this loaded js file so my components don't get mad?
Specifically, the script contains require.js and a collection of other things including JQuery.
Including the library makes the method 'require' available, which is used to load other modules on demand - the example being "js/qlik" in the below snippet. "js/qlik" loads JQuery and a stack of stuff associated with "qlik".
//async login method here. not relevant to this problem
login().then(() => {
require.config({
baseUrl:
(config.isSecure ? "https://" : "http://") +
config.host +
(config.port ? ":" + config.port : "") +
config.prefix +
"resources",
webIntegrationId: config.webIntegrationId,
});
//Load js/qlik after authentication is successful
require(["js/qlik"], function (qlik) {
qlik.on("error", function (error) {
$("#popupText").append(error.message + "<br>");
$("#popup").fadeIn(1000);
});
$("#closePopup").click(function () {
$("#popup").hide();
});
var app = qlik.openApp("caa866be-c8e1-44c8-b67b-dac9d24421fa", config);
});
});
The problem I have is that if I load this library in the index.html file and then try to execute the methods in the snippet above in any component, it does not know that the methods are available.
I see:
'Module not found: Error: Can't resolve 'js/qlik'
66:11 error '$' is not defined
which indicates that the components are unaware of the methods because they're not registered like they would be if I were importing a packaged afterinstalling it locally via NPM
i.e. Your original js code: function abc(){// sth...}
What you need: window.abc = ()=>{// sth...}
Even if you want it in Vue dom.
You should add vue.prototype.abc = ()=>{//sth...}
I've been looking through the vuelayers documentation and have found little info on to use the vl-style-icon module, which is quite important if you want to create icons on your vuelayer map.
I'm pretty sure I have proper syntax when it comes to using it but marker.png won't load in through it. I've tried accessing it as just a normal image and it works fine so it is to my assumption that it's something with my syntax.
Here is my code:
<template>
<vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" style="height: 400px">
<vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation" projection="EPSG:4326"></vl-view>
<vl-feature v-for="crime in crimePoints" :key="crime.id">
<vl-geom-point :coordinates="crime.coords"></vl-geom-point>
<vl-style-box>
<vl-style-icon src="./marker.png" :scale="0.4" :anchor="[0.5, 1]"></vl-style-icon>
</vl-style-box>
</vl-feature>
<vl-layer-tile>
<vl-source-osm></vl-source-osm>
</vl-layer-tile>
</vl-map>
</template>
vl-style-box and vl-style-icon are the main points here. I have also checked to see if the points come up without vl-style-box and they do. What could be wrong with my code?
You can try like this:
<vl-style-icon :src="require('./marker.png')" :scale="0.4" :anchor="[0.5, 1]"></vl-style-icon>
</vl-style-box>
If you used Vue CLI to create your vue project include this in your vue.config.js file. First section tells webpack to parse url attribute on custom tags other than what is already configured (Source).
module.exports = {
chainWebpack: config => {
config.module.rule('vue').use('vue-loader').tap(options => {
options.transformAssetUrls = {
'vl-style-icon': 'src',
...options.transformAssetUrls,
};
return options;
});
}
}
Run the following command to verify the correct vue-loader configuration is there
Source
vue inspect > output.js
I have a package, defined in dojoConfig like this:
packages: [
{ name: 'Widget', location: '/widgets/Widget' }
]
The /widgets/Widget/main.js file defines my main module. With this config, in Javascript i can require the module Widget/main directly by its package name like this:
require(["Widget"], function(Widget){
var widget = new Widget();
// all is well
});
But doing the same using declarative syntax throws a Unable to resolve constructor for: 'Widget' error:
<div data-dojo-type="Widget"></div>
Am I doing something wrong, or is this expected behaviour?
It would be easier to see how widget is created, but the complaint is that you have no constructor.
a constructor is required for a widget. If you extend WidgetBase its done for you.
check the doc:
http://dojotoolkit.org/reference-guide/1.9/quickstart/writingWidgets.html
You need to add the
require(["Widget"], function(Widget){});
part in a script tag in the HTML document you are using
<div data-dojo-type="Widget"></div>
It should look like something:
<script> require(["Widget"], function(Widget){}); </script>
You have to require the module/widget before you can call it in an HTML page the same way you need to do it in a script tag.
Trying to figure out why I can't seem to intern strings in my dojo build. My layer files get created correctly, but the code associated with each of the individual dijits doesn't get interned properly.
Here is a piece of portion of the build output that illustrates where it is failing:
release: Interning strings for : ../../release/fwijits5.31.2012/content/fwijits/optionalDijits/commenting.js
release: ../../release/fwijits5.31.2012/content/fwijits/optionalDijits/templates/commenting.htm
release: Optimizing (shrinksafe, stripConsole=normal) file: ../../release/fwijits5.31.2012/content/fwijits/optionalDijits/commenting.js
release: Could not strip comments for file: ../../release/fwijits5.31.2012/content/fwijits/optionalDijits/commenting.js,
error: InternalError: illegal character
It looks like the optimize fails because the template doesn't get added to the js file properly. Here is what the js looks like after the html gets interned. You can't tell from the output, but a byunch of special characters get tacked on at the end of the javascript.
if(!dojo._hasResource["fwijits.optionalDijits.commenting"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["fwijits.optionalDijits.commenting"] = true;
dojo.provide("fwijits.optionalDijits.commenting");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
//The main widget that gets returned to the browser
dojo.declare("fwijits.optionalDijits.commenting", [dijit.layout.ContentPane, dijit._Templated], {
widgetsInTemplate: true,
_earlyTemplatedStartup: true,
templateString: dojo.cache("fwijits.optionalDijits", "templates/commenting.htm"),
basePath: dojo.moduleUrl("fwijits.optionalDijits"),
//This function contains all configurable parameters
constructor: function(params){
params = params ||{};
this.inherited(arguments);
},
//This functions run on a "startup" call
startup: function(){
var _this = this;
this.inherited(arguments);
},
_addPointComment:function(){
console.debug("button clicked");
}
});
}
The htm file is pretty simple, so I don't think it's the root of my problem.
<div dojoAttachPoint="containerNode">
<div dojoattachpoint="_outerDiv">
<div dojoattachpoint="_addPoint" dojotype="dijit.form.Button" dojoattachevent="onClick:_addPointComment"><b>Add Comment</b></div>
</div>
</div>
Any suggestions?
Which version of Dojo? There is a bug in the build system with interning strings that do not end in HTML or HTM, although I've never tried with HTM to know for sure.
Might be worth a check. I know this was fixed in 1.7 and backported to 1.8.
https://bugs.dojotoolkit.org/ticket/15867
I'm new to Dojo world. I tried to create a custom dojo widget from scratch.The problem that I'm facing is the widget is not getting parsed. I see that postCreate method of that widget is not getting called. The widget JS file is being downloaded from the server.
Here are the steps what I followed.
Created a JavaScript file CustomWidget.js in test folder.
dojo.provide('test.CustomWidget');
dojo.require('dijit._Widget');
dojo.declare('test.CustomWidget', dijit._Widget, {
text: "Hello World",
postCreate: function() {
console.log(this.text+'text');
this.domNode.innerHTML=this.text;
}
});
In my jsp file,I imported test.CustomWidget using dojo.require.
<script type="text/javascript">
dojo.require('test.CustomWidget');
dojo.addOnLoad(function(){ dojo.parser.parse("addFavorites"); });
</script>
<div id='addFavorites' dojoType='test.CustomWidget'>
</div>
I can see that CustomWidget.js file is being downloaded, but I don't see the console statement being printed. Can someone plese help me?
Looks like you aren't instantiating the widget, do you have code like this somewhere?
<div dojoType="mindtree.CustomWidget">...</div>
Otherwise it's like declaring a class but never calling new.