0

我有包含图像的文件夹；我在文件夹 uploads/ 上调用 fetch，我的 GET 以 HTML 格式返回以下响应（无 json 等）

<h1>Index of /backbone_images/uploads</h1>
<ul><li><a href="/backbone_images/"> Parent Directory</a></li>
<li><a href="2012-12-11%2015.30.221.jpg"> 2012-12-11 15.30.221.jpg</a></li>
<li><a href="ian1.jpg"> in1.jpg</a></li>
<li><a href="imagedummy.png"> imagedummy.png</a></li>

我尝试使用以下代码将/我获取的数据渲染到模型等中：

window.Person = Backbone.Model.extend({});

window.AddressBook = Backbone.Collection.extend({
    url: 'uploads/',// declare url in collection
    model: Person
});

    window.Addresses = new AddressBook();

    window.AppView = Backbone.View.extend({
        el: $('#left_col'),
        initialize: function() {
            Addresses.bind('reset', this.render); // bind rendering to Addresses.fetch()
        },
        render: function(){
            console.log(Addresses.toJSON());
        }
    });

    window.appview = new AppView();
    Addresses.fetch();

但是没有任何东西被渲染或附加到我的左列：所以-->我可以从包含这样的图像的目录中获取吗？另外，我可以对 HTML 响应做什么，如何将其加载到模型中，使其呈现等（如果有任何方法）？

4

2 回答 2

2

您应该将 HTML 响应更改为 JSON 格式，以便Backbone正确呈现它（尽管有一种方法可以显示HTML上面的内容，但这不是推荐的方法，因为它更好地呈现原始数据）。

你可以这样做：

HTML：

<div id="container">
</div> 
<script id="template" type="text/html">
    <li><img src=<%- dir %><%- image %> /></li>
</script>

JavaScript：

$(function(){
    /** Your response object would look something like this. */
    var json = {'parent_directory': 
                   {'dir_desc': 'Index of /backbone_images/uploads',
        'images': [
            {'dir': '/images/', 'image': 'image1.jpg'}, 
            {'dir': '/images/', 'image': 'image2.jpg'}, 
            {'dir': '/images/', 'image': 'image3.jpg'}
        ]
    }};

    /** Create a simple Backbone app. */
    var Model = Backbone.Model.extend({});

    var Collection = Backbone.Collection.extend({
        model: Model
    });

    var View = Backbone.View.extend({
        tagName: 'ul',
        initialize: function() {
            this.render();
        },
        template: _.template($('#template').html()),
        render: function() {
            _.each(this.collection.toJSON(), function(val){ 
                this.$el.append(this.template({
                    image: val.image, 
                    dir: val.dir}));
            }, this);
            return this;
        }
    });

    /** Create a new collection and view instance. */
    var newColl = new Collection(json.parent_directory.images);
    var newView = new View({collection: newColl});
    $('#container').html(newView.el);
});
于 2013-02-21T23:01:05.733 回答
1

您应该将其绑定到sync事件

我也更喜欢使用listenTo

this.listenTo(Addresses, 'sync', this.render)

于 2013-02-21T16:44:29.707 回答