disqus universal code with backbone

Question

I'm working on backbone website that uses disqus as its commenting system, I use backbone boilerplate, and I registered a module for the comment, I included in it the js provided by DISQUS

my module looks like this :

define([
'namespace',
'use!backbone'
], function(namespace, Backbone) {

var Comment = namespace.module();

Comment.Views.CommentView = Backbone.View.extend({
    template: "app/tpl/comment/main.html",
    render: function(done) {
        var view = this;
        namespace.fetchTemplate(this.template, function(tmpl) {
            view.el.innerHTML = tmpl();
            if (_.isFunction(done)) {
                done(view.el);
            }
        });
    },
    commentScript: function() {
        console.log('Comment Script INIT.');
        var disqus_identifier = 'a unique identifier for each page where Disqus is present';
        var disqus_title = 'a unique title for each page where Disqus is present';
        var disqus_url = 'a unique URL for each page where Disqus is present';
        var disqus_developer = 1;
        var disqus_shortname = 'dandin95'; // required: replace example with your forum shortname
        /* * * DON'T EDIT BELOW THIS LINE * * */
        (function() {
            var dsq = document.createElement('script');
            dsq.type = 'text/javascript';
            dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';

            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    }
});

return Comment;

});

my main.html only contain a div with id 'disqus_thread' that used view the comment box

My issue is : when rendering my view nothing done and chrome console shows Uncaught TypeError: Cannot call method 'toLowerCase' of null embed.js:65

when adding this script to the template every thing working well.

Any advice ????

emran emran · Accepted Answer · 2013-09-02T22:45:25

Basically, it looks like you are creating a backbone view to initialize and render the DISQUS widget within the #disqus_thread DIV and then re-render based on the state of the page:

define('disqus', [], function(){

    var disqus_shortname = DISQUS_SHORTNAME,
        disqus_identifer = INDEX_IDENT,
        disqus_title = DISCOVERY_TITLE,
        disqus_url = URL_HERE,
        disqus_developer = '1';  // could be deprecated?

    var DisqusView = Backbone.View.extend({
        el: '#disqus_thread',
        initialize: function() {
            // DISQUS universal code:
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        },

        render: function(options) {

            DISQUS.reset({
                options: options,
                reload: true,
                config: function(){
                    this.page.identifer = options.identifer;
                    this.page.title = options.title;
                }
            });

        }
    });

    var disqusView = new DisqusView();

    return disqusView;
});

OK! so lets make the assumption that the #disqus_thread element already exists on the page (hence setting el). When the module is loaded, DISQUS will do the initialization.

Say an event is fired off that requires the loading of a new Disqus thread:

$('.article_title').on('click', function(e) {
    var $post = $(e.target).attr('id');
    disqus.render({
        identifier: $post,  // OR however you decide to determine these attributes
        title: $post
    });
});

The iFrame within the #disqus_thread element will then be reloaded to the proper thread. This is a very thinly layered example, but imagine calling disqus.render({...}) within an events hash or router.

DISQUS Ajax Reset Snippet

disqus universal code with backbone

1 Answers