I am using following packages for multi-languages solutions.
var i18next = require('i18next');
var i18nFsBackend = require('i18next-node-fs-backend');
var i18nMiddleware = require('i18next-express-middleware');
Since I am using handlebar as my nodejs template engine, that's I can not use i18next t('key') directly in the HTML.
so I created a handlebar helper like following
```javascript
var i18next = require('i18next');
handlebars.registerHelper('t', function(i18n_key) {
console.log(i18next.language)// always undefined, so i18next.t(i18n_key) always return default translation.
var result = i18next.t(i18n_key);
return new handlebars.SafeString(result);
});
```
However, the problem was the function is unable to detect language changed
My Workaround
app.js
```javascript
var i18nextInitCallback = function(error, t){
handlebars.registerHelper('t', function(i18n_key) {
if(app.locals.language !== i18next.language){
i18next.changeLanguage(app.locals.language);
}
var result = i18next.t(i18n_key);
return new handlebars.SafeString(result);
});
};
```
route
```javascript
router.use(function(req, res, next){
res.locals.lng = req.language;
res.app.locals.language = req.language;
next();
});
```
as you can see that on Route I assign res.app.locals.language = req.language;
and then in the handlebar helper function, I use app.locals.language to get the current language and use i18next.changeLanguage() to change the language.
and it worked.
I would like to know if I am doing it right or not?
or if there is a better solution
Using the handle function of the middleware:
app.use(middleware.handle(i18next, {
// options
}));
res.language gets already set for you and a t function fixed to user language of that request.
see: https://github.com/i18next/i18next-express-middleware/blob/master/src/index.js#L48
check out the handlebars sample: https://github.com/i18next/i18next-express-middleware/tree/master/examples/basic-handlebars
I know some inner functionality inside Webpack. Something about dependencies, template, and module building. However, there is little comment inside its source and no full document site for now. So, i can't chain them all to deal with my problem.
With my current requirement, i need to render specific module with custom source template (similar to this MultiModule in webpack).
Note: To be clear, the generated module's dependency array is not static. For example, one time it may be ['./a', './b', './c'], another time it may be ['./b', './c','./d']. That is up to some dynamic config before build.
For more detail example, i need a module call main.js. In build time, it need to be dynamically generated with target dependencies like(for being not sure which modules would be dependencies):
// main.js
var a = require('./a')
var b = require('./b')
var c = require('./c')
var d = require('./d')
...
In fact, if i only need to dynamically require them all, i can just construct an entry point dynamically.
// webpack.config.js
{
entry: {
main: [
'./a',
'./b',
'./c',
...
]
},
}
and it(webpack) will generate a module may like this：
__webpack_require__(1);
__webpack_require__(2);
__webpack_require__(3);
return __webpack_require__(4);
But i need to do something more:
var a = __webpack_require__(1);
var b = __webpack_require__(2);
var c = __webpack_require__(3);
var d = __webpack_require__(4);
...
// do something with a,b,c,d... under my custom need
...
return somthing or nothing;
As you guys who know about webpack, it's very very complicated and hard to understand and track its plugin(event) hierarchy.
Need some expertise! :)
I'm sorry foy my unclear question before.
However, there is some kind of weird atmosphere. I set up a bounty for attention and guidance. Someone's free-minded answer drove me to make comment with impoliteness somehow. And then some peacemaker shows up with comments unrelated to the question or answer. That sucks.
Focusing on that thing just makes things worse and nothing helped. Not letting it go just means someone has petty mind.
Either lacking attention and lacking expert or not, I have to fight it myself. Fortunately, digging into webpack makes some progress.
Prerequisite
The day before popular webpack, there are fashions like grunt and gulp to construct a custom build flow (with their plugins). They can achieve most of custom requirement, especially generating a custom module(which webpack doesn't have obvious and direct way to deal with).
when you come to do something like automatic collecting custom dependencies, then generating a custom module is the next essential step. It can be commonly seen in product line/family design.
Solutions
#1
This is the simplest and direct way but lack of flexibility.
The source method of MultiModule is to generate the entry module with multi-dependencies. Just overriding it will hit the target.
// hack.js
const MultiModule = require('webpack/lib/MultiModule')
MultiModule.prototype.source = function(dependencyTemplates, outputOptions) {
var str = ['"hello world";\n'];
this.dependencies.forEach(function (dep, idx) {
if (dep.module) {
if (idx === this.dependencies.length - 1)
str.push("module.exports = ");
str.push("__webpack_require__(");
if (outputOptions.pathinfo)
str.push("/*! " + dep.request + " */");
str.push("" + JSON.stringify(dep.module.id));
str.push(")");
} else {
str.push("(function webpackMissingModule() { throw new Error(");
str.push(JSON.stringify("Cannot find module \"" + dep.request + "\""));
str.push("); }())");
}
str.push(";\n");
}, this);
return new RawSource(str.join(""));
}
At the fifth line, i add a string statement "hello world;"\n, nothing else changed.
module.exports = {
entry: {
main: ["./a", "./b"],
}
// something else
}
the output main.js may look like:
//...
/* 0 */
/*!******************!*\
!*** multi main ***!
\******************/
/***/ function(module, exports, __webpack_require__) {
"hello world";
__webpack_require__(/*! ./a */1);
module.exports = __webpack_require__(/*! ./b */2);
/***/ }
//...
Now we can do what we want with the source method, with the compatibility in mind.
#2
This way is much more flexible but also complex.
It requires at lease 5 files(sources are too long, I made them into snippets):
CustomMultiModule.js:
// CustomMultiModule.js
const MultiModule = require('webpack/lib/MultiModule')
const RawSource = require('webpack/lib/RawSource')
class CustomMultiModule extends MultiModule {
constructor(...args) {
super(...args)
}
source(dependencyTemplates, outputOptions) {
var str = ['"hello world";'];
this.dependencies.forEach(function(dep, idx) {
if (dep.module) {
if (idx === this.dependencies.length - 1)
str.push("module.exports = ");
str.push("__webpack_require__(");
if (outputOptions.pathinfo)
str.push("/*! " + dep.request + " */");
str.push("" + JSON.stringify(dep.module.id));
str.push(")");
} else {
str.push("(function webpackMissingModule() { throw new Error(");
str.push(JSON.stringify("Cannot find module \"" + dep.request + "\""));
str.push("); }())");
}
str.push(";\n");
}, this);
return new RawSource(str.join(""));
}
}
module.exports = CustomMultiModule
CustomMultiModuleFactory.js:
// CustomMultiModuleFactory.js
const MultiModuleFactory = require('webpack/lib/MultiModuleFactory')
const CustomMultiModule = require('./CustomMultiModule')
class CustomMultiModuleFactory extends MultiModuleFactory {
constructor() {
super()
}
create(context, dependency, callback) {
callback(null, new CustomMultiModule(context, dependency.dependencies, dependency.name));
};
}
module.exports = CustomMultiModuleFactory
CustomMultiEntryPlugin.js:
// CustomMultiEntryPlugin.js
const MultiEntryPlugin = require('webpack/lib/MultiEntryPlugin')
const MultiEntryDependency = require('webpack/lib/dependencies/MultiEntryDependency')
const CustomMultiModuleFactory = require('./CustomMultiModuleFactory')
class CustomMultiEntryPlugin extends MultiEntryPlugin {
constructor(context, entries, name) {
super(context, entries, name)
}
apply(compiler) {
compiler.plugin('after-plugins', function(compiler) {
compiler.plugin("compilation", function(compilation, params) {
var multiModuleFactory = new CustomMultiModuleFactory();
compilation.dependencyFactories.set(MultiEntryDependency, multiModuleFactory);
})
})
}
}
module.exports = CustomMultiEntryPlugin
CustomEntryOptionPlugin.js:
// CustomEntryOptionPlugin.js
const CustomMultiEntryPlugin = require('./CustomMultiEntryPlugin')
class CustomEntryOptionPlugin {
constructor() {}
apply(compiler) {
compiler.plugin("entry-option", function(context, entry) {
if (typeof entry === "object") {
Object.keys(entry).forEach(function(name) {
if (Array.isArray(entry[name])) {
compiler.apply(new CustomMultiEntryPlugin(context, entry[name], name));
}
});
}
});
}
}
module.exports = CustomEntryOptionPlugin
webpack.config.js:
// webpack.config.js
const CustomEntryOptionPlugin = require('./CustomEntryOptionPlugin')
module.exports = {
entry: {
main: ["./a", "/b"] // this dependencies array may be generated
...
},
output: {
path: path.join(__dirname, "js"),
pathinfo: true,
filename: "[name].[chunkhash].js",
chunkFilename: "[chunkhash].js"
}
plugins: [
new CustomEntryOptionPlugin(),
...
]
...
};
With the code above, we can achieve the same as #1. And we can gain more control over the target entry or other requirements, if we want.
Often in webpack you're only requiring one file, and maybe different libs that the files depend on. If you require main, then webpack is going to resolve the dependencies based on the CommonJS syntax which you can read about here. Does removing the extra requirements in your webpack.config.js file solve this? e.g. having only the following as the config:
// webpack.config.js
{
entry: [ "./main" ],
...
}
It sounds like you don't really understand how webpack works-- the idea of it is to emulate how Node's CommonJS syntax allows your javascript to be modular and placed in separate files, while also being performant and not requiring tons of AJAX requests by your browser. If you want to read more about Webpack's config file, check out this page.
As a side note, returning at the end of the module does absolutely nothing. If you want to export, you can use module.exports, but having a line like return true or something at the end of your main.js file doesn't get caught anywhere meaningful.
I'm using breeze.js to get some serverdata on the client, this works fine. To create a more modular application i want to create a 'dataservice' to bundle the breeze query's in 1 module to be included in other modules as a dependency.
this is the module:
define(function () {
var serviceName = window.location.protocol + "//" + window.location.host + '/breeze/n0uk', // route to the Web Api controller
manager = new breeze.EntityManager(serviceName);
function getPoster(callsign) {
var query = breeze.EntityQuery.from('Posters').where("Callsign","==",callsign);
return manager.executeQuery(query);
};
return {
getPoster:getPoster
};
});
I've created a testmodule to test the function:
define(["common/dataService"],function(n0uk) {
alert("home/index geladen");
n0uk.getPoster("pe1l").then(function(data) {
alert(data.Name);
}
);
});
sadly there is no data returned. I'm a breeze and require newby ( and js experience is also not topnotch). Can someone direct me in the right direction?
In your test module you're executing alert(data.Name). The breeze query will return an object with an array property named results so you probably want to use something like this:
define(["common/dataService"],function(n0uk) {
alert("home/index geladen");
n0uk.getPoster("pe1l")
.then(function(data) {
alert(data.results.length.toString() + ' items returned');
})
.fail(function(reason) { alert(reason); });
});
Other things to try:
Use your browser's F12 tools (or visual studio) to set a breakpoint and inspect the query result.
Use fiddler's "inspectors" tab to confirm your api call is returning data:
For more info on what the executeQuery method returns, look here (scroll to "executeQuery"):
http://www.breezejs.com/sites/all/apidocs/classes/EntityManager.html
I want to load a html content with RequireJS like this:
define(function (require) {
"use strict";
return function (id) {
var url = 'text!screens/' + id + '.html';
var html = require(url);
}; });
But I get this error:
Error: Module name "text!screens/home.html_unnormalized2" has not been loaded yet for context: _
If I try it in this way:
define(function (require) {
"use strict";
return function () {
var html = require('text!screens/home.html');
}; });
everything is ok. But this approach isn't very nice due to hardcore tipped url. How can I solve this?
Inline parametric require calls can only run asynchronously for modules that have not been loaded yet, as is your case. The principle is (also note url is in an array):
var url = 'text!screens/' + id + '.html';
require([url],
function(text) {
// use text
},
function(err) { // OPTIONAL BUT GOOD PRACTICE
// handle error
}
);
This has the inconvenience of not beign able to return the value immediately. Also take a look at the principle of promises (implemented by many libraries, jQuery too).
I'm trying to make a single page application with dynamic content, using durandaljs. For example, if you change the language in your settings, then the UI gets updated. I'm using SignalR to load the objects from the server, and everything works fine apart from when I navigate. The first time I load the view, I'm getting the following error:
Uncaught Error: Unable to parse bindings.
Message: ReferenceError: router is not defined;
Bindings value: compose: {
model: router.activeItem, //wiring the router
afterCompose: router.afterCompose, //wiring the router
transition:'entrance', //use the 'entrance' transition when switching views
cacheViews:true //telling composition to keep views in the dom, and reuse them (only a good idea with singleton view models)
}
but if I reload the page, then the view is displayed correctly.
Here is an example of the viewmodel:
define(function (require) {
var p = require('hubs/myhub'),
rep = require('repositories/myrepository');
var myViewModel = function(data, proxy, cookie) {
var self = this;
self.proxy = proxy;
self.cookie = cookie;
self.Labels = ko.observableArray([]);
try {
self.proxy
.invoke('Setup', self.cookie.Username, self.cookie.Language)
.done(function (res) {
if (res.Result) {
console.log(JSON.stringify(res.Object, null, 4));
self.Labels(res.Object.Labels);
} else {
console.log(res.Error);
}
});
} catch (e) {
console.log(e.message);
}
};
return {
activate: function () {
var cookie = JSON.parse($.cookie(rep.cookieName));
ko.applyBindings(myViewModel({}, p.proxy, cookie), document.getElementById('my_container'));
}
};
});
If I take off the applyBinding of the activate function, then there is no more issue within the navigation. Would there be proper way to do this?
I've modified the return statement for:
return {
myModel: new myViewModel ({ }, p.proxy, JSON.parse($.cookie(rep.cookieName))),
activate: function () {
this.myModel.init();
}
};
and wrapped the signalr call inside an init() function. everything works great now.
That is exactly the right way! DUrandal calls the Ko.applybindings for YOU ;) Meaning Durandal does the binding!
Hot Towel SPA Durandal Knockout and Dynatree