Am trying to build an app using Haxe and CreateJS (externs).
I am running into an issue with loading manifests.
Here is the code:
function loadAssets():void
{
var _manifest:String = "assets/manifests/mymanifest.json";
_queue = new LoadQueue(true);
_queue.on("complete", onQueueComplete);
_queue.on("error", onQueueError);
_queue.loadManifest([_manifest]);
}
contents of mymanifest.json:
{
"path" : "assets/images/main_menu/",
"manifest" :
[
{"id" : "mm_background", "src" : "background.jpg", "type":"Image"},
{"id" : "mm_adv_off", "src" : "advanSelectOff.jpg", "type":"Image"},
{"id" : "mm_adv_on", "src" : "advanSelectOver.jpg", "type":"Image"},
{"id" : "mm_tech_off", "src" : "techSelectOff.jpg", "type":"Image"},
{"id" : "mm_tech_on", "src" : "techSelectOver.jpg", "type":"Image"},
{"id" : "mm_app_off", "src" : "appSelectOff.jpg", "type":"Image"},
{"id" : "mm_app_on", "src" : "appSelectOver.jpg", "type":"Image"}
]
}
I notice that mymanifest.json gets loaded, however none of the images get loaded.
onQueueError does not trigger, so I don't think there is a typo or malformed error...
How I verified:
I look at the console in the browser, and viewed the network load...
console shows no error traces or the sort. Network does not show any loads of the images...
I am fairly certain that your manifest is just getting loaded as JSON, and that there is nothing that identifies it as a manifest.
Force the manifest type
Since you are adding the manifest as an Array with one item, it just interprets it as a plain JSON file (due to the extension). To flag it as a manifest, you can include a type to indicate to PreloadJS that the JSON file is a manifest.
Example:
_queue.loadManifest([
{src: _manifest, type: "manifest"}
]);
OR: Pass the manifest file directly
Pass the manifest as the only argument, instead of an Array containing the manifest. If the loadManifest method receives one argument, it assumes it is either:
An Array of load items (which is what your demo is doing)
A manifest Object (basically the contents of your JSON, but as JavaScript)
A single file path that is a manifest.
Example:
_queue.loadManifest(_manifest); // No square brackets
That should tell PreloadJS to load the JSON, parse it, check for a manifest property of the result, and load it.
Related
I seem to be having an issue accessing a value from a mixin when trying to use bracket notation. I have the following setup:
// in webpack plugins
new HtmlWebpackPlugin({
hash: true,
template: './assets/template/about.pug',
filename: 'about-us.html',
inject: true,
page: 'about',
locals: require('./assets/data.json'),
chunks: ['about']
}),
The json
// data.json (snippet)
{
"pages" : {
"about" : {"title" : "About Us","metaDesc" : ""},
}
}
Pug mixin
mixin pageTitle(thePage)
title= htmlWebpackPlugin.options.locals.pages[thePage].title
Using pug mixin
+pageTitle(htmlWebpackPlugin.options.page)
I get an error Cannot read property 'title' of undefined.
If I change that to htmlWebpackPlugin.options.locals.pages.about.title it will parse just fine.
If I change that to htmlWebpackPlugin.options.locals.pages[thePage] it will return [object Object] but I can't access any properties.
If I change that to htmlWebpackPlugin.options.page or just use thePage then "about" will be rendered.
I've done a typeof to check if it's a string. It is. I've tried putting it into a variable first. Same issue.
Any thoughts?
Why do you need notation in brackets? What is the purpose of this?
This record works title = thePage.pages.about['title']
I prefer the following entry ;)
In the file about.pug, make an entry at the very top.
block variables
- var path = self.htmlWebpackPlugin.options
You pass on to the function
// locals is the path to your json file
+pageTitle(path.locals)
Mixin should look like this
mixin pageTile(thePage)
title = thePage.pages.about.title
Here you have the whole example in addition with generating multiple subpages with pug-loader → photoBlog
Im writing a spring cloud contract for a http request , with a json body which one of its field (lets call it myMap) should be a non empty map (string to string) . So the requester(aka consumer) have to have something like this :
"myMap": {"key": "val"}
Is it possible to enforce such thing in the contract ?
here an example for an existing contract i wrote just to make sure of the context:
package contracts
org.springframework.cloud.contract.spec.Contract.make {
description("""
Represents a successful scenario of registering new host
given:
hostProperties are valid
then:
we'll register the host
""")
request {
method 'POST'
urlPath value(consumer(~/\/api\/hosts\/[a-zA-Z0-90-9]+/), producer('/api/hosts/icsl7875'))
body([
timeStamp : $(consumer(anyNumber()), producer(334)),
hyperThreaded : $(consumer(regex('^(true|false)$')), producer(false)),
virtualMachine: $(consumer(regex('^(true|false)$')), producer(false)),
poolName : $(consumer(regex('(.+)')), producer("dev_regression")),
osImage : $(consumer(regex('(.+)')), producer("osImage1")),
cores : $(consumer(anyNumber()), producer(2)),
memory : $(consumer(anyNumber()), producer(256)),
osRelease : $(consumer(regex('(.+)')), producer("osRelease1")),
wsmVeriosn : $(consumer(regex('(.+)')), producer("8.2.16")),
cpuCount : $(consumer(anyNumber()), producer(2445L)),
cpuMhz : $(consumer(anyNumber()), producer(22354L)),
cpuMips : $(consumer(anyNumber()), producer(256F))
])
headers {
contentType(applicationJsonUtf8())
}
}
response {
status 201
body([
groupId: $('067e6162-3b6f-4ae2-a171-2470b63dff00')
])
headers {
contentType(applicationJson())
}
}
}
FOR REQUEST
I think you can use the stubMatcher section. JSON Path in WireMock should be resolved only if an entry is present. So if you pass in the stubMatcher a proper json path and validate it byEquality then it should be ok.
FOR RESPONSE:
You can use the testMatcher section and delegate together with byCommand (https://cloud.spring.io/spring-cloud-contract/1.0.x/#_dynamic_properties_in_matchers_sections) . In the method you'll have to verify that the entry is non empty. In the docs there's sth like this jsonPath('$.duck', byCommand('assertThatValueIsANumber($it)')) . You'll need to do sth similar but assert that the entry is non empty.
I'm trying to optimize my javascript project with r.js optimizer from requirejs. I use both amd and non-amd modules in my project. There will be two environments, one with requirejs environment and the other with no requirejs environment.The files at the non-requirejs environment should not have on require or define calls. While combining amd-modules into bundles using r.js it is fine to have a define call with bundle name at the end of the file. But for the non-requirejs environment after the files have been optimized, they are also getting a define insertion at the end of the file with the module name.
Let's take I have four files A and B which are AMD-modules and C and D are non-AMD modules.
my build.js is like this
({
appDir: "../",
baseUrl: "./",
dir : "../../../output",
paths: {
A : '../somepath/to/A',
B : '../somepath/to/B'
},
modules : [
{
name : 'bundle1',
create : true,
include : ['A', 'B']
},
{
name : 'bundle2',
create : true,
include : ['C', 'D']
}
],
// removeCombined : true,
cjsTranslate: false,
optimizeCss : "none",
skipModuleInsertion: true,
optimize: "uglify",
fileExclusionRegExp: /^(((r|app.build)\.js)|(v0))$/,
keepBuildDir: false,
bundlesConfigOutFile: "bundles.js",
onModuleBundleComplete : function(data) {
console.log(data)
}
})
This is the bundles amd-file looks like.
define('A', function(){
//some stuff of A
});
define('B', function(){
//some stuff of B
});
define('bundle1',function(){});
The bundled non-amd file looks like
//some stuff of C
});
//some stuff of D
define('bundle2',function(){});
How to resolve this situation. I have gone through the optimization docs and example.build.js. still couldn't figure out the way. Am I missing something ? Is there a way to exclude that define call at the end of the non-amd-modules. If yes, How ?
I see you have used skipModuleInsertion option which based on the documentation should have helped you. I am not sure why it didn't.
Another option you can use is after the build is complete before writing to file, you can remove that particular define call using onBuildWrite
I just started using RequireJS. I tried a simple code but one way works but the other doesn't.
folder "script" has "main.js", "module.js", "require.js"
<script data-main="script/main.js" src="script/require.js"></script>
in main.js
requirejs( ['module'], function( mod ) {
mod.sayHello();
} );
in module.js:
define( {
name : "value",
sayHello : function() {
alert( "Hello" );
},
sayBye : function() {
alert( "Bye" );
}
} );
I expect baseUrl to be "script" as mentioned in here:
http://requirejs.org/docs/api.html#jsfiles
The baseUrl is normally set to the same directory as the script used in a data-main attribute for the top level script to load for a page.
So, I thought there would be no problem, but doesn't mod.sayHello() nor sayBye() and console.log( mod.name ) = undefined.
I tried console.log( mod ) and it prints something like this:
Object {id: "_#r6", uri: "script/_#r6.js", exports: Object}
When I use ["script/module.js"] instead of ["module"], console.log( mod ) prints like the following:
Object {name: "value"}
name: "value"
sayBye: ()
sayHello: ()
__proto__: Object
and mod.sayHello(), mod.sayBye(), mod.name all works.
including the following in the beginning of main.js is the same:
requirejs.config( {
baseUrl: "script"
} );
What am I doing wrong... Please help.
Use a different name than module for your module. For one thing, it is a terribly uninformative name, but the module named module is a special module for RequireJS. It is a module that gives information about the module you are currently in. For instance if foo.js contains this code:
define(['module'], function (module) {
console.log(module.id);
});
and this file is loaded when you request the module named foo, then console.log will show "foo" on the console.
The documentation does not highlight the existence of module but it talks about it when explaining what the configuration option config does. Because you get to access the config of your module through module.config().
The reason requiring "script/module.js" works is because when you do this you require a module named script/module.js rather than module.
I continued reading the documentation:
http://requirejs.org/docs/api.html
and it led to a github that has information about this:
https://github.com/jrburke/requirejs/wiki/Differences-between-the-simplified-CommonJS-wrapper-and-standard-AMD-define#magic
It turns out that "module" is a kind of "magic modules" along as "require", "export".
And "module" ... :
gives you information about the module ID and location of the current module
https://github.com/jrburke/requirejs/wiki/Differences-between-the-simplified-CommonJS-wrapper-and-standard-AMD-define#module
After another long research, sth comes out :-) It seems the problem is about the function "getObjectByName". It can not work well with requireJS(ADM). Currently, I have to setup a globel var to fix the problem. I am sure there must be have better solution.
Here is my temp soluton:
(1) setup a global var and setup the search model scope to the global ("APP")
var APP = {};
define(['backbone-relational'], function(){
Backbone.Relational.store.addModelScope(APP);
})
(2) export your relation model to the global
APP.YourRelationalModel = YourRelationModel;
It works, not good though... I'm really looking forward to a better answer. Thanks.
//------------
test versions:
1.Backbone-Relational 0.8.5
2.Backbone 1.0.0 and Underscore 1.4.4
3.JQuery 1.8.3
4.RequireJS 2.1.5
Code is very simple: (or see https://github.com/bighammer/test_relational_amd.git)
require.config({
paths : {
js : 'js',
jquery : 'js/jquery-1.8.3',
underscore : 'js/underscore',
backbone : 'js/backbone',
'backbone-relational' : 'js/backbone-relational'
},
shim : {
underscore : {
exports : '_'
},
backbone : {
deps : ['underscore', 'jquery'],
exports : 'Backbone'
},
'backbone-relational' : {
deps: ['backbone']
}
}
});
define(['backbone', 'backbone-relational'], function (Backbone) {
var Child = Backbone.RelationalModel.extend();
var Parent = Backbone.RelationalModel.extend({
relations : [
{
key : 'child',
type : Backbone.HasOne,
relatedModel : 'Child'
}
]
});
var test = new Parent();
});
save above code in main.js and included in index.html as follows:
It doesn't work. There is warning message:
Relation=child: missing model, key or relatedModel (function (){ return parent.apply(this, arguments); }, "child", undefined).
I read the source code of backbone-relational and know there is something wrong with the namespace. Relational-Backbone cannot find the relatedModel defined in "Parent" (i.e. cannot find releatedMode:"Child"). I failed to find the solution to fix this due to my limited knowledge of javascript :-)
Can anyone help me with this?
Before I asked my question, I studied the following solutions:
Backbone.RelationalModel using requireJs
Can't get Backbone-relational to work with AMD (RequireJS)
Loading Backbone.Relational using Use! plugin
None of them worked in this case.
You don't have to reference relatedModel by string, you can reference it directly, so instead of relatedModel: 'Child', just use: relatedModel: Child.
And since you are using requireJS, you can reference model from other file easily.
define(['backbone', 'models/child', 'backbone-relational'], function (Backbone, Child) {
var Parent = Backbone.RelationalModel.extend({
relations : [{
key : 'child',
type : Backbone.HasOne,
relatedModel : Child
}]
});
var test = new Parent();
});
The above solution didn't apply to me. I am gradually moving code out of Rails Asset Pipeline (not RequireJS/AMD/CommonJS/anything) into Webpack, starting with dependencies. When I moved requiring backbone-relational into Webpack bundle preparation by my models and relation definitions were still in Rails Asset Pipeline, I started getting a lot of unexplained Relation=child: missing model, key or relatedModel (function (){ return parent.apply(this, arguments); }, "child", undefined).
In my case, the solution ended up being quite simple, despite taking a long time to discover on my part:
// In a Webpack module, later included into Rails Asset Pipeline
// temporarily to facilitate migration
require('expose?Backbone!backbone') // Exposing just for migration
require('backbone-relational')
Backbone.Relational.store.addModelScope(window)
backbone-relational by default uses its global scope to resolve string-based relatedModels but since it was required without a real global scope, the solution is simply to pass that in using addModelScope so it can search that scope for the specified models.