I'm using Rails 3.2.16 and require.js ('requirejs-rails' gem).
My app has a module named ExpensesUI (here is a snippet of it):
$(function() {
define('ExpensesUI', ['OperationsUI'], function(operationsUI) {
var expenses = {
operationConsolidatedCheckbox: "#operation_consolidated",
parcelledNoCheckbox: "#operation_parcelled_no",
parcelledYesCheckbox: "#operation_parcelled_yes",
/* more things */
};
}
});
I can use it perfectly in any .js file with:
require(['ExpensesUI'], function(expensesUI) { console.log(expensesUI.parcelledNoCheckbox); });
But when I try the same require call in a .js.erb, I got 'undefined' logged.
It's not possible to use requirejs with *.js.erb files. Just because requirejs get files out of sprockets.
But instead, you can use named modules in *.html.erb views, for instance:
<script>
define('mymodule', function() {
'use strict';
return {
user: <%= #user.to_json.html_safe %>
};
});
</script>
Related
I am new to mocha. My scripts below works when i run from the terminal. However, there is no result when i run from testrunner.html. On checking, it seems to be because of var xl = require('./excel');. if i comment this statement, it works. How can i make this work? i need to import custom modules for my script.
Updated test.js to incorporate RequireJS
Post changes: works on browser and termial
module1.js
if(typeof define !== 'undefined')
{
define([], function() {
return {
get: function() {
return get();
}
};
});
}
else if(typeof exports !== 'undefined') {
module.exports = {
get: function(){
return get();
}
};
}
function get(){
return "hello node world";
}
test.js
if(typeof requirejs == 'undefined') {var requirejs = require('requirejs');}
if(typeof chai == 'undefined') {var chai = require('chai');}
requirejs.config({
baseUrl: '.',
paths: {
},
nodeRequire: require
});
describe("RequireTest()", function(){
var module1;
before(function(done){
requirejs(['./module1'],
function(_module) {
console.log('before fired');
module1 = _module;
if(typeof requirejs == 'undefined') {mocha.run();}
done();
});
});
it('test case: ', function(){
console.log(module1.get());
chai.expect(1+1).to.equal(2);
});
});
testrunner.html (snippet)
<div id="mocha"></div>
<script src="../node_modules/mocha/mocha.js"></script>
<script src="../node_modules/chai/chai.js"></script>
<script src="../node_modules/requirejs/require.js"></script>
<script>mocha.setup('bdd')</script>
<script src="./test.js"></script>
<script>mocha.run();</script>
When you run Mocha at the command line you are using Node.js, which provides require.
When you run it in the browser, there is no require that the browser provides. You need to use a module loader at run-time like RequireJS or SystemJS. Or you need to use a packager like Webpack or Browserify that will process your code beforehand and turn it into a single bundle that incorporates all your code.
Note that whether third-party modules you use can be loaded in a browser, is a determination you have to make module-by-module. If you use a module that uses Node's child_process module to spawn a new process, for instance, you won't be able to just use that module in the browser because browsers don't provide child_process.
I am new to mocha. My scripts below works when i run from the terminal. However, there is no result when i run from testrunner.html. On checking, it seems to be because of var xl = require('./excel');. if i comment this statement, it works. How can i make this work? i need to import custom modules for my script.
Updated test.js to incorporate RequireJS
Post changes: works on browser and termial
module1.js
if(typeof define !== 'undefined')
{
define([], function() {
return {
get: function() {
return get();
}
};
});
}
else if(typeof exports !== 'undefined') {
module.exports = {
get: function(){
return get();
}
};
}
function get(){
return "hello node world";
}
test.js
if(typeof requirejs == 'undefined') {var requirejs = require('requirejs');}
if(typeof chai == 'undefined') {var chai = require('chai');}
requirejs.config({
baseUrl: '.',
paths: {
},
nodeRequire: require
});
describe("RequireTest()", function(){
var module1;
before(function(done){
requirejs(['./module1'],
function(_module) {
console.log('before fired');
module1 = _module;
if(typeof requirejs == 'undefined') {mocha.run();}
done();
});
});
it('test case: ', function(){
console.log(module1.get());
chai.expect(1+1).to.equal(2);
});
});
testrunner.html (snippet)
<div id="mocha"></div>
<script src="../node_modules/mocha/mocha.js"></script>
<script src="../node_modules/chai/chai.js"></script>
<script src="../node_modules/requirejs/require.js"></script>
<script>mocha.setup('bdd')</script>
<script src="./test.js"></script>
<script>mocha.run();</script>
When you run Mocha at the command line you are using Node.js, which provides require.
When you run it in the browser, there is no require that the browser provides. You need to use a module loader at run-time like RequireJS or SystemJS. Or you need to use a packager like Webpack or Browserify that will process your code beforehand and turn it into a single bundle that incorporates all your code.
Note that whether third-party modules you use can be loaded in a browser, is a determination you have to make module-by-module. If you use a module that uses Node's child_process module to spawn a new process, for instance, you won't be able to just use that module in the browser because browsers don't provide child_process.
I have a firefox extension that opens up a tab with a html file that is located in my data folder. The main.js does this:
function handleClick(state) {
tabs.open("login.html");
}
In main.js I require() a bunch of scripts to run as background scripts. This html file acts as the "login" for the extension. How can this html page have access to the background scripts?
It can't. You'll need to attach a content script to your login page and to send variables to it the standard way using port.
Also, does your code work? Don't you need to require(sdk/self).data to get access to login.html?
Here's an example of what you can do.
main.js
const { data } = require('sdk/self');
function handleClick(state) {
tabs.open({
url: data.url('login.html'),
onOpen: function(tab) {
var worker = tab.attach({
contentScriptFile: data.url('login.js')
});
worker.port.emit('foo', foo);
worker.port.on('bar', handleBar);
}
});
}
function handleBar(bar) {
// do something with bar;
}
login.js
self.port.on('foo', function(foo) {
// do something with foo
});
self.port.emit('bar', bar);
I'm spent days trying to work out how to use the kendo-ui component with Durandal but to no avail.
I've managed to add a kendo-ui component declaratively on the page i.e. . This has no problems.
However, I would like to do some animations based on page events. Coding directly in the javascript viewmodel makes it easier to manipulate afterwards.
I've added my code below (which doesn't work), and I'm not sure that I'm taking the right approach. Actually, I'm sure I'm not. Anyone who can point me in the right direction I would appreciate it.
Any help or suggestions are welcome
Main.js
requirejs.config({
paths: {
'text': '../lib/require/text',
'durandal':'../lib/durandal/js',
'plugins': '../lib/durandal/js/plugins',
'transitions' : '../lib/durandal/js/transitions',
'jquery': '../lib/jquery/jquery-1.9.1',
'kendo': '../lib/kendo/kendo.ui.core.min',
'knockout': '../lib/knockout/knockout-3.1.0',
'bootstrap': '../lib/bootstrap/js/bootstrap',
'toastr': '../lib/toastr/toastr',
'lib': '../lib'
},
shim: {
'kendo': { deps: ['jquery'], exports: 'kendo' },
'bootstrap': {deps: ['jquery'],exports: 'jQuery'}
}
});
define(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'durandal/binder', 'kendo'], function (system, app, viewLocator, binder, kendo) {
app.title = 'My Jumpstart';
//specify which plugins to install and their configuration
app.configurePlugins({
router:true,
dialog: true,
widget: {
kinds: ['expander']
}
});
kendo.ns = "kendo-";
binder.binding = function (obj, view) {
kendo.bind(view, obj.viewModel || obj);
};
app.start().then(function () {
viewLocator.useConvention();
app.setRoot('shell');
});
});
index.js
define(['durandal/app', 'durandal/system', 'knockout', 'toastr', 'kendo'],
function (app, system, ko, toastr, kendo) {
var myButton = function () {
var kbutton = $("#myButton").kendoButton();
};
var vm = {
myButton: myButton
};
return vm;
});
index.html
<section>
<div id="myButton">My Kendo Button</div>
</section>
Instead of shimming, add the Kendo libraries via the <script> tag on your index.html page. Be sure to add it after jQuery.
Also, are you using the knockout-kendo library from Ryan Niemeyer? That would affect my answer.
I am creating an MVC3 application, with requireJS. In my views I need to convert the Model object into a knockout viewmodel object. So I need to use knockout and knockout.mapping libraries.
My application is designed in the following way,
1). All the script files are categorized into folders
Scripts/app/home/ - contains the scripts for the views in Home controller.
Scripts/lib/ - contains the scripts like jQuery, knockout,knockout.mapping, requirejs etc
2). In the "_Layout.cshtml" I am referencing "require.js" like this.
<script src="#Url.Content("~/Scripts/lib/require.js")" type="text/javascript"></script>
3). To configure the require.js settings I am using a different script file called "common.js" (Scripts/lib/common.js)
require.config(
{
baseUrl: "/Scripts/",
paths:{
jquery: "lib/jquery-2.0.3",
ko: "lib/knockout-2.3.0",
komapping: "lib/knockout.mapping"
}
});
4). This is my index.js file which is in 'Scripts/app/home/"
define(['ko', 'komapping'], function (ko, komapping) {
var person = function () {
var self = this;
self.getPersonViewModel = function (data) {
return ko.mapping.fromJS(data); ;
};
};
return { Person: person };
});
5). This is my "Index" action method in the "Home" controller
public ActionResult Index()
{
var person = new Person
{
Id = 1,
Name = "John",
Addresses = new List<Address>(new[]{new Address{Country = "Country 1", City = "City 1"}})
};
return View(person);
}
6). Finally this is my "Index" view
#model MMS.Web.Models.Person
<script type="text/javascript">
require(["/Scripts/common/common.js"], function () {
require(["app/home/index"], function (indexJS) {
var person = new indexJS.Person();
var vm = person.getPersonViewModel(#Html.Raw(Json.Encode(Model)));
});
});
</script>
The problem which I am facing is when loading the index.js file, I get a script error that the knockout.js cannot be loaded.
Failed to load resource: the server responded with a status of 404 (Not Found) - http:///Scripts/knockout.js
But if I remove the dependency of "komapping" inside the "index.js" file it loads correctly, but then I cannot use the mapping functionality.
I had a look inside these links, but couldn't find a solution,
Knockout.js mapping plugin with require.js and
https://github.com/SteveSanderson/knockout.mapping/issues/57
Your help, suggestions are much appreciated. Thanks!
I had the same issue. The problem is that the knockout.mapping defines a knockout dependency, so you need to satisfy this one when you load the script.
Here is how you should load your mapping stuff
require.config(
{
baseUrl: "/Scripts/",
paths:{
jquery: "lib/jquery-2.0.3",
knockout: "lib/knockout-2.3.0",
komapping: "lib/knockout.mapping"
},
shim: {
komapping: {
deps: ['knockout'],
exports: 'komapping'
}
}
});
Then in my case, I use an index.js file with a requirejs call like the following
requirejs(['jquery', 'knockout', 'komapping'], function($, ko, komapping){
ko.mapping = komapping;
//Do other stuff here
});