我们使用backbone和require.js构建了一个小部件应用程序。它在页面上有一个应用实例很酷。现在我们有了新的要求。我们需要在同一页面上运行多个小部件实例。每个应用程序都有自己的配置。
以下测试代码无法正常工作:
for(var i=0;i<3;i++){
require([ "app" ], function(app) {
var bootstrap = {};
jQueryPB(function() {
app.testData = i;
app.startup();
});
});
}
我想知道如何实例化多个应用并为它们设置不同的配置?
项目结构类似于:
/main.js
require.config({
....
});
/*code to create multiple instances*/
require(["app"], function(app){
var instance = new app(color:"yellow");
var instance2 = new app(color:"red");
instance.render();
instance2.render();
/*want to create multiple instances here to same page*/
})
/*above code is not working, TypeError: app is not a constructor*/
/app.js
define([ "jQueryPB", "backbone", "underscore", "models/app", "views/app" ], function($jpb,
Backbone, _, appModel, appView) {
var appInfo = new appModel();
var app = new appView({
model : appInfo
});
return app;
});
/models/app.js
/views/app.js
/view/bags.js
/ view / bag(它通过var app = require(“app”)引用app,以便它可以访问app.color)
/收集/袋
/模型/袋
我使用r.js将所有js编译成一个
节点r.js -o build.js optimize = none
完全下载main.js后,它将开始初始化不同的应用实例。
=============================================== ==更新代码
冷却。我用类似的方式尝试过:
main.js
require(["app"], function(app){
var instance = new app({
testData : 1
});
instance.testData = "1";
instance.startup();
})
app.js
define([ "jQueryPB", "backbone", "underscore", "models/app", "views/app" ], function($jpb,
Backbone, _, appModel, appView) {
return function app(color) {
var appInfo = new appModel();
var app = new appView({
model : appInfo
});
console.log(">>"+color.testData);
app.testData = color.testData;
return app;
};
});
问题在于bag.js,它需要访问app中的自定义变量。我使用var app = require(“app”);的console.log(app.testData);但输出未定义。是否有不同的方式来访问应用实例?
此外,如果需要(“app”),如果有多个应用实例会导致问题吗?
答案 0 :(得分:0)
问题是,require
是一个异步函数,不会立即执行,当它最终执行时,i
的值将会发生变化。最终,您最终将所有实例共享相同的i
值,因为循环将在第一个require
回调执行之前完成。 See here
你可以通过在循环的每次迭代周围创建一个闭包来解决这个问题。这样,i
的原始值将保留在require回调的范围内。
for (var i = 0; i < 3; i++) {
(function (i) {
require(["app"], function (app) {
// etc
});
})(i);
}