运行下划线模板时遇到问题答案

【问题标题】：Trouble running underscore templates运行下划线模板时遇到问题
【发布时间】：2014-02-01 19:59:49
【问题描述】：

我无法从 Underscore 模板运行渲染 HTML。这是代码和错误：

//Code

class QuestionView extends Backbone.View {
    template:(data:any) => string = null;
    $el = $root;

    constructor(options?:any, question?:Question) {
        super(options);
        this.model = question;
        var q = this;
        require(["text!add-new-question.html"],
            function (html) {
                q.template = _.template(html);
            }
        );
    }

    render() {
        var data = this.model.toJSON();
        var html = this.template(data);
        this.$el.html(html);
        return this;
    }
}

class SurveyView extends Backbone.View{
    tagName = "div";
    template:(data:any) => string = null;
    $el = $root;

    constructor(options?:any, survey?:Survey){
        super(options);
        this.template = _.template("<div ><%= enlistQuestions %></div>");
    }

    enlistQuestions():string{
        var questions = "";
        _.each(this.collection.models, function(question:Question){
            var view = new QuestionView(null,question);
            questions += view.template(view.model.toJSON()); // This is line for which the error is shown.
        });
        return questions;
    }
}


//Error
Uncaught TypeError: Property 'template' of object #<QuestionView> is not a function Main.ts:63
(anonymous function) Main.ts:63
j.each.j.forEach underscore.js:79
SurveyView.enlistQuestions Main.ts:61
SurveyView.render Main.ts:69
SurveyView Main.ts:56
(anonymous function) Main.ts:80

【问题讨论】：

@muistooshort 谢谢！请查看更新。
那是require 调用异步吗？这似乎是QuestionView 获得其template 属性的地方。您的代码结构很奇怪，通常您会说view.render() 而不是像那样乱用view.template，这样您就可以使用DOM 节点和事件。看起来您将所有内容都作为 HTML 字符串处理，因此您已经抛弃了所有视图的 DOM 事件处理，这在 Backbone 应用程序中是一件非常奇怪的事情。
@muistooshort 感谢您的更正。
@muistooshort。顺便说一句，view() 是用于在屏幕上渲染的。按照惯例，如果您只想返回 HTML 而不是渲染，您会怎么做。
不，view 用于渲染到视图的el（即渲染到可能在屏幕上也可能不在屏幕上的 DOM 节点）。如果我想要的只是 HTML，我不会打扰视图，我只会使用模板。问题是 HTML 字符串没有事件，如果你不使用视图的事件，那么你的视图只是一个模板，那么为什么要为所有的视图机制而烦恼呢？如果你不使用视图事件，那么你根本就没有视图，你只是有一个过于复杂的函数来填充模板。

标签： backbone.js underscore.js typescript

【解决方案1】：

看起来您正在使用“文本”AMD 加载程序插件。如果不是，请忽略此答案。

此插件异步加载资源，并在文件加载后回调提供给 require 语句的函数。

似乎 Main 在回调有机会创建它之前尝试在 QuestionView 实例上使用模板属性，因此出现错误。

文本模块创建 XHR 对象并调用 open 将异步标志设置为 true。您需要将此标志设置为 false。唯一可行的方法是使用 onXhr 回调并再次调用 OPEN，将异步标志设置为 false。

requirejs.config({
    config: {
        text: {
            onXhr: function (xhr, url) {
                // This callback is invoked AFTER open but before send.
                // Call open again with the async flag turned off.
                // Not this will also clear any custom headers
                xhr.open('GET', url, /*async*/ false);
                // xhr.setRequestHeader('header', 'value');
            }
        }
    }
});

如上所述，当您重新调用 open 时，文本模块添加的任何自定义 HTTP 标头都将被清除，但查看他们的代码似乎没有任何方式向其“获取”函数提供额外的标头.

【讨论】：