文章/答案/技术大牛

发布

社区首页 >问答首页 >无法在导入对象中运行JavaScript标记模板

问无法在导入对象中运行JavaScript标记模板
EN

Stack Overflow用户

提问于 2020-10-23 16:18:31

回答 1查看 35关注 0票数 0

我正在尝试将一个网站JavaScript转换成与webpack捆绑兼容的卡盘，基本上我需要为一个多页网站导出/导入所需的脚本，然后将它们打包到每页一个文件中，这确实给我带来了一些麻烦。

这个脚本以前运行得很好，但现在不像以前那样工作了。

我有一个使用字符串列表和字符串操作的templater函数-- templater函数最初是受这 post启发的，但是它被修改了一些。

   export const templater = (parts) => {
        return (data) => {
            let res = parts[0];
    
            for (let i=1; i < parts.length; i++) {
                const val = arguments[i];
                if (typeof val == "function") {
                    res += val(data);
                } else {
                    if (data) {
                        if(data.hasOwnProperty(val)) {
                            res += data[val];
                        }
                    }
                }
    
                res += parts[i];
            }
            return res;
        }
    };

我有一个脚本来处理字符串文字，它是一个带有键'template‘的对象，它调用导入的templater函数。

import {templater} from '../functions/cc-templater-function.js';

export let complianceHandler = {
    template: templater`
        <div class="compliance-overlay">
            <div id="compliance-wrapper" class="compliance-wrapper ${'type'}">
                <p class="compliance-message">${'message'}</p>
                <button id="compliance-yes" data-answer="yes">Yes</button><button id="compliance-no" data-answer="no">No</button>
            </div>
        </div>
    `
}

我有一个脚本，它将JavaScript对象传递给在templater函数中使用它的处理程序。

import {complianceHandler } from './objects/cc-compliance-handler-object.js';
        
export let testObject = {
   remove: () => {
      document.querySelector('#myelem').insertAdjacentHTML("beforeend", complianceHandler.template({
                        message: 'Are you sure you want to do this?'
      }));
   }
}

以上是真实代码的简化/简化版本。

当调用testObject.remove()时，我得到了这个错误：Cannot read property 'call' of undefined --我看不到名为call的方法/函数在任何地方，我对如何调试和修复这个问题有点困惑

与webpack捆绑时，一切都很好。
一切都是这样工作的，正常的代码不是与webpack捆绑在一起的，而是导出/导入的(旧代码)。

有人知道怎么解决这个问题吗？我尝试过以各种方式修改代码，但是我继续得到相同的错误。

webpack

string-literals

javascript

class

oop

回答 1

Stack Overflow用户

发布于 2020-10-23 17:50:29

export let complianceHandler = {
    template: templater`
        <div class="compliance-overlay">
            <div id="compliance-wrapper" class="compliance-wrapper ${'type'}">
                <p class="compliance-message">${'message'}</p>
                <button id="compliance-yes" data-answer="yes">Yes</button><button id="compliance-no" data-answer="no">No</button>
            </div>
        </div>
    `
}

这是导出一个具有调用template函数所生成的templater字符串属性的对象。

稍后，您将导入这个文件并尝试调用template属性。因为它是一个字符串，所以调用它没有意义：

complianceHandler.template({
  message: 'Are you sure you want to do this?'
})

听起来，您想要做的是让template成为一个函数：

export let complianceHandler = {
    template: ({ type, message }) => templater`
        <div class="compliance-overlay">
            <div id="compliance-wrapper" class="compliance-wrapper ${type}">
                <p class="compliance-message">${message}</p>
                <button id="compliance-yes" data-answer="yes">Yes</button><button id="compliance-no" data-answer="no">No</button>
            </div>
        </div>
    `
}

注意，我还修复了模板占位符(${type}，而不是${'type'}，因此使用了变量，而不是文字字符串'type')。还应该注意的是，如果您想要生成有效的HTML，则应该在插入到HTML之前对变量进行编码，除非您希望这些变量是HTML而不是文本。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64503736

复制

相似问题

问无法在导入对象中运行JavaScript标记模板
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法在导入对象中运行JavaScript标记模板EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法在导入对象中运行JavaScript标记模板
EN