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

Backbone適切にレンダリングできるように、HTML 応答を JSON 形式に変更する必要があります (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 に答える