disqus通用代码与骨干

时间:2013-05-23 10:27:35

标签: backbone.js requirejs backbone-views disqus

我正在使用disqus作为其评论系统的骨干网站,我使用骨干样板,我注册了一个评论模块,我在其中包含了DISQUS提供的js

我的模块看起来像这样:

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;

});

我的main.html只包含一个id为'disqus_thread'的div,用于查看评论框

我的问题是:在渲染我的视图时没有完成任务并且Chrome控制台显示     未捕获的TypeError:无法调用null embed.js的方法'toLowerCase:65

将此脚本添加到模板时,每件事情都运作良好。

任何建议????

1 个答案:

答案 0 :(得分:0)

基本上,您似乎正在创建一个骨干视图,以在#disqus_thread DIV中初始化和呈现DISQUS小部件,然后根据页面状态重新呈现:

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!所以我们假设#disqus_thread元素已经存在于页面上(因此设置el)。加载模块后,DISQUS将进行初始化。

假设一个事件被解雇,需要加载一个新的Disqus线程:

$('.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
    });
});

然后将#disqus_thread元素中的iFrame重新加载到正确的线程。这是一个非常简单的分层示例,但想象一下在事件哈希或路由器中调用disqus.render({...})

DISQUS Ajax Reset Snippet