带有jQuery的Backbone.js未按预期更改dom

store-models.js模型

    (function ($) {

  Category = Backbone.Model.extend({
    //Create a model to hold friend atribute
    name: null
  });

  Categories = Backbone.Collection.extend({
    //This is our Friends collection and holds our Friend models
    initialize: function (models, options) {
      this.bind("add", options.view.addFriendLi);
      //Listen for new additions to the collection and call a view function if so
    }
  });

  CategoryView = Backbone.View.extend({
    el : $("li"),
    initialize:function(){
          $(this.el).html(this.model.get("name"));
          console.log("initialize"+this.model.get("name"));
    },
    events:{
        "click": "showPrompt",
    },
    showPrompt : function(){
        alert("test");
    }
  });

  AppView = Backbone.View.extend({
    el: $("body"),
    initialize: function () {
      this.friends = new Categories( null, { view: this });

      //Create a friends collection when the view is initialized.
      //Pass it a reference to this view to create a connection between the two
    },
    events: {
      "click #add-friend":  "showPrompt",
    },
    showPrompt: function () {
      var friend_name = prompt("Who is your friend?");
      var friend_model = new Category({ name: friend_name });
      //Add a new friend model to our friend collection
      this.friends.add( friend_model );
    },
    addFriendLi: function (mymodel) {
      //The parameter passed is a reference to the model that was added
      friendView = new CategoryView({model: mymodel});
      $("#categories").append(friendView.el);
      console.log(friendView.el);
      //Use .get to receive attributes of the model
    }
  });  

    setTimeout('addCategories()',2000);
//    var appview = new AppView;
})(jQuery);

function addCategories()
{
    var appview = new AppView;
    appview.showPrompt();

}

Html

{%block title%}这是标题{%endblock%}

问题在于，代码没有将li元素添加到categories列表中，即使在backbone.js代码前面看起来应该添加li元素

---

这里有什么建议吗？

首先检查一下：

您将

addCategories（）

函数留在范围之外，我认为它无法访问AppView类

删除setTimeout中不必要的引号以提供正确的回调

/* ... code ... */

function addCategories()
{
   var appview = new AppView;
   appview.showPrompt();
} 

setTimeout(addCategories,2000);

})(jQuery);

如果您进行更改，您的代码将正常工作

编辑： 您的类别视图中没有“li”元素（因为您没有创建任何内容）

这就是为什么你的CategoryView.el总是未定义的原因

您不应该在视图扩展中设置它，而应该在有模型要填充时立即设置它

CategoryView = Backbone.View.extend({
   initialize:function(){
      this.setElement($("<li>"+this.model.get("name")+"</li>"));
      log("initialize"+this.model.get("name"));
   },

   /* rest of code */

CategoryView=Backbone.View.extend({
初始化：函数（）{
this.setElement（$（“
”+this.model.get（“name”）+“
”））；
log（“initialize”+this.model.get（“name”）；
},
/*代码的其余部分*/

---

然后，您可以在更新后的JSFIDLE代码中进行实验，即

您的开发者工具控制台中是否出现任何javascript错误？您看到了什么？是的，在下面的“Uncaught TypeError:Object#has no method‘on’in tabs.js@26”行中有一些内容我知道上的

方法是在jQuery 1.7中引入的，看起来您还没有指定要包含的特定版本。您确定您的jQuery版本是1.7+？tabs.js很可能需要它。是的，这是我需要签出的。给我几分钟时间，如果我没有使用最新版本，我会在更新版本后与您联系st one ALREADY更新后，错误似乎消失了，但实际问题仍然存在。我尝试了更改，但它们似乎不起作用。我认为范围没有问题。还有其他建议吗？你是指this.el.setElement吗？因为此代码抛出错误“No method setElement for this”我的印象是，如果不指定el或不存在的el，主干会在内部为您创建一个div是的，但如果要这样做，您必须设置
标记名：“li”
而不是
el:$（“li”）
这只是一种不同的方法，我不知道您在寻找它！不是this.el.setElement它只是this.setElement正如示例中所示，您必须调用View方法setElement…查看示例代码
CategoryView = Backbone.View.extend({
   initialize:function(){
      this.setElement($("<li>"+this.model.get("name")+"</li>"));
      log("initialize"+this.model.get("name"));
   },

   /* rest of code */