Question

所以我看到了与此问题相关的其他帖子，但无论我是否努力纳入他们的建议，我似乎都无法解决问题。所以这是代码：

我在这里做错了什么以及启动应用程序的最佳方法是什么？

整个申请：

var Person = Backbone.Model.extend({

defaults : {
    name : ""
}

});

var PersonView = Backbone.View.extend({

el : $('body'),

tagName: 'li',

initialize : function() {
    this.render();
},

render : function(){
    var template = _.template( $("#person").html(), {} );

    this.$el.html(template);

    return this;
}

});

HTML w / Template：

    <script type="text/template" id="person">
        <h1><%= name %></h1>
    </script>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/underscore.js"></script>
    <script type="text/javascript" src="js/backbone.js"></script>
    <script type="text/javascript" src="app.js"></script>

Answer 1

乍一看，您似乎错误地定义了DOM位置。

el : $('body'),

tagName: 'li',

el应该是jQuery选择器字符串而不是对象

el : 'body'

但是，this.$el将$('body')有效，因此this.$el.html(template)会尝试将数据放入<body>标记。

从tagName: 'li'看起来你想拥有多个PersonViews，所以我建议你根本不定义el属性，然后在视图渲染后附加this.$el到你需要的任何父元素。

Answer 2

在进一步审核时，“整个申请”表明您没有初始化任何内容。

你在那里的Javascript定义了一个Person类和一个PersonView类。据推测，您需要实例化Person类的一个或多个对象，然后为每个Person实例化一个PersonView，这可以通过new使用mu is too short来实现。

实际上，您拥有的代码就是设置，现在您需要启动它。

var joe = new Person;
var joeView = new PersonView({ person: joe });

该代码片段假定您在PersonView中期待{ person: joe }，而您不是，但是抛出的错误应该指向更好的方向。

在Backbone.js中使用外部视图

2 个答案: