Question

我昨天开始使用Backbone.js，我不知道为什么模板没有显示，即使我可以看到该部分被解析。

这是我的模板：

<script type="text/template" id="area-template">
            <div id="area">
                <label for="alto">Alto</label>
                <input id="alto" name="alto" value=""/>

                <label for="ancho">Ancho</label>
                <input id="ancho" name="ancho" value=""/>
            </div>
            <div id="resultado" style="margin-top: 2em">
                El área de un rectángulo de alto <%-alto %> y ancho <%- ancho %> es <b><%- area %></b>
            </div>      
 </script>

这是我的Backbone代码：

    <script type="text/javascript">

                var Rectangulo = Backbone.Model.extend({
                defaults: {
                    alto: 4,
                    ancho: 3
                },

                area: function() {
                    return this.get('alto') * this.get('ancho');
                },
                toTemplateJSON: function() {
                    var json = this.toJSON();
                    json.area = this.area();
                    return json;
                }
            });

            var Vista = Backbone.View.extend({
                el: '#area',
                events: {
                    "change input[name='alto']": 'onChangeAlto',
                    "change input[name='ancho']": 'onChangeAncho'
                },
                template: _.template($('#area-template').html()),

                initialize: function() {
                    _.bindAll(this, 'render', 'onChangeAlto', 'onChangeAncho');
                    this.model = new Rectangulo();  
                    this.model.on('change', this.render);

                    this.render();
                },

                onChangeAlto: function() {
                    var v = parseInt($("input[name='alto']", this.el).val());
                    this.model.set('alto', v);
                },

                onChangeAncho: function() {
                    var v = parseInt($("input[name='ancho']", this.el).val());
                    this.model.set('ancho', v);
                },

                render: function() {
                    $("input[name='alto']").val(this.model.get('alto'));
                    $("input[name='ancho']").val(this.model.get('ancho'));
                    this.$el.html(this.template( this.model.toTemplateJSON()));
                }
            });

            var v = new Vista();
   </script>

我没有收到任何错误，只是一个空白页面。如果我破坏模板（例如将<%- alto %>更改为＆lt; %- undefinedOne %>，我会在控制台（ReferenceError: undefinedOne is not defined）中收到错误。但为什么不绘制HTML？< / p>

Answer 1

这对我有用，请参阅：http://jsfiddle.net/sbjaz/14/

因为您已经定义了视图的'el'是'#area'

你必须确保，DOM中有一个id'area'元素，或者你必须手动插入它：

var v = new Vista();
$('body').append(v.el);

=====

修改

此外，您的模板中似乎也有div＃区域。您不应在模板中包含“el”本身。

感谢@fbynite

骨干：模板没有显示

1 个答案: