0

バックボーンを取得しようとしていて、単純な画像ギャラリー アプリを作成したいのですが、問題が発生しています。

ビューをアイテムのコレクション (itemsArray という名前) でインスタンス化し、そのコレクションの最初のモデルをビューにロードしたいと考えています。このビューは前と次のボタンを提供し、イベントを設定しました。

このコレクションを Backbone ビューに渡し、最初の要素をロードするように指示する方法について混乱しています。また、コレクションを prev / next で操作しても正しく動作していないようです。以前にこの質問をしました (バックボーン - コレクション内の次または前のモデルでビューを再レンダリングしようとしています) が、フラグメント全体をここに投稿したほうがよいと思います。チュートリアルでこれに似たサンプル コードを見たことがありますが、コレクションの知識を使用して単一のモデルをロードすることには問題があることが証明されていると思います。以下に完全なソースコードを提供しました。

<div id='item-container'></div>
<script type='text/template' id='tmp'>
  <%=header %>
  <img src='<%=assets[0].url %>' />
  <div class='next-btn'>next</div> <div class='prev-btn'>prev</div>
</script>

<script>

$(document).ready(function(){

      var arc={};
      // 2. items to be made into an Items collection
      var itemsArray=[{'id':4, 'header':'my header','detail':'my detail', 'price':'$12.25', assets:[{'url':'/tmp-images/surf.jpg'}]},
          {'id':7, 'header':'my header 2','detail':'my detail 2', 'price':'$14.25', assets:[{'url':'/tmp-images/jamaica.jpg'}]},
          {'id':11, 'header':'my header 3','detail':'my detail 3', 'price':'$21.00',assets:[{'url':'/tmp-images/jamaica-2.jpg'}]}
      ];

      // 3. item class 
      arc.Item = Backbone.Model.extend({});
      // 4. items collection made up of item
      arc.Items = Backbone.Collection.extend({
        model:arc.Item
      });

      var items = new arc.Items(itemsArray);

      //console.log(menu_items);

      arc.ItemsGalleryView = Backbone.View.extend({
            el: $('#item-container'),
            events: {'click .next-btn' : 'loadNext', 'click .prev-btn':'loadPrevious' },
             template:_.template($('#tmp').text()),
            initialize: function() {
              _.bindAll( this, 'render' );
              // 5. this is definitely wrong, trying to render template with single instance of model
              //  seems like I should be doing something like this.collection.at(0) or something but that isn't working
              //this.render(this.model);


             /* 6.  works but not an array
             this.render({header:'my name',assets:[
                    {url:'/image/some.jpg'}
              ]});
              */
              // 7. not working header is not defined
              this.render(this.collection.at(0));  // error 'header is not defined'
              console.log(this.collection.at(0));  // in console this kinda looks like a model but do I need to call another method on it?
            },

            render: function(xModel) {
              var compiled=this.template(xModel);
              this.$el.html(compiled);
              return this;
            },
            loadNext: function(){
               // 8. not sure what to do here
            },
            loadPrevious: function(){
              console.log('i want to load Previous');
              // 9. not working
              this.render(this.collection.prev());

            }

        });

      var itemView=new arc.ItemsGalleryView({ collection: items });
    });
    </script>

どんな助けでも大歓迎です。コレクションを渡すにはどうすればよいですか? イベントを介してコレクション内の場所を操作しますか?

どうも

ここに画像の説明を入力

4

2 に答える 2

2

モデルをテンプレートに渡すときは、すべての属性が特別なハッシュに保持されることに注意してください。あなたにとって、それはmodel.attributes.header. (だから<%= attributes.header %>)

ただし、通常は、モデル属性をテンプレートに直接渡すことをお勧めしますthis.render(this.collection.at(0).toJSON());(現在のテンプレートで動作します)。

于 2013-08-29T21:41:30.500 に答える
0

As already mentioned, you usually do not pass arguments to render(). You're also not actually appending your #tmpl template to your #item-container.

I have created a working jsfiddle with your code. I've demonstrated creating a separate view for your collection and model, as I feel this was confusing things.

于 2013-08-29T21:52:20.660 に答える