Backbone model with server-side rendered HTML snippet

Question

I want to start using Backbone.js to better structure my JavaScript files. However, I don't want to redo my application to ouput just JSON via an API. Correct my if I'm wrong, but so far I have the impression that I can still use Backbone.js, even without a JSON API. Now I'm running into a problem where my server returns HTML and the Backbone model doesn't like that and returns an error.

Basically, I want to load an HTML snippet depending on a category:

var Filter = Backbone.Model.extend({
    url: '/filters/',
});
var FilterView = Backbone.View.extend({
    initialize: function() {    
        this.model.on('change', this.updateFilter, this);
        this.changeFilter();
    },

    changeFilter: function() {
        this.model.fetch({data: $.param({category: this.options.category})});
    },

    updateFilter: function(filters) {
        console.log(filters);
        this.$el.html(filters);
    },
});

var filter = new Filter();
var filterView = new FilterView({
    el: $( '#filterContainer' ),
    category: $( '#categorySlug' ).data( 'slug' ),
    model: filter,
});

Now I thought that I can use this simple model to retrieve my HTML snippet via Ajax. The request fires correctly, but Backbone returns an error and updateFilter is never getting called.

Am I not getting something? What do I need to change to make it work with HTML instead of a JSON response? Or shouldn't I use a model at all?

Downvotes and no comments? That's not nice – webjunkie Feb 19 '13 at 12:49 — webjunkie, Feb 19 '13 at 12:49

score 3 · Answer 1 · edited May 23 '17 at 11:58

3

You need to extend your Backbone model to override fetch so that as with the answer from lost you need to pass a datatype to Backbone.Sync

fetch: function(options) {
    return Backbone.Model.prototype.fetch.call(this, _.extend({ dataType: "html"}, options));
}

edited May 23 '17 at 11:58

Community

1
1

answered Jul 03 '13 at 01:05

JProgrammer

2,750
2
25
36

rjz · Answer 2 · 2012-09-08T23:31:51.503

2

This isn't really the way that Backbone was designed to operate, but you may be able to shim your content into a model field (call it snippet) by including an appropriate parse function in your model:

var Filter = Backbone.Model.extend({
  url: '/filters/',
  parse: function (response) {
    return {
      snippet: $(response)
    }
  }
});

Again, you're a little outside of Backbone's natural order, here, but you should now be able to use the usual fetch(), get(), and set() methods to manage the content of the model. For instance,

// in view:
updateFilter: function (filter) {
    this.$el.html(filter.get('snippet'));
},
// etc..

edited Sep 08 '12 at 23:31

answered Sep 08 '12 at 16:12

rjz

16,182
3
36
35

That still doesn't work, I guess because the response is text/html and that gets treated as error somewhere. So what do they mean in the Backbone FAQ when it says "Backbone is agnostic as to whether you use Underscore templates, Mustache.js, direct DOM manipulation, server-side rendered snippets of HTML, or jQuery UI in your render function"? I haven't found a single example with HTML. – webjunkie Sep 08 '12 at 21:21
It shouldn't matter. you might `console.log` the `response` to confirm that jQuery/zepto aren't processing it upstream? – rjz Sep 08 '12 at 23:31

score 2 · Answer 3 · edited May 23 '17 at 12:22

2

In my opinion the problem is that the accept header of the request contains application/json as default which triggers the error. You can tweak the accept header by doing model.fetch({ dataType : 'html'}). The accepted answer to this question: Backbone.js fetch with parameters helped me finding this out.

edited May 23 '17 at 12:22

Community

1
1

answered Jun 25 '13 at 20:45

lost

1,449
1
13
17

score 0 · Answer 4 · answered Apr 18 '13 at 09:55

I think the answer to this problem is that you need to replace the sync method of your backbone model with one that works with HTML. The below code produces models with the data in the 'snippet' value:

sync: function (method, model, options) {
    // NOTE: This generic function won't work for pushing changes
    if (method !== 'read') {
        console.log('Cannot update html model');
        return false;
    }

    // As we're only reading default type to GET - see Backbone.sync
    // for a more generic way of doing this.
    var params = _.extend({ type: 'GET',
        contentType: 'application/xml',
        dataType: 'text'
    });

    var urlError = function () {
        throw new Error('A "url" property or function must be specified');
    };

    // ensure that we have a URL
    if (!params.url) {
        params.url = _.result(model, 'url') || urlError();
    }

    // NOTE: If you extend this function to deal with creates you'll need to ensure
    // params.data is set and make sure that the data isn't processed.
    // See the Backbone.sync methods for more info

    // Finally wrap the backbone success callback to plonk the data in snippet field of an object
    var origSuccess = options.success;
    options.success = function (data, textStatus, xhr) {
        origSuccess({ snippet: data }, textStatus, xhr);
    };

    // Make the request, allowing the user to override any Ajax options.
    var xhr = options.xhr = Backbone.ajax(_.extend(params, options));
    model.trigger('request', model, xhr, options);
    // make the request
    return xhr;
}

The standard backbone reading functions should just work following this. The writing ones will fail, but you can always extend the function to deal with those.

score 0 · Answer 5 · answered Oct 02 '13 at 15:39

This question is a little bit older, but I found a project on git that describes a really good way of updating your models by looping through the items server side and adding them to the collections when the page is rendered.

https://github.com/runemadsen/Backbone-With-Server-Side-Rendering/blob/master/views/modeltest.erb

Backbone model with server-side rendered HTML snippet

5 Answers5

Linked