recently I have a problem about including other js files using dojo. e.g. :
In my 1.js file, I wrote:
require(["dijit/form/Button"], function(Button){
addButton(someWidget);});
and in my 1a.js file, I wrote the function addButton:
function addButton(target){
var b1=new Button({
style: "border: 1px solid green",
label: "xxxxx"
});
target.addChild(b1);
return b1;
}
for 1a.js there must be an error, because I did not require that module, but i add require, the biggest
problem is that returned value, I can not get the return value, because of nested funciton.
how can i wrote a js file, which i wrote all my functions, and in another js file, i just call these functions with dojo require("xxxx", function(x){})
Thanks for help!
dojo.require is the legacy (<=1.6) loader for the toolkit. Using dojo.require in one file, made the code available to all files.
Dojo has moved to using the AMD API for loading modules. In 1a.js, you will also need to add the require statement.
My answers to the following questions will provide a better understanding of the AMD API and the require statement:
What is the main difference between require() and define() function in dojo and when would we use either?
Dojo Builds...? What now?
What is the purpose of function in the dojo require?
Related
The tutorials got me going with the Dojo build system. However I'm left with a question that'll make or break the possibility of deploying a fully built release in my case. It is possible that the tutorial explains it, but that I didn't get it. Apologies if that was the case !
I use a library that lives inside an AMD layer ; let's call it blackboxLayer.js. There are several packages inside that layer, but I suppose the question would be the same if there was only one. So let's say that blackboxLayer.js contains a single package called blackbox, with modules blackbox/A and blackbox/B. To be sure that things are fun, that layer is bootable. And of course it's closed source stuff.
My app modules reference blackbox/A or blackbox/B. How do I make my build profile go look for the blackbox package inside that blackboxLayer.js file, rather than in a directory ?
Thanks for any input. :)
If built file blackboxLayer.js is in relative path /release/blackbox/layers, there is a separate dojo layer
<script type="text/javascript" src="path to dojoLayer.js"></script>
and
var dojoConfig = {
packages: [
{ name: 'blackbox', location: 'release/blackbox' }
]
};
then code inside this function can reference modules A and B,
require(['blackbox/layers/blackboxLayer'],
function () {
require(['dojo/parser', 'dojo/ready'],
function (parser, ready) {
ready(function () {
require(['blackbox/A', 'blackbox/B'],
function (blackboxA, blackboxB) {
// call blackboxA and blackboxB
});
});
});
});
If there is no separate dojo layer, you can reference blackboxLayer.js in the script tag, and omit the package def and requiring blackboxLayer.
The interim solution I've been using since this question has been posted is NOT to use dojo's builder... Instead I use a lightweight grunt pattern that concatenates AMD sources into a layer, and then I reference the layer from dojoConfig's deps property. The concatenation process is visible here : https://github.com/gruntjs-updater/grunt-amd-concat
I'm using Titanium Studio and Titanium SDK. In this case I'm developing for Android but I have an installation on OSX too.
When using Alloy, I can specify
<Label class="header" id="someId">Week 50</Label>
and then specify the colors,fonts etc in the TSS file like this
".header": {
color: "blue"
}
However when I use the SDK version:
var l = Ti.UI.createLabel({class:"header", text:"sometext"});
The color from the TSS file isnt picked up???
What am I doing wrong. Isn't 'class' a valid property? (I cant seem to find it in the docs).
Alloy style are applied automatically to views created through xml. If you want to keep that effect while you are creating objects inside controller you have to use $.UI.create() method instead of Titanium API. In your case your code will look like this:
var l = $.UI.create('Label', {
title: "sometext",
classes: ["header"],
});
For more read Dynamic Styles guide. It's not very well documented and some parts of it were unclear for me when I read it but it's good starting point to experiment with the code and learn Alloy behaviour.
Encountered you question while I was searching for something similar. The chosen answer was unfortunately not the solution I was looking for, since I was writing a commonJS and needed the same this. If you are writing a commonJS (but still under an Alloy project) you can use the following solution:
var l = Alloy.UI.create("index", "Label", {
title: "sometext",
classes: ["header"],
});
Where "index" is what being generated by Alloy from you app.tss file.
I'm trying to migrate an application from dojo 1.6 to version 1.9.1, and I've a legacy module that I didn't want to migrate yet (it's pretty complex and will take me some time to understand). The Dojo docs indicate you can load legacy modules along with AMD modules, but when I try, I'm getting a "dojo.provide is not a function" when the loader tries to load the legacy module.
My script:
require([..., "agsjs/dijit/TOC","dojo/domReady!"],
function(..., TOC) {
on(map,'layers-add-result',function(results){
//Add Legend
var toc = new TOC({
map: map,
layerInfos:legendLayers
}, 'legendDiv');
toc.startup();
});
});
The first line of code of the module:
dojo.provide('agsjs.dijit.TOC');
Everything works until the loader tries to load the agsjs/dijit/TOC module, where I get a "dojo.provide is not a function" error. How do I solve this without having to refactor the entire module to AMD? Thanks
In order for legacy modules to load, you need to run the loader in legacy mode, which means you cannot set async: true. As long as you are running with async: false (the default), you will be able to load and use legacy modules from AMD modules, and vice-versa.
A good point of AMD is that you don't have to use "dojo" and "dijit" global variables now. If you don't want change all those dojo.xxx calls in your old modules, you may try to wrap you old module in a
define([
"dojo/_base/declare",
"dojo", "dijit",
...
], function(declare, dojo, dijit) {
return declare([/*your parent widgets*/], {
//your old module content at here, maybe you need make little modifications of your old module
});
});
So that those dojo.xxx functions may still works.
This link may provide everything you need:
http://dojotoolkit.org/reference-guide/1.9/releasenotes/migration-17.html
I have a Rails 3.2.8 application that I have recently upgraded from 3.1, and I have converted all of the original application.js code to CoffeeScript. Most of it is working fine. However, I have a breadcrumb function that I call in several views that is not being found. For right now, I'm just throwing up an alert to see if it is working:
product_breadcrumb = (attr) ->
alert attr
That's in a file called product_search.js.coffee. It is being successfully compiled, and ends up looking like this:
(function() {
var product_breadcrumb;
product_breadcrumb = function(attr) {
return alert(attr);
};
}).call(this);
I guess that's right, I don't know. Anyway, in Firebug I'm getting:
ReferenceError: product_breadcrumb is not defined
Please note that this is after an Ajax call. I don't know why the function wouldn't be available though. It's just a function definition after all. Shouldn't it still be available to the rendered HTML from the Ajax call? I can't understand why the function can't be found.
This needs to be on the global scope, and then you need to call it that way.
You should write:
root = exports ? this
and name your function
root.product_breadcrumb
then you can call it elsewhere as expected.
See this answer for a much lengthier explanation.
In my Dojo build, I'm pulling in some third party libraries.
As I go through the build process, I'm getting errors due to ReferenceErrors.
This is fine. This makes sense.
However, I'd like to tell the Dojo build process about the things that are being referenced. In essence, this would be akin to passing externs to the Closure Compliler.
Thus, my question: How do I tell the Dojo build process about references that it cannot infer from my code base?
This is using Dojo 1.8
I just ran into this myself. Now I'm assuming that the ReferenceErrors you referred to are for browser objects like navigator, window, document, and the like. If so, then this is a problem introduced by the Dojo build process itself, because the build is performed by dojo.js running inside of Rhino where browser global objects are not defined. It's a dojo/Rhino error, not a closure compiler error, so there's nothing you can pass to closure to change this. For example, a script like
(function(){
window.alert("hello");
})();
will break your dojo build if it is included in a dojo layer. When the dojo AMD loader resolves the dependency of a script like the above, it will run the body of the function, resulting in a ReferenceError because window does not exist in Rhino.
To get around this, wrap the script as an AMD module
define([], function(){
window.alert("hello");
});
and then the function body will NOT be executed by the AMD loader during dojo build.