Question

我有以下代码：

<!DOCTYPE HTML>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Title</title>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>

   var myView = Backbone.View.extend({
    tagName : 'li',
    className : 'myClass'
});  

var aView = new myView();
console.log(aView.el);

var Person = Backbone.Model.extend({
  defaults: {
      name: 'User1',
      age: 27,
      occupation: 'SE'
  }
});

var anotherView = Backbone.View.extend({
    tagName : 'li',
    initialize : function(){
        console.log("called View");
        this.render();
    },
    render : function (){
        console.log("model : " + this.model.get('name'));
        this.$el.html(this.model.get('name'));

    }
});

var person = new Person();
var fstView = new anotherView({model:person});
console.log(fstView.el);

这里，这个。$ el.html（this.model.get（＆＃39; name＆＃39;））;没有在浏览器上显示任何内容。

Answer 1

在anotherView中，您已将tagName指定为li。这会创建一个li元素，但不会将其添加到DOM中，因此浏览器中不会显示任何内容。因此，如果您要从el，tagName或className创建视图id，那么您需要确保将其添加到DOM。

将下面的最后一行添加到您的代码中。

var person = new Person();
var fstView = new anotherView({model:person});
console.log(fstView.el);
$('body').html(fstView.el);

查看view.el和what is el。

注意：请确保您拥有ul，然后向其添加相应的li's。

为什么不使用backbonejs中的$ el.html（）显示名称

1 个答案: