Question

我正在开发Flask应用程序，其中一些数据传递给模板，我想让这些数据可用于对象的多个实例。如果我只是将所需的数据硬编码到我的.js文件中，那就是它的样子：

var Module = function(selector) {
    var targetDiv = selector,
    targetData = 'lorem ipsum sit dolor',
      
    show = function() {
        $('<p>' + targetData + '</p>').appendTo(targetDiv);
    };
  
    return {
        show: show,
    };
};

$(document).ready(function() {
    firstModule = new Module($('#first'));
    secondModule = new Module($('#second'));
  
    firstModule.show();
    secondModule.show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='first'></div>
<div id='second'></div>

我不能只在未构造的Module对象上调用函数，所以我的下一步是创建一个类似静态的ModuleFactory，我可以使用jinja中的数据加载，然后从那里创建模块：< / p>

var ModuleFactory = function() {
    var targetData = null,

    setData = function(data) {
        targetData = data;
    },

    create = function(selector) {
        return new Module(selector, data);
    };

    return {
        setData: setData,
        create: create,
    };
} ();

然后，我尝试从HTML中的ModuleFactory.setData({{data}});标记中调用<script>，并在.js

中执行ModuleFactory.create($('#first')).show();之类的操作

但是当然因为我必须在HTML中使用ModuleFactory之前包含我的.js文件，所以我最终在初始化工厂之前构造对象。

（过去这一点，我的解决方法尝试不再与问题相关。）

无论如何，从Jinja获取数据到JS模块的正确方法是什么？必须有一个共同的模式或东西。

Answer 1

这感觉很糟糕，但它有效：

使用runProgram方法创建一个对象，该方法将所需数据作为参数，然后执行先前在文档就绪函数中的逻辑。 e.g。

var ProgramRunner = function() {
    var runProgram = function(data) {
        ModuleFactory.setData(data);
        firstModule = ModuleFactory.create($('#first'));
        firstModule.show();
    };
    return {
        runProgram: runProgram;
    };
};

然后只是

<script>
    $(document).ready(function() { ProgramRunner.runProgram({{data}}) });    
</script>

HTML中的

。

（保持问题开放，因为我怀疑有更好的方法来解决这个问题。）

如何使用Jinja2模板中的数据初始化Javascript对象？

1 个答案: