Javascript 更改把手上下文中的变量

更改变量后，无法在Handlebar上下文中获取变量的值。我认为这是一个克洛瑟问题，但我不知道如何解决这个问题。 我有一个index.html文件，其中包含指向不同.js文件的链接

// index.html
</head>
// links to jquery, handlebars etc.
    <script src="src\js\Renders.js"></script>
    <script src="src\js\ImageData.js"></script>
    <script src="src\js\app.page1.js"></script>
    <script src="src\js\app.page2.js"></script> 
</head>
// ....

在ImageData中，我存储数据，即get-buy用户输入

var Images = (function() {
    let image_array =  [],
    image_data = {x:3};

    let addImage = function(fileList) {
        _.forEach(fileList, file => {
            if(!_.some(image_array, obj => obj.name === file.name)) {
               file.src = window.URL.createObjectURL(file);
               image_array.push(file);
            }
        });
    };

    return {
        image_array             :   image_array,
        image_data              :   image_data,
        addImage                :   addImage            
    };
    })();

现在，在第1页，我想在image_data obj上添加如下值：

function() {
return IMG.image_data.width = 100;
}

当I console.log对象时，设置该值

现在，在第2页，车把应该从obj中获取新值，并在上下文中呈现它

var App = App || {};
App.settings = (function(IMG, XHB, $) {
    'use strict';

    const templates = {
      main : String()
        + '<main id="page">' //....
const context = {
        image_data : [
            { value : Images.image_data.width },  
            { value : Images.image_data.x}
        ];
    let initModule = function ( $target_container) {
        XHB.render(templates.main, context, $target_container);
        })
    };  
    return { initModule : initModule };
})(Images, Render, jQuery);

var-App=App | |{}；
App.settings=（函数（IMG，XHB，$）{
"严格使用",；
常量模板={
main:String（）
+ '' //....
常量上下文={
图像数据：[
{value:Images.image_data.width}，
{value:Images.image_data.x}
];
让initModule=function（$target\u容器）{
render（templates.main，context，$target_容器）；
})
};  
返回{initModule:initModule}；
})（图像、渲染、jQuery）；

---

把手可以访问x变量，但不能访问新变量“宽度”。

page1.js中的

IMG

是什么？看起来应该是

Images

。IMG是图像的快捷方式。它与第2页上的一样重要。这很好。您正在为“page1”共享的代码片段无效语法。请描述原因？我认为问题不在于语法错误，因为使用console.log，我可以看到Images.image_data.width的值在函数调用后设置为100。我认为问题在于，在第一次加载时，当IIFE运行时，“width”的值未定义。此未定义的值将传递给Handlebars编译上下文。因此，如何在值“width”之后调用XHB.render方法已从未定义更改为100。在初始化

上下文之前，为什么不添加一些
控制台.log
s并确保
100
已分配给Images.image\u data.width？
var App = App || {};
App.settings = (function(IMG, XHB, $) {
    'use strict';

    const templates = {
      main : String()
        + '<main id="page">' //....
const context = {
        image_data : [
            { value : Images.image_data.width },  
            { value : Images.image_data.x}
        ];
    let initModule = function ( $target_container) {
        XHB.render(templates.main, context, $target_container);
        })
    };  
    return { initModule : initModule };
})(Images, Render, jQuery);