I am using requirejs + jquery + sammy.js + hamljs.
The template engine haml is not working : it runs sammy.haml, but Haml is defined for main.js but not for sammy.haml and cannot run in it. After the page is completely loaded, Haml exists for the console. Why Sammy does not get on well with HAML whereas it should be ?
requirejs.config({
baseUrl: '../../components/',
paths: {
dropkick: 'jquery-dropkick2/jquery.dropkick-1.0.0',
Ladda: 'Ladda/dist/ladda.min',
'jquery-autosize': 'jquery-autosize/jquery.autosize',
mixitup: 'mixitup/jquery.mixitup.min',
jquery: 'jquery/jquery',
sammy: 'sammy/lib/sammy',
'sammy.haml': 'sammy/lib/plugins/sammy.haml',
haml: 'haml/lib/haml',
browser: 'jquery.browser/jquery.browser.min'
},
shim: {
dropkick: {
deps: ['jquery']
},
browser: {
deps: ['jquery']
},
'sammy.haml': {
deps: ['haml']
}
}
});
requirejs(['jquery', 'haml'], function($, Haml) { // They are to be loaded first
requirejs(['sammy', 'sammy.haml', 'browser', 'markdown'], function(sammy, shaml, markdow) { // Then the others
console.log(Haml); // WORK
var app = sammy('#main', function() {
var self = this;
self.use(sammy.Haml);
self.get('/upload', function(context) {
context.app.swap('');
var s = context.render('app/templates/upload.haml', {});
s.appendTo(context.$element())
});
});
});
app.run();
});
});
Finally found the solution ! I defined window.Haml = haml in the main file, and modified sammy.haml.js to get window.Haml function instead of Haml function.
Related
I'm trying to use willmcpo/body-scroll-lock on my magento 2 site, but I don't think I'm including the body-scroll-lock lib correctly as it says:
TypeError: disableBodyScroll is not a function
Does anyone know what is the correct way to do this please?
main.js
require([
'jquery',
'bodyScrollLock'
], function ($) {
$(function(){
const
// bodyScrollLock = require('body-scroll-lock');
disableBodyScroll = bodyScrollLock.disableBodyScroll,
enableBodyScroll = bodyScrollLock.enableBodyScroll,
scrollMobileMenu = document.querySelector('.mobile-menu');
disableBodyScroll(scrollMobileMenu);
});
});
requirejs-config.js
var config = {
map: {
"*": {
'bodyScrollLock': 'js/libs/bodyScrollLock'
}
},
deps: [
'bodyScrollLock'
]
};
Figured it out I just needed to include bodyScrollLock here
], function ($, bodyScrollLock) {
I actually have two questions concerning requirejs and singleton objects. I want to form a singleton object playing the role of my application core and pass it to modules as a parameter. How should this be done?
The other issue I have is related to a private object inside the application core. It's suppose to act as a container for modules but for some reason when I try to start the application, this container seems to have those modules but it can't be looped through. Any ideas why this is happening?
Here's an example code of the situation:
// applicationConfig.js
require.config({
baseUrl: 'js',
paths: {
jquery: 'jquery-3.1.1.min',
core: 'utils/applicationCore',
domReady: '../lib/domReady'
}
});
require(['modules']);
// modules.js
define(['core', 'domReady'], function(Core, domReady) {
require([
'modules/module1'
]);
domReady(function() {
var modules = Core.getModules();
var name = '';
for (name in modules) {
modules[name].creator(); // Start a module...
}
});
});
// applicationCore.js
define(function() {
return (function() {
var _modules = {};
return {
add: function(name, creator) {
_modules[name] = {
creator: creator
};
},
getModules: function() {
return _modules;
}
}
}());
});
// module1.js
define(['core', 'jquery'], function(Core, $) {
Core.add('module1', function() {
// Module constructor function.
});
});
This is the plugin
https://github.com/jamesfoster/knockout.observableDictionary
Here is a fiddle showing the problem I am experiencing:
https://jsfiddle.net/L4d84nqc/1/
Code:
requirejs.config({
paths: {
'ko': 'https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min',
'ko.observableDictionary' : 'https://rawgithub.com/jamesfoster/knockout.observableDictionary/master/ko.observableDictionary'
},
shim: {
'ko.observableDictionary' : {
deps: ['ko']
}
}
});
require(['ko', 'ko.observableDictionary'], function(ko) {
console.log(ko);
});
I dont think there is a way to add a property via the require registration (could be wrong?). I would simply add the .js file to the bundle, or in the page, and modify the library js like so...
require(["ko"], function(ko){
(function (ko) {
function DictionaryItem(key, value, dictionary) {
.............. all that yummy code
}
})(ko)
});
So here's my main.js file (stripped out all my other scripts for clarity):
require.config({
paths: {
'soundmanager2': '../libs/soundmanager2/soundmanager2',
},
shim: {
'soundmanager2': {
'exports': 'soundManager'
}
}
});
Then i'm loading the library like so:
define(['jquery', 'underscore', 'backbone', 'utilities/events', 'utilities/helpers', 'soundmanager2'],
function($, _, Backbone, events, h, soundManager){
var TrackModel = Backbone.Model.extend({
initialize: function() {
console.log(soundManager);
}
});
return TrackModel;
}
);
The script is being downloaded - but when I log soundManager, I get undefined, no other errors.
Any ideas? Fear i'm missing something obvious..
I found the usage with requirejs in source code comment, but documentation no description. Here is the example.
define(['soundManager2'], function(SoundManager) {
var sound = SoundManager.getInstance();
sound.setup({
useHTML5Audio: true,
idPrefix: '',
onready: function() {},
ontimeout: function() {}
});
sound.beginDelayedInit();
})
This was an issue with the version of soundmanager2 - it has AMD baked in but I can't get it to export for some reason. I reverted to an earlier version, used the shim, and that fixed it!
I have been working on a new project for sometime and recently started using require.js in the project.
It all seemed to work fine until I tried making a call from application.js to dashboard.js when the tab #dailyTab or #weeklyTab was clicked or access varialbe var a in dashboard,js. My code is below
main.js
requirejs.config({
baseUrl : '../static/js/',
paths : {
'jquery' : 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min',
'jquery-ui' : 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min',
'bootstrap' : ['//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min', 'bootstrap.min'],
},
shim : {
'bootstrap' : ['jquery'],
'bootswatch' : ['bootstrap'],
}
});
require(["jquery", "jquery-ui", "bootstrap", "dashboard", "application"], function($, jui, bootstrap, dashboard, application) {
$("#myTab a:first").tab("show");
}, function(err) {
console.log(err)
});
dashboard.js
define(function() {
var a = 10;
var Reload = {
dailyCharts : function() {
console.log("Daily Charts");
},
weeklyCharts : function() {
console.log("Weekly Charts");
}
};
var Display = {
none : function(node) {
console.log("none");
},
block : function(node) {
console.log("block");
}
}
});
application.js
define(["jquery", "dashboard"], function(jquery, dashboard) {
$("#dailyTab").click(function() {
dashboard.Reload.dailyCharts();
});
$("#weeklyTab").click(function() {
dashboard.Reload.weeklyCharts();
});
});
Can someone tell me what I have done wrong or what I can do to fix this issue. I accept my coding skills is not very good.
Any help on this is much appreciated.
Thanks in advance
Well, your dashboard.js didn't return anything. How would application.js use it?
define(function() {
var a = 10;
var Reload : {...};
var Display : {...};
//return the interface
return {
Reload : Reload,
Display : Display
}
});