Question

在更改变量后，我无法在Handlebars上下文中获取变量的值。我认为这是一个封闭的问题，但我不知道如何解决这个问题。我有一个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>
// ....

我的所有脚本文件都被写为显示模块模式。它们包括html字符串，把手的上下文/数据和DOM方法。在Render.js中，我有一个简单的函数来渲染模板

var Render = (function() {
    const render = function(template, context, target) {
        let compile = Handlebars.compile(template);
        target.html(compile(context));
    };

    return {
        render : render
    };
    })();

在ImageData中，我存储数据，即获取用户输入。

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;
}

当我在console.log中调用obj时，设置了值。

现在，在第2页上，Handlebars应该从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);

Handlebars可以访问x变量，但永远不会访问新变量“width”。

在把手上下文中更改变量

0 个答案: