Ninja Forms - Backbone / Marionette 上的表单准备就绪/初始化事件

问题描述 投票:0回答:2

我目前正在使用 WordPress 的“NinjaForms”插件,它为后端提供自定义表单管理。它基于 Marionette / Backbone JS。经过一些研究,我在输入更改和表单提交时触发 JavaScript 函数没有问题。但是,一旦表单初始化/呈现/显示(实际上是其中任何一个),我还没有找到一种方法来捕获事件。

我现在正在做的是初始化一个 Marionette 对象,向收音机添加监听器,然后添加函数以在事件上执行它:

if(typeof Marionette !== 'undefined') {
    var mySubmitController = Marionette.Object.extend( {
        initialize: function() {
            // init listener
            this.listenTo( Backbone.Radio.channel( 'forms' ), 'view:show', this.initAction);
            // field change listener
            this.listenTo( Backbone.Radio.channel( 'fields' ), 'change:modelValue', this.valueChanged);
            // submit listener
            this.listenTo( Backbone.Radio.channel( 'forms' ), 'submit:response', this.actionSubmit );
        },

        // init action
        initAction: function() {
            console.log("init");
        },

        // input update action
        valueChanged: function(model) {
            console.log("update");
        },

        // submit action
        actionSubmit: function( response ) {
            // handled via php

            console.log("submit");
        },
    });

    // initialise listening controller for ninja form
    new mySubmitController();
}

但是,

this.listenTo( Backbone.Radio.channel( 'forms' ), 'view:show', this.initAction);
线不起作用。我已经尝试了事件
view:render
view:show
show:view
render:view
,但没有成功。

我在 Backbone / Marionette 文档中搜索,但找不到合适的事件。这个问题可能是重复的,但我确实找不到任何有关 Backbone 表单初始化事件的主题。

javascript wordpress backbone.js marionette ninja-forms
2个回答
5
投票

经过长时间的搜索、谷歌搜索和挫折,我找到了解决方案。使用以下 JavaScript 代码,您可以在表单渲染上执行代码:

// if there is a ninja form on this page
if(typeof Marionette !== 'undefined') {
    var mySubmitController = Marionette.Object.extend( {
        initialize: function() {
            // init listener
            this.listenTo( nfRadio.channel( 'form' ), 'render:view', this.initAction );
        },

        // init action
        initAction: function() {
            // code to execute on form render
        },
    });

    // initialise listening controller for ninja form
    new mySubmitController();
}

0
投票

我想在 Ninja Forms 初始化后实现一些 JS,这个方法对我有用。

if (typeof Marionette !== 'undefined') {
    var mySubmitController = Marionette.Object.extend({
        initialize: function () {
            this.listenTo(nfRadio.channel('form'), 'render:view', this.initAction);
        },
        initAction: function () {
            jQuery(document).ready(function ($) {
                jQuery('#nf-field-364,#nf-field-329,#nf-field-302,#nf-field-284').on('input', function () {
                    jQuery(this).trigger('change')
                })
            })
        },
    });
    new mySubmitController();
}

© www.soinside.com 2019 - 2024. All rights reserved.