Question

template code

<script type="text/template" id="test-template">
    <section>

        <form id="<%= pid %>">
            <div class="row">
                <div class="span16">
                    <p>
                        <input type="radio" checked name="text-align" id="" value="tal" />
                        <span>标题靠左</span>
                        <input type="radio" name="text-align" id="" value="tac" />
                        <span>标题居中</span>
                        <input type="radio" name="text-align" id="" value="tar" />
                        <span>标题靠右</span>
                    </p>
                </div>
            </div>

            <div class="row">
                <div class="span16">
                    <p><input type="text" name="title" class="span10" placeholder="标题" value="<%= title %>" /></p>
                    <p><textarea name="content" class="span14" placeholder="内容" rows="10"><%= content %></textarea></p>
                </div>
            </div>

            <div class="row">
                <div class="span8">
                    <p><input type="text" name="data-x" placeholder="X 轴" value="<%= data_x %>" /></p>
                    <p><input type="text" name="data-y" placeholder="Y 轴" value="<%= data_y %>" /></p>
                    <p><input type="text" name="data-z" placeholder="Z 轴" value="<%= data_z %>" /></p>
                </div>

                <div class="span8">
                    <p><input type="text" name="data-rotate-x" placeholder="X 轴旋转" value="<%= data_rotate_x %>" /></p>
                    <p><input type="text" name="data-rotate-y" placeholder="Y 轴旋转" value="<%= data_rotate_y %>" /></p>
                    <p><input type="text" name="data-rotate-z" placeholder="Z 轴旋转" value="<%= data_rotate_z %>" /></p>
                </div>
            </div>

            <div class="row">
                <div class="span8">
                    <p><input type="text" name="data-scale" placeholder="缩放" value="<%= data_scale %>" /></p>
                </div>

                <div class="span8">
                    <p><input type="text" name="data-rotate" placeholder="旋转" value="<%= data_rotate %>" /></p>
                </div>
            </div>

            <div class="row">
                <div class="span16">
                    <input type="hidden" value="<%= title_align %>" />
                    <input type="submit" class="btn" value="提交" />
                </div>
            </div>
        </form>
    </section>
</script>

(function($) {
window.Step = Backbone.Model.extend({});

window.Steps = Backbone.Collection.extend({
    model: Step,
    url: MyAjax.ajaxurl + "?action=query-homepage-step",
      initialize: function() {
        this.fetch();
      }
});

window.StepListView = Backbone.View.extend({
    el: $('#steplist'),
    initialize: function() {
        this.model.bind("reset", this.render, this);
    },
    render: function( eventName ) {
        _.each( this.model.models, function( step ) {
            $( this.el ).append( new StepView({ model: step }).render().el );
        }, this );
        return this;
    }
});

window.StepView = Backbone.View.extend({

    template: _.template( $('#test-template').html() ),
    initialize: function() {
        this.model.bind( 'change', this.render, this );
    },

    render: function( eventName ) {
        $( this.el ).html( this.template( this.model.toJSON() ) );
        return this;
    }
});

window. AppRouter = Backbone.Router.extend({
    routes: {
        "": "init"
    },

    init: function() {
        console.log('init');
        this.steps = new Steps();
        this.stepView = new StepView({ model: this.steps });
        this.steps.fetch();
    }
});
})(jQuery);

what’s wrong with it ?
i already make a template called $('#test-template') in page and pass all <%= var %> correctly?

Uncaught TypeError: Cannot call method 'replace' of null
b.templateunderscore-min.js:28
(anonymous function)stepmakerapp.js:27
(anonymous function)

sandbox is here http://zhanghong.sinaapp.com/make-homepage

Answer 1

Change the include files from header to body… some thing like the below,

<body>
<script src="lib/jquery-1.7.1.min.js" type="text/javascript"></script> 
<script src="lib/underscore-min.js" type="text/javascript"></script> 
<script src="lib/backbone-min.js" type="text/javascript"></script> 
</body>

This works for me.