Fatal编程技术网
  • symfony/
  • Symfony敲除：自定义绑定处理程序无法侦听绑定处理程序

Symfony敲除：自定义绑定处理程序无法侦听绑定处理程序

symfony knockout.js twig

Symfony敲除：自定义绑定处理程序无法侦听绑定处理程序,symfony,knockout.js,twig,knockout-binding-handlers,Symfony,Knockout.js,Twig,Knockout Binding Handlers,在我的symfony3项目中，我使用knockout.js制作了一个表单，希望通过ajax提交。但对于一些人来说，它使浏览器重定向到动作中，而不是通过ajax执行 我想在名为app/FosUserBundle/views/Registration/register.html.twig的文件中使用ajax提交的表单是： {% extends "FOSUserBundle::layout.html.twig" %} {% block fos_user_content %} {% form_t

在我的symfony3项目中，我使用knockout.js制作了一个表单，希望通过ajax提交。但对于一些人来说，它使浏览器重定向到动作中，而不是通过ajax执行

我想在名为
app/FosUserBundle/views/Registration/register.html.twig
的文件中使用ajax提交的表单是：

{% extends "FOSUserBundle::layout.html.twig" %}

{% block fos_user_content %}

  {% form_theme form '::themes/register-form-theme.html.twig' %}
  {% trans_default_domain 'FOSUserBundle' %}

<div class="container" data-bind="with:registerVm">
  <div class="register-box">
    <div class="register-logo">
        <h1>PhotoShare!</h1>
    </div>
    <div class="register-box-body">
      <p class="login-box-msg">Register a new membership</p>
      {{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'),'attr':{'data-bind':'formSubmitAjax:\{\'success\':registerComplete\}'}}) }}
        {{ form_widget(form) }}
        <div class="row">
          <div class="col-xs-4">
            <input type="submit" class="btn btn-primary btn-block btn-flat" value="{{ 'registration.submit'|trans }}" />
          </div>
        </div>
      {{ form_end(form) }}
  </div>
</div>

{% endblock fos_user_content %}
此表单通过此小树枝模板上的pager.js呈现：

{% extends "base.html.twig" %}

{% set classes=''%}

{% block javascriptsHeader %}
    <script src="{{asset('assets/vendor/require.js')}}" data-main="{{path('main_javascript')}}" ></script>
{% endblock %}

{% block stylesheets %}
  {{ parent() }}
  <link rel="stylesheet" type="text.css" href="{{ asset('assets/vendor/xeditable/css/bootstrap-editable.css') }}" >
  <style>
    #message-area{
        z-index:9999;
    }
    .page{
        min-height:100%;
        min-width:100%;
    }
  </style>
{% endblock %}

{% block body %}
    <div id="message-area"></div>
    <div class="hold-transition register-page page" data-bind="page: {id:'register', title:'Register', role:'start', sourceOnShow: '{{ path('fos_user_registration_register') }}', withOnShow:function(a){registerVm.init();},with:registerVm}"></div>
{% endblock %}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        {% block stylesheets %}
          <link rel="stylesheet" type="text/css" href="{{asset('assets/vendor/bootstrap/css/bootstrap.css')}}" >
          <link rel="stylesheet" type="text/css" href="{{asset('assets/vendor/adminlte/adminlte.css')}}" >
          <link rel="stylesheet" type="text/css" href="{{asset('assets/vendor/adminlte/skin-blue.css')}}" >
        {% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />

        {% block javascriptsHeader %}
        {% endblock %}

    </head>
    <body class="{{ classes }}">
      {% block body %}
      {% endblock body %}

      {% block javascriptsFooter %}

      {% endblock javascriptsFooter %}
   </body>
</html>

requirejs.config({
  baseUrl:'{{asset('assets')}}',
  paths:{
    'text':'{{ asset('assets/vendor/text') }}',

    'knockout':'{{ asset('assets/vendor/knockout') }}',
    'pager':"{{asset('assets/vendor/pager')}}",
    'bootstrap':"{{asset('assets/vendor/bootstrap/js/bootstrap')}}",

    'jquery':"{{asset('assets/vendor/jquery')}}",
    'jquery_ui':"{{ asset('assets/vendor/jquery-ui') }}",

    'xeditable_bootstrap':"{{ asset('assets/vendor/xeditable/xeditable') }}",
    'ko_xeditable':"{{ asset('assets/vendor/knockout/knockout.x-editable') }}",

    'jquery-fileupload':"{{ asset('assets/vendor/jquery_fileupload/jquery.fileupload') }}",
    'jquery-iframe':"{{ asset('assets/vendor/jquery_fileupload/jquery.iframe-transport') }}",
    'jquery-ui-widget':"{{ asset('assets/vendor/jquery_fileupload/jquery.ui.widget') }}",

    'masterViewModel':"{{ asset('assets/js/viewModels/masterViewModel') }}",
    'registerViewModel':"{{ asset('assets/js/viewModels/registerPageViewModel') }}",
    {% block Viewmodels %}
    {% endblock %}

    'formPost':"{{ asset('assets/js/bindingHandlers/formPost') }}",

    'compMessage':"{{ asset('assets/js/components/message/message') }}",
    'extBooleanToggle':'assets/js/extenders/booleanToggle',
  },
  shim:{
    'pager': ['jquery', 'knockout'],
    'jquery_ui':['jquery'],
    'bootstrap':['jquery'],
    'xeditable_bootstrap':['jquery-ui','bootstrap'],
    'ko_xeditable':['xeditable_bootstrap'],
    'jquery-fileupload':['jquery-iframe','jquery-ui-widget'],
    'jquery-ui-widget':['jquery_ui'],//Jquery_ui already load jquery
    'jquery-iframe':['jquery']
    {% block CustomShim %}
    {% endblock %}
    },
  waitSeconds: 200,
});

define(['jquery','knockout','pager','masterViewModel','bootstrap'],function($,ko,pager,masterViewModel)
{
    $(document).ready(function(){
        pager.extendWithPage(masterViewModel);
        ko.applyBindings(masterViewModel);
        pager.start();
    });
});
使用is初始化knockout和pager.js的主视图模型具有以下内容：

define(['knockout','jquery','registerViewModel'],function(ko,$,registervm){

    function MasterViewModel()
    {
        var self=this;      
        self.registerVm=new registervm(self);
    }

    return new MasterViewModel();
})
你知道为什么没有调用
formSubmitAjax
。

你需要确保在调用
ko.applyBindings
之前加载绑定处理程序。大概是这样的：

define(['jquery','knockout','pager','masterViewModel','bootstrap', 'formPost'], function($,ko,pager,masterViewModel)
{
    $(document).ready(function(){
        pager.extendWithPage(masterViewModel);
        ko.applyBindings(masterViewModel);
        pager.start();
    });
});
我在require.js
shim
一节中添加了以下内容，工作起来很有魅力：

 'masterViewModel':['registerViewModel'],
 'registerViewModel':['formPost']
生成以下main.js.twig

requirejs.config({
  baseUrl:'{{asset('assets')}}',
  paths:{
    'text':'{{ asset('assets/vendor/text') }}',

    'knockout':'{{ asset('assets/vendor/knockout') }}',
    'pager':"{{asset('assets/vendor/pager')}}",
    'bootstrap':"{{asset('assets/vendor/bootstrap/js/bootstrap')}}",

    'jquery':"{{asset('assets/vendor/jquery')}}",
    'jquery_ui':"{{ asset('assets/vendor/jquery-ui') }}",

    'xeditable_bootstrap':"{{ asset('assets/vendor/xeditable/xeditable') }}",
    'ko_xeditable':"{{ asset('assets/vendor/knockout/knockout.x-editable') }}",

    'jquery-fileupload':"{{ asset('assets/vendor/jquery_fileupload/jquery.fileupload') }}",
    'jquery-iframe':"{{ asset('assets/vendor/jquery_fileupload/jquery.iframe-transport') }}",
    'jquery-ui-widget':"{{ asset('assets/vendor/jquery_fileupload/jquery.ui.widget') }}",

    'masterViewModel':"{{ asset('assets/js/viewModels/masterViewModel') }}",
    'registerViewModel':"{{ asset('assets/js/viewModels/registerPageViewModel') }}",
    {% block Viewmodels %}
    {% endblock %}

    'formPost':"{{ asset('assets/js/bindingHandlers/formPost') }}",
    //'debug':"{{ asset('assets/js/bindingHandlers/debug') }}",

    'compMessage':"{{ asset('assets/js/components/message/message') }}",
    'extBooleanToggle':'assets/js/extenders/booleanToggle',
  },
  shim:{
    'pager': ['jquery', 'knockout'],
    'jquery_ui':['jquery'],
    'bootstrap':['jquery'],
    'xeditable_bootstrap':['jquery-ui','bootstrap'],
    'ko_xeditable':['xeditable_bootstrap'],
    'jquery-fileupload':['jquery-iframe','jquery-ui-widget'],
    'jquery-ui-widget':['jquery_ui'],//Jquery_ui already load jquery
    'jquery-iframe':['jquery'],
    'masterViewModel':['registerViewModel'],
    'registerViewModel':['formPost']
    {% block CustomShim %}
    {% endblock %}
    },
  waitSeconds: 200,
});

define(['jquery','knockout','pager','masterViewModel','bootstrap'],function($,ko,pager,masterViewModel)
{
    $(document).ready(function(){
            pager.extendWithPage(masterViewModel);
            ko.applyBindings(masterViewModel);
            pager.start();
    });
});
工作起来很有魅力

您可能应用绑定太早了，我测试了您的
formSubmitAjax
，结果很好。因此，请在
$（文档）中尝试
setTimeout
。准备好
查看这是否是问题。我已经设置了超时，但问题仍然存在。Nope仍然刷新。 
requirejs.config({
  baseUrl:'{{asset('assets')}}',
  paths:{
    'text':'{{ asset('assets/vendor/text') }}',

    'knockout':'{{ asset('assets/vendor/knockout') }}',
    'pager':"{{asset('assets/vendor/pager')}}",
    'bootstrap':"{{asset('assets/vendor/bootstrap/js/bootstrap')}}",

    'jquery':"{{asset('assets/vendor/jquery')}}",
    'jquery_ui':"{{ asset('assets/vendor/jquery-ui') }}",

    'xeditable_bootstrap':"{{ asset('assets/vendor/xeditable/xeditable') }}",
    'ko_xeditable':"{{ asset('assets/vendor/knockout/knockout.x-editable') }}",

    'jquery-fileupload':"{{ asset('assets/vendor/jquery_fileupload/jquery.fileupload') }}",
    'jquery-iframe':"{{ asset('assets/vendor/jquery_fileupload/jquery.iframe-transport') }}",
    'jquery-ui-widget':"{{ asset('assets/vendor/jquery_fileupload/jquery.ui.widget') }}",

    'masterViewModel':"{{ asset('assets/js/viewModels/masterViewModel') }}",
    'registerViewModel':"{{ asset('assets/js/viewModels/registerPageViewModel') }}",
    {% block Viewmodels %}
    {% endblock %}

    'formPost':"{{ asset('assets/js/bindingHandlers/formPost') }}",
    //'debug':"{{ asset('assets/js/bindingHandlers/debug') }}",

    'compMessage':"{{ asset('assets/js/components/message/message') }}",
    'extBooleanToggle':'assets/js/extenders/booleanToggle',
  },
  shim:{
    'pager': ['jquery', 'knockout'],
    'jquery_ui':['jquery'],
    'bootstrap':['jquery'],
    'xeditable_bootstrap':['jquery-ui','bootstrap'],
    'ko_xeditable':['xeditable_bootstrap'],
    'jquery-fileupload':['jquery-iframe','jquery-ui-widget'],
    'jquery-ui-widget':['jquery_ui'],//Jquery_ui already load jquery
    'jquery-iframe':['jquery'],
    'masterViewModel':['registerViewModel'],
    'registerViewModel':['formPost']
    {% block CustomShim %}
    {% endblock %}
    },
  waitSeconds: 200,
});

define(['jquery','knockout','pager','masterViewModel','bootstrap'],function($,ko,pager,masterViewModel)
{
    $(document).ready(function(){
            pager.extendWithPage(masterViewModel);
            ko.applyBindings(masterViewModel);
            pager.start();
    });
});