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>

問題は、backbone.jsコードの前ではあるべきように見えても、コードがli要素をcategories-listに追加していないことです。

ここに何か提案はありますか?

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 に答える