Fatal编程技术网
  • backbone.js/
  • Backbone.js 当我制作一个模板时，我得到了这个；无法调用方法'；更换'；“无效”的定义；

Backbone.js 当我制作一个模板时，我得到了这个；无法调用方法'；更换'；“无效”的定义；

backbone.js

Backbone.js 当我制作一个模板时，我得到了这个；无法调用方法'；更换'；“无效”的定义；,backbone.js,Backbone.js,模板代码 <script type="text/template" id="test-template"> <section> <form id="<%= pid %>"> <div class="row"> <div class="span16"> <p>

模板代码

<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);
沙盒在这里

将包含文件从标题更改为正文。。。像下面这样的东西

<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>
这对我很有用。

更具体地说，对于@Sats的回答，您需要在加载所有其他JS文件之前定义模板。至少这是我解决问题的方法：）

<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>