直接在源页面中执行加载在 <script> 标记中的 javascript

Question

我必须动态获取 javascript 仅包含车把辅助函数的文件。这将在包含模板的 html 文件中获取。

动态文件（handlebar_helper_load.js）：

import handlebars from 'handlebars';

handlebars.registerHelper('**fullName**', function(person) {
            return person.firstName + " " + person.lastName;
})

Backbone 查看文件：

import handlebars from 'handlebars';

export default View.extend({
    template: template,

    onRender() {
        var imported = document.createElement('script');

        // This will load the above file in script tag on this page 
        imported.src = '**handlebar_helper_load.js**';
        document.head.appendChild(imported);

        // This is the handlebars template
        var source   = '<div class="post">\n' +
                        '  <h1>By {{fullName author}}</h1>\n' +
                        '  <div class="body">{{body}}</div>\n' +
                        '\n' +
                        '  <h1>Comments</h1>\n' +
                        '\n' +
                        '  {{#each comments}}\n' +
                        '  <h2>By {{fullName author}}</h2>\n' +
                        '  <div class="body">{{body}}</div>\n' +
                        '  {{/each}}\n' +
                        '</div>\n';

        var template = handlebars.compile(source);
        var context  = {
            author: {firstName: "Alan", lastName: "Johnson"},
            body: "I Love Handlebars",
            comments: [{
                author: {firstName: "Yehuda", lastName: "Katz"},
                body: "Me too!"
            }]
        };

        var html    = template(context);
        $.('handlebarDiv').append(html);

    },
 }

我面临的问题是我收到一个错误消息，指出函数 **fullName** 未定义，这意味着通过脚本标记注册助手不起作用。
有办法做到这一点吗？

Answer 1

你可能需要

imported.src = 'handlebar_helper_load.js';

路径正确 (relative/full)

而不是

imported.src = '**handlebar_helper_load.js**';

因为当您附加脚本标签时，浏览器将请求该文件，并且该文件应该存在于正确的路径中。查看devtools中的网络选项卡，查看请求是否成功

直接在源页面中执行加载在 <script> 标记中的 javascript

Executing javascript loaded in <script> tag directly in source page

javascript

backbone.js

handlebars.js

handlebarshelper