使用Backbone Layoutmanager预编译Handlebar模板，用于Jasmine测试(Precompiling Handlebar templates with Backbone Layoutmanager for Jasmine tests)

 伙计们 ， 
 
 我们的项目规模迅速扩大，我希望成为一名优秀的JS公民，并在为时已晚之前实施测试。 我们正在使用Backbone与Backbone Layoutmanager和Handlebars模板创建我们的前端，我已经阅读了一些关于如何使用Jasmine与Jasmine-Jquery和Sinon测试Backbone驱动的应用程序的优秀博客文章，所以我决定为此而去。 
 
 但是，我们的设置有点不典型，因为我们正在使用RequireJS模块，使用Layoutmanager扩充Backbone，以及预编译Handlebars模板。 我们正在按照这些库的创建者的建议异步预编译模板，并且在我意识到任何类型的异步jQuery / Ajax调用无法正常工作之前，我花了很长时间才敲打我的脑袋。使用Jasmine运行应用程序。 试图使$.ajax(...)调用与async: false同步，并没有这样做，并且深入了解Layoutmanager JS源代码，我发现这一切都意味着发生异步。 
 
 所以无论如何，这就是我最终使预编译工作的结果： 
 
Backbone.LayoutManager.configure({
    manage: false,

    prefix: "app/templates/",

    fetch: function(path) {
        var done;
        var that = this;

        // Concatenate the file extension.
        path = path + ".html";

        runs(function() {
            if (!JST[path]) {
                done = that.async()

                return $.ajax({ url: app.root + path, async: false }).then(
                    //Successhandler
                    function(contents) {
                        JST[path] = Handlebars.compile(contents);
                        JST[path].__compiled__ = true;
                        done(JST[path]);
                    },
                    //Errorhandler
                    function(jqXHR, textStatus, errorThrown) {
                        //Feil ved lasting av template
                        //TODO logg feil på en eller annen måte
                    }
                );
            }
            // If the template hasn't been compiled yet, then compile.
            if (!JST[path].__compiled__) {
                JST[path] = Handlebars.compile(JST[path]);
                JST[path].__compiled__ = true;
            }
        });

        waitsFor(function() {
            return done;
        }, "loading template", 500);
        return JST[path];
    },

    // Override render to use Handlebars
    render: function(template, context) {
        return template(context);
    }

});
 
 解决方案是将异步逻辑包装在runs并waitFor它。 
 
 现在提出问题 ：我不认为这是一个最佳解决方案，因为它迫使我复制app.js只是为了包装异步调用。 有没有更好的方法来解决这个问题？ 
 
 如果没有那么公平，希望其他人从这篇文章中学习。 

Folks,
 
Our project is rapidly growing in size and I wanted to be a good JS-citizen and get testing implemented before it is too late. We're creating our front-end using Backbone with Backbone Layoutmanager and Handlebars templates among other things, and I've read some excellent blog posts on how to test Backbone-driven apps using Jasmine with Jasmine-Jquery and Sinon, so I decided to go for that.
 
However, our setup is a little atypical, as we're using RequireJS modules, augmenting Backbone with Layoutmanager, and precompiling Handlebars templates. We're precompiling the templates asynchronously as is suggested by the creators of these libraries, and I spent the better part of a long day banging my head before I realized that any type of async jQuery/Ajax call won't work if you're running the app using Jasmine. Trying to make the $.ajax(...) call synchronous with async: false didn't do it, and digging into the Layoutmanager JS source I saw that it all is meant to happen async.
 
So anyways this is how I ended up making the precompilation work in the end:
 
Backbone.LayoutManager.configure({
    manage: false,

    prefix: "app/templates/",

    fetch: function(path) {
        var done;
        var that = this;

        // Concatenate the file extension.
        path = path + ".html";

        runs(function() {
            if (!JST[path]) {
                done = that.async()

                return $.ajax({ url: app.root + path, async: false }).then(
                    //Successhandler
                    function(contents) {
                        JST[path] = Handlebars.compile(contents);
                        JST[path].__compiled__ = true;
                        done(JST[path]);
                    },
                    //Errorhandler
                    function(jqXHR, textStatus, errorThrown) {
                        //Feil ved lasting av template
                        //TODO logg feil på en eller annen måte
                    }
                );
            }
            // If the template hasn't been compiled yet, then compile.
            if (!JST[path].__compiled__) {
                JST[path] = Handlebars.compile(JST[path]);
                JST[path].__compiled__ = true;
            }
        });

        waitsFor(function() {
            return done;
        }, "loading template", 500);
        return JST[path];
    },

    // Override render to use Handlebars
    render: function(template, context) {
        return template(context);
    }

});
 
The solution was to wrap the async logic in runs and waitFor it.
 
Now for the question: I don't think this is an optimal solution, because it forces me to duplicate app.js just to wrap the async call. Are there any better approaches to this problem?
 
If there aren't then fair enough, hopefully someone else learned from this post.

原文：https://stackoverflow.com/questions/13709904