Question

我为sap.m.Input创建了一个自定义扩展。在onAfterRendering中，我想使用jquery-maskmoney来掩盖值，如下所示：

  $('#'+this.getId()+'-inner').maskMoney({ thousands : '', decimal : '.' });'

当我在控制台中应用蒙版时，一切正常。但是当我尝试时在onAfterRendering方法中添加它，当我尝试setValue时出现一些错误：

 amountInputControl.setValue(data.amount); // Its is an instance of NumericInput

错误：

TypeError: Cannot read property 'val' of undefined
    at sap.m.InputBase._getInputValue (InputBase.js:9)
    at sap.m.InputBase.updateDomValue (InputBase.js:32)
    at sap.m.InputBase.setValue (InputBase.js:34)
    at sap.ui.controller.updateFieldsForReference //Here was executed operation setValue

NumericInput.js

jQuery.sap.declare("control.customInputTypes.NumericInput");
            sap.ui.define(['jquery.sap.global', 'sap/m/Input'],

                function(jQuery, BaseInput) {
                    "use strict";

                    var commonControlInput = BaseInput.extend('control.customInputTypes.NumericInput', /** @lends sap.m.Input.prototype */ {
                        metadata: {},
                        renderer : {
                            render : function(oRm, oControl) {
                                sap.m.InputRenderer.render(oRm, oControl); 
                            }
                        }
                    });

         commonControlInput.prototype.onAfterRendering = function () {
                   $('#'+this.getId()+'-inner').maskMoney({ thousands : '', decimal : '.' });
                };

            return commonControlInput;
    }, /* bExport= */ true);

我甚至没有触及InputBase类，所以我想知道什么是错的？如果我不适用这种面膜，一切正常。也许我不能在控件的onAfterRendering方法中使用jQuery？

Answer 1

起初我认为你可能想检查sap.m.MaskInput，但我猜这不完全是你想要的......

无论如何，我会在代码中更改一些内容。这是一个正在运行的jsbin example：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SAPUI5 single file template | nabisoft</title>
        <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
            id="sap-ui-bootstrap"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.m"
            data-sap-ui-bindingSyntax="complex"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-preload="async"></script>
            <!-- use "sync" or change the code below if you have issues -->

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>

        <!-- XMLView -->
        <script id="myXmlView" type="ui5/xmlview">
            <mvc:View
                controllerName="MyController"
                xmlns="sap.m"
                xmlns:core="sap.ui.core"
                xmlns:mvc="sap.ui.core.mvc"
                xmlns:cit="control.customInputTypes">

                <cit:NumericInput value="1219999234" />

            </mvc:View>
        </script>

        <script>
            sap.ui.getCore().attachInit(function () {
                "use strict";

                //### Custom Control ###
                // remove the first parameter in "real" apps
                sap.ui.define("control/customInputTypes/NumericInput",[
                    "jquery.sap.global",
                    "sap/m/Input",
                    "sap/m/InputRenderer"
                ], function(jQuery, Input, InputRenderer) {
                    "use strict";

                    return Input.extend("control.customInputTypes.NumericInput", {

                        init : function () {                          
                          this.addEventDelegate({
                            onAfterRendering : function(){
                              var $input = jQuery("#"+this.getId()+"-inner");
                              $input.maskMoney({
                                thousands : ".",
                                decimal : "," 
                              }).maskMoney("mask");
                            }.bind(this)
                          });
                        },

                        renderer : InputRenderer

                    });
                });

                //### Controller ###
                sap.ui.define([
                    "sap/ui/core/mvc/Controller"
                ], function (Controller) {
                    "use strict";

                    return Controller.extend("MyController", {
                        onInit : function () { 

                        }
                    });
                });

                //### THE APP: place the XMLView somewhere into DOM ###
                sap.ui.xmlview({
                    viewContent : jQuery("#myXmlView").html()
                }).placeAt("content");

            });
        </script>

    </head>

    <body class="sapUiBody">
        <div id="content"></div>
    </body>
</html>

扩展sap.m.Input：onAfterRendering方法不起作用

1 个答案: