Question

我是backbone.js的新手，想要渲染一个名为products.json的json文件。

产品被加载到集合中，但它不会渲染。我有问题使用render()功能＆amp; underscore.js。

如果有人可以帮助我，谢谢你！

Answer 1

在 ShopView 中，您必须为集合中的“重置”事件添加一个侦听器，以便在获取集合时重新呈现视图。

initialize: function() {
    _.bindAll(this, 'render');
    this.collection = new ShopList();
    this.listenTo(this.collection, 'reset', this.render, this);
    this.collection.fetch({reset: true});
    // Check URL Path 
    this.render();        
}

render: function() {
    var self = this;
    this.collection.each(function(item) {
        var view = new ProductItemView({
            model: item
        });
        $(self.el).append(view.render());
    });
    return this;
}

要渲染模型，您必须将模板更改为如下所示：

<span class="product_name"><%= product_name %></span><br />
<span class="product_price"><%= price %></span>

ProductItemView 的渲染：

render: function() {
    $(this.el).html(this.template(this.model.toJSON()));
    return this;
}

Answer 2

您需要使用toJSON函数

将模型转换为JSON

取代：

$(this.el).html(this.template({
            item: this.model
}));

使用：

 $(this.el).html(this.template({
            item: this.model.toJSON()
 }));

Answer 3

据我所知，你正在做的一切正确。只有在撕裂和放置数据时你才会犯错误。在骨干模型中，我们通过getter访问骨干mdel的值而不是。像这样改变你的HTML

<script type="text/template" id="shop_template" >
<div class="col-md-6" style="margin-top:10px">
   <a href="#" class="thumbnail">
   <img src="<%= item.get('img') %>" alt="image" style="width:150px" id="<%= item.get('id') %>" draggable="true"
      ondragstart="drag(event)">
   <br>
   <span class="product_name"><%= item.get('product_name') %></span><br>
   <span class="product_price"><%= item.get('price') %></span>
   </a>
</div>
</script>

试试你的运气.. 最后一个提示。尝试使用coffeescript与骨干。您需要以更简洁的方式编写代码。我几乎不在js工作。

Answer 4

OP回答了他自己的问题：

 render: function() {
            var self = this;
            console.log(this.collection);
            _(this.collection.models).each(function(item) {
                console.log(item);
                console.log('render!');
                var view = new ProductItemView({
                    model: item.attributes
                });
                $(self.el).append(view.render().el);
            });
            return this;
        }

我必须添加$(self.el).append(view.render().el)和item.attributes

感谢@Puigcerber

建议他使用：this.collection.fetch({reset: true})

这是我的代码：

Underscore.js模板：

<script type="text/template" id="shop_template" >
<div class="col-md-6" style="margin-top:10px">
   <a href="#" class="thumbnail">
   <img src="<%= item.img %>" alt="image" style="width:150px" id="<%= item.id %>" draggable="true"
      ondragstart="drag(event)">
   <br>
   <span class="product_name"><%= item.product_name %></span><br>
   <span class="product_price"><%= item.price %></span>
   </a>
</div>
</script>

骨干代码：

(function($) {
    var ProductItem = Backbone.Model.extend({
        defaults: {
            id: 'id',
            price: '1,99€',
            img: 'url',
            product_name: 'name'
        }
    });
    var ShopList = Backbone.Collection.extend({
        model: ProductItem,
        url: '/products.json'
    });
    var ProductItemView = Backbone.View.extend({
        tagName: 'li',
        template: _.template($("#shop_template").html()),
        initialize: function() {
            _.bindAll(this, 'render');
        },
        render: function() {
            $(this.el).html(this.template({
                item: this.model
            }));
            return this;
        }
    });
    var ShopView = Backbone.View.extend({
        el: $('#product_ul'),
        events: {
        },
        initialize: function() {
            _.bindAll(this, 'render');
            this.collection = new ShopList();
            this.collection.fetch();
            // Check URL Path 
            this.render();
            this.listenTo(this.collection, 'reset', this.render, this);
        },
        render: function() {
            var self = this;
            this.collection.each(function(item) {
                var view = new ProductItemView({
                    model: item
                });
                $(this.el).append(view.render());
                console.log(view);
            });
           return this;
        }
    });
    var shopView = new ShopView();
    //console.log(shopView);
})(jQuery);

products.json：

[
    {
        "id": "prod_0",
        "price": 85,
        "img": "images/0.jpg",
        "product_name": "Joni Ward"
    },
    {
        "id": "prod_1",
        "price": 73,
        "img": "images/1.jpg",
        "product_name": "Ofelia Ross"
    },
    {
        "id": "prod_2",
        "price": 37,
        "img": "images/2.jpg",
        "product_name": "Nell Anthony"
    },
    {
        "id": "prod_3",
        "price": 60,
        "img": "images/3.jpg",
        "product_name": "Schneider Benton"
    },
    {
        "id": "prod_4",
        "price": 13,
        "img": "images/4.jpg",
        "product_name": "Abigail Newman"
    }
]

this.collection对象（控制台检查员）：

s
_byId: Object
_events: Object
_listenId: "l2"
length: 5
models: Array[5]
0: s
_changing: false
_events: Object
_pending: false
_previousAttributes: Object
attributes: Object
id: "prod_0"
img: "images/0.jpg"
price: 85
product_name: "Joni Ward"
__proto__: Object
changed: Object
cid: "c3"
collection: s
id: "prod_0"
__proto__: n
1: s
2: s
3: s
4: s
length: 5
__proto__: Array[0]
__proto__:

Backbone.js查看不呈现我的json文件

4 个答案: