0

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

    <!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

    <!-- Basic Page Needs
  ================================================== -->
    <meta charset="utf-8">
    <title>{% block title %}This is the title{% endblock %}</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Mobile Specific Metas
  ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- CSS
  ================================================== -->
    <link rel="stylesheet" href="/static/css/base.css">
    <link rel="stylesheet" href="/static/css/skeleton.css">
    <link rel="stylesheet" href="/static/css/layout.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Favicons
    ================================================== -->
    <link rel="shortcut icon" href="/static/images/favicon.ico">
    <link rel="apple-touch-icon" href="/static/images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/static/images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/static/images/apple-touch-icon-114x114.png">
    <script src='/static/js/jquery.js' ></script>
    <script src='/static/js/underscore.js' ></script>
    <script src='/static/js/backbone.js' ></script>
    <script src="/static/js/tabs.js"></script>
    <script src="/static/js/store-models.js"></script>
</head>
<body>

    <div id="categories">
    </div>
</body>

问题是代码没有将 li 元素附加到 categories-list ，即使前面的主干.js 代码看起来应该如此。

这里有什么建议吗？？

4

1 回答 1

2

作为开始检查：

  1. 您已经将您的addCategories()功能留在了范围之外，我认为它不会访问您的 AppView 类

  2. 删除 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 */

然后，您可以在您的代码的更新jsfiddle 中进行试验，这里是

于 2012-04-23T13:04:21.073 回答