1

私はこの簡単な例でバックボーンを学び始めています：

<div id="counter">unkown</div>
<button id="add-button">ADD</button>

(function($){

   var Counter = Backbone.Model.extend({
     defaults: {
        count: 0            
     }
   });

   var CounterView = Backbone.View.extend({
       el: "#counter",

       events: {
            "click #add-button": "add"
       },

       add: function() {
           this.model.count++;
           render();
       },

       render: function() {
           $(this.el).text(this.model.get("count"));
           return this;
       },

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

   var counterItem = new Counter();
   var counterView = new CounterView({model: counterItem});              

}(jQuery));  // function($)

したがって、[追加]ボタンを押すと、カウンターが増加し、ビューが更新されます。ビューとモデルをバインドし、クリックイベントを追加機能にリンクさせましたが、どういうわけかこれは機能していません。

だから私は何か間違ったことをしていると思いますか、それともバインディングが欠けているだけですか？

編集：これに提案されたように修正されました...まだ機能していません：

<div class="list">
        <div id="counter">unkown</div>
        <button id="add-button">ADD</button>
</div>  

    (function($){

       var Counter = Backbone.Model.extend({
         defaults: {
            count: 0            
         }
       });

       var CounterView = Backbone.View.extend({
           el: "#counter",

           events: {
                "click #add-button": "add"
           },

           add: function() {
               alert("ADD");
               this.model.set("count", this.model.get("count") + 1);
               this.render();
           },

           render: function() {
               $(this.el).text(this.model.get("count"));
               return this;
           },

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

       var counterItem = new Counter();
       var counterView = new CounterView({model: counterItem});                     

    }(jQuery));  // function($)

編集：修正され、機能している

<div id="counterHolder">
        <div id="counter">
            <span>unknown</span>
           <button id="add-button">ADD</button>
       </div>
    </div>

    <script>


    (function($){

       var Counter = Backbone.Model.extend({
         defaults: {
            count: 0            
         },

         increase: function(){
             this.set("count", this.get("count") + 1);
         }
       });

       var CounterView = Backbone.View.extend({

           el: "#counter",

           events: {
                "click #add-button": "add"
           },

           add: function() {
               this.model.increase();               
           },

           render: function() {
               $("#counter span").text(this.model.get("count"));
               return this;
           },

           initialize: function(){
               this.render = _.bind(this.render, this); 
               this.render();
               this.model.bind('change:count', this.render);
           }
       });

       var counterItem = new Counter();
       var counterView = new CounterView({model: counterItem});                     

    }(jQuery));  // function($)

    </script>
4

3 に答える 3

5

ボタンは、ビューの子孫である必要がありますel

以下のようにHTMLを更新すると、機能するはずです。

<div id="counter">
  <button id="add-button">ADD</button>
</div>

それでもカウントを表示したい場合は、さらに追加しますspan

<div id="counter">
  <span id="count" />
  <button id="add-button">ADD</button>
</div>

そして、renderメソッドを更新します

render: function() {
  this.$('#count').text(this.model.get("count"));
  return this;
}
于 2012-04-04T13:11:41.387 に答える
0

バックボーンモデルでは、通常のjavascriptオブジェクトとしてではなくget、メソッドを介してデータを操作する必要があります。set試す

this.model.set("count", this.model.get("count") + 1);

incrementまたは、さらに良いことに、モデルクラスにメソッドを追加して、カプセル化を介しgetて属性を更新します。set

また、通常、ビューが変更またはバインドされるDOMのすべての部分は、親el要素内に含まれている必要があるという規則に関する注意事項です。ビューは、ビューの親に含まれていない追加ボタンにバインドされていますdiv。動作しているように見えますが、基本的にはグローバル変数と同等のイベント処理です。

于 2012-04-04T12:48:14.393 に答える
0

あなたの間違いは単純なjavascriptエラーだと思います。だけでなく、add呼び出す必要があります。this.render()render()

于 2012-04-04T12:50:10.783 に答える