自定义评论表单模块

时间:2018-08-11 17:49:17

标签: apostrophe-cms

好的,我不知道我在代码中哪里写错了。但是在show.html中提交评论时,它不会显示评论。在我的show.html中,我有单身人士:

    <section class="comment-area">
        {{ apos.singleton(data.page, 'commentArea', 'comments-form') }}
    </section>

在我的comments-form : {}中:

var async = require('async');
module.exports = {
    extend : 'apostrophe-pieces',
    name : 'comments-form',
    label : 'Comments Form',
    pluralLabel : 'Comments',
    alias : 'commentsForm',
    addFields : [
        {
            name: 'title',
            label: 'Page',
            type: 'string',
            required: true,
            contextual : true
        },
        {
            name : 'readerName',
            label : 'Reader\'s Name',
            type :'string',
            required : true
        }, 
        {
            name: 'comment',
            label: 'Comment',
            type: 'string',
            textarea: true,
            required: true
        }
    ],
    permissionsFields : false,
    afterConstruct : function(self){
        self.setSubmitComments();
    },
    construct  :function(self,options){

        self.beforeSave = function(req ,piece , options ,callback){
            piece.title = 'portfolio';
            return callback();
        }

        self.setSubmitComments = function(){
            self.submitComments = self.apos.schemas.subset(self.schema , 
                ['title' , 'readerName' , 'comment']
            );
        }

        self.submit = function(req , callback){
            var piece = {};

            return async.series([
                convert,
                insert
            ] ,callback);

            function convert(callback){
                return self.apos.schemas.convert(req , self.schema , 'form' , req.body , piece , callback);
            }
            function insert(callback){
                return self.insert(req , piece , {permissions : false},callback);
            }
        }
    }
}

在我的comments-forms-widgets : {}中:

module.exports = {
    extend : 'apostrophe-pieces-widgets',
    label : 'Comments Widgets',
    contextualOnly : true,
    scene : 'user', // to enable AJAX on page
    construct : function(self , options){
        self.pushAsset('script' , 'always' , {when : 'always'});
        self.pushAsset('stylesheet' , 'commentWidget' , {when : 'always'});

        self.forms = self.apos.commentsForm;

        self.output = function(widget , options){
            return self.partial(self.template , {
                widget : widget,
                options :options,
                manager : self,
                schema : self.forms.submitComments
            });
        };

        self.route('post' , 'comments' , function(req , res){
            return self.forms.submit(req, function(err){
                return res.send({status : err ? 'error' : 'ok'});
            })
        });

        var superGetCreateSingletonOptions = self.getCreateSingletonOptions;

        self.getCreateSingletonOptions = function(req){
            var options = superGetCreateSingletonOptions(req);
            options.submitComments = self.forms.submitComments;
            options.piece = self.forms.newInstance();
            return options;
        }
    }
}

在我的/comments-forms-widgets/views/widget.html中:

{% import "apostrophe-schemas:macros.html" as schemas %}
<form class="comment-widget" style="padding: 50px;" data-contact-form>
    <h4>Leave a comment</h4>
    {{ schemas.fields(data.schema , {tabs : false}) }}
    <button type="submit" style="padding: 10px;">Submit</button>
</form>

最后在我的always.js中:

apos.define('comments-form-widgets', {
    extend: 'apostrophe-pieces-widgets',
    construct: function (self, options) {
        self.play = function ($widget, data, options) {
            var $form = $widget.find('[data-contact-form]');
            console.log("Forms ?" , $form);
            var schema = self.options.submitComments;
            console.log("Schema ?" , schema);
            var piece = _.cloneDeep(self.options.piece);
            return apos.schemas.populate($form , self.schema , self.piece , function(err){
                if(err){
                    alert('A problem occured setting up the contact form');
                    return;
                }
                enableSubmit();
            });

            function enableSubmit(){
                $form.on('submit' , function(){
                    submit();
                    console.log("Submit and Return False");
                    return false;
                });
            }

            function submit(){
                return async.series([
                    convert,
                    submitToServer
                ],function(err){
                    if(err){
                        alert('Something was not right. Please review your submission');
                    }
                    console.log("Submit Sucess");
                })
            }

            function convert(callback){
                return apos.schemas.convert($form , schema , piece,callback);
            }

            function submitToServer(callback){
                return self.api('comments' ,piece, function(data){
                    if(data.status === 'ok'){
                        // All is well
                        return callback(null);
                    }
                    // API Level error
                    return callback('error');
                },function(err){
                    // Transport-level error
                    return callback(err);
                });
            }
        };
    }
});
  

请帮助,可能是代码中的错误/拼写错误。但是这个问题以前已经尝试过许多解决方案。我只想在show.html(pieces-pages)中启用评论

1 个答案:

答案 0 :(得分:1)

在您的apos.singleton呼叫中,您传递的是窗口小部件类型名称comments-form,但是您的窗口小部件模块称为comments-forms-widgets(请注意复数)。

您应重命名模块(至comments-form-widgets)或在单例调用(comments-forms)中使用正确的名称。

还要检查apostrophe-pieces-submit-widgets模块是否已经执行了您要在此处执行的操作。