0

I'm having a hard time getting server data to render in my underscore template. The underscore markup displays on the page as a string, for example inside the div, you can see <%= test %>.

I'm using backbone, require, and the running on the python flask framework.

I've tried multiple different approaches as suggested in a variety of posts but I can't seem to figure out what the issue is. I'm not seeing any errors in the console. Everything is working as expected, and the request to the server is executing, and data is being returned appropriately so at least that portion of the backbone app is working. The router is rendering the appropriate page, but the _.template, just doesn't seem to be working.

Here's the view:

    define(['jquery',
        'underscore',
        'backbone',
        'bootstrap',
        'text!/static/html/templates/security.html'
        ],function($,_,Backbone,b, security){
            var SecurityView = Backbone.View.extend({
            template: _.template($(security).html()),
            events: {
                "click #submit": 'submit_security'
            },
            initialize: function(options) {
                this.options = options || {};
                var currentInstance = this;
            },
            render: function() {
                var that = this;
                var template = this.template({test: 'blahblah'});
                this.$el.html(template);

                return this;
            },

        });
        return SecurityView;
    });

The Router:

    define(['jquery', 'underscore', 'backbone',
            'models/login', 'models/register', 'models/security',
            'collections/questions',
            'views/login', 'views/register', 'views/security'
            ],
            function($,_,Backbone, Login, Register, Security,
                     Questions,
                     LoginView, RegisterView, SecurityView) {
                var app = {};
                app.models = app.models || {};
                app.collections = app.collections || {};
                app.current_content = null;
                app.current_dialog = null;
                app.current_logout = null;
                var Router = Backbone.Router.extend({
                routes: {
                    "login": "login",
                    "register": "register",
                    "book_writer": "book_writer",
                    "book_setup": "book_setup",
                    "error_page": "error_page",
                    "security": "security_questions"
                },
                replace_cur_content: function(view, nologout){
                    //if (app.current_content) {
                    //    app.current_content.remove();
                    //}
                    app.current_content = view;
                    if (view) {
                        var display = view.render();
                        $('#app').append($(display.el));
                    }
                },
                security_questions: function() {
                    app.models.security = new Security();
                    app.models.security.fetch({
                        reset: true,
                        success: function(model) {
                            var state = model.get('session_state');
                            if (state === 'ready') {
                                var securityView = new SecurityView({model: model});
                                app.AppRouter.replace_cur_content(securityView);
                            } else if (state === 'error') {
                                // error page
                            } else if (state === 'logged_out') {
                                Backbone.history.navigate('login', {trigger: true});
                            }
                        }
                    });
                }

            });
            app.AppRouter = new Router();
            $(document).ajaxError(function(event, xhr){
                if (xhr.status == 401) {
                    console.log('Ajax Error - 401');
                    app.AppRouter.login();
                } else if (xhr.status == 403) {
                    console.log('Ajax Error - 403');
                    app.AppRouter.noverify();
                } else if (xhr.status == 404) {
                    console.log('Ajax Error - 404');
                    app.AppRouter.notfound();
                } else {
                    app.AppRouter.error();
                }
             });
             return app;
    });

The template:

    <div class="form-content">
        <div class="form-box">
            <div class="form" id="security_form">
                <h3 class="form-heading">Security Questions: </h3>
                    <%= test %>
             </div>
        </div>
    </div>

No error messages are available in the console. Expected is: the underscore markup should not display as text on the page after render.

4
  • Which route is the one rendering the view? What do you mean by but the _.template, just doesn't seem to be working. is anything displayed at all?
    – T J
    Commented Oct 7, 2019 at 13:47
  • The route is “security”. The page renders, but the data does not. The underscore variables just show up at strings within the template. So instead of data, I get the string “<%= %>”
    – RomM
    Commented Oct 8, 2019 at 14:29
  • What if you do _.template(security) instead of _.template($(security).html())
    – T J
    Commented Oct 9, 2019 at 11:40
  • Would be easier to fix if you could replicate this in an minimal reproducible example
    – T J
    Commented Oct 9, 2019 at 13:37

0