javascript - 2 番目のレンダリングでのバックボーン Uncaught ReferenceError

Question

バックボーンアプリを構築していて、トラブルに遭遇しました。最初のロードではテンプレートは正常にロードされますが、ルーターのナビゲーションでは参照エラーが発生します。

コードは次のとおりです。

テンプレート：

<script type="text/template" id="testTpl">
        <div class="cabinet">
            Its a test! <%= userName %>.
            <a href="#/">Go back</a>
        </div>        
    </script>

<script type="text/template" id="secondTpl">
        <div class="cabinet">
            Its a second test! <%= test %>.
            <a href="#/">Go back</a>
        </div>        
    </script>

ルーター:

var Controller = Backbone.Router.extend({
    routes: { 
        "!/test": "test", 
        "!/second": "second"
    },
    test: function () {
        if (Views.Test!= null) {
            Views.Test.render();
        }
    },
    second: function () {
        if (Views.Second!= null) {
            Views.Second.render();
        }
    }
});

ビュー:

var Block = Backbone.View.extend({
    render: function (options) {
    var userName = {userName:'success!', test: 1};
    var tpl = _.template(this.options.template);
        $(this.el).html(tpl(userName));
    }
});

Views = { 
            Test: new Block({el:$('#block'), template: $('#testTpl').html()}),
            Second: new Block({el:$('#block'), template: $('#secondTpl').html()})
        };

最初のロードでは、すべてが正常に機能し、テンプレートは変数をロードしますが、その後 # リンクをたどると、

Uncaught ReferenceError: userName is not defined

ここで何がうまくいかない可能性がありますか？オブジェクトを直接作成する理由

userName = {userName:'success!', test: 1}

テンプレートでそれを使用するとアプリが壊れますか？