Question

我正在尝试挑选骨干，并希望做一个简单的图库应用程序，但我遇到了问题。

我想用一组项目（名为itemsArray）实例化我的视图，然后将该集合的第一个模型加载到视图中。此视图将提供上一个和下一个按钮，我已设置事件。

我对如何将此集合传递到Backbone视图并告诉它加载第一个元素感到困惑。此外，使用prev / next操作集合似乎无法正常工作。我之前（backbone - trying to rerender a view with the next or previous model in a collection）问了这个问题，但是如果我在这里发布整个片段，那就更好了。我在教程中看到了与此类似的示例代码，但我认为加载具有该集合知识的单个模型已经证明是有问题的。我在下面提供了完整的源代码：

<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>

非常感谢任何帮助。我如何通过收藏？然后通过事件操纵我在集合中的位置？

THX

enter image description here

Answer 1

将模型传递给模板时，请注意每个属性都保存在特殊哈希中。对你来说，它是model.attributes.header。（所以<%= attributes.header %>）

通常建议您将模型属性直接传递给模板：this.render(this.collection.at(0).toJSON());（这将适用于您当前的模板）

Answer 2

如前所述，您通常不会将参数传递给render()。您实际上并未将#tmpl模板附加到#item-container。

我的代码created a working jsfiddle。我已经演示了为你的收藏和模型创建一个单独的视图，因为我觉得这是令人困惑的事情。

有简单的骨干应用程序加载集合，然后动态迭代它的问题

2 个答案: