有簡單的骨干應用程序加載集合，然后動態迭代它的問題

Question

我正在嘗試挑選骨干，並希望做一個簡單的圖庫應用程序，但我遇到了問題。

我想用一組項目（名為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>

任何幫助是極大的贊賞。 我如何通過收藏？ 然后通過事件操縱我在集合中的位置？

謝謝

Answer 1

將模型傳遞給模板時，請注意每個屬性都保存在特殊哈希中。 對你而言，它是model.attributes.header 。 （所以<%= attributes.header %> ）

通常建議您將模型屬性直接傳遞給模板： this.render(this.collection.at(0).toJSON()); （這將適用於您當前的模板）

Answer 2

如前所述，您通常不會將參數傳遞給render() 。 您實際上並沒有將#tmpl模板附加到#item-container 。

我已經用你的代碼創建了一個有效的jsfiddle 。 我已經演示了為你的收藏和模型創建一個單獨的視圖，因為我覺得這是令人困惑的事情。