0

関数から jQuery ウィジェット インスタンスを返すことが可能かどうか疑問に思っています。それ以来、自分のやりたいことを行うためのまったく別の方法を考え出したので、これは自分の好奇心を満たすためです。

2 つのウィジェットがあり、一方が他方を継承しているとします。また、childWidget を持つコードや、parentWidget を持つコードもあります。しかし、重要なのは、親ウィジェットのメソッド (この場合は doSomething()) を呼び出すことだけです。childWidget('doSomething') を呼び出すか、parentWidget('doSomething') を呼び出すかを判断するために毎回 if ステートメントを記述するのではなく、このコードを 1 回記述し、正しいウィジェットを返してから doSomething() を呼び出すことはできますか?

非常に初歩的な例:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Little widget test</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

  <script>
  $(function() {
        //create parentWidget with doSomething function
    $.widget( "custom.parentWidget", {
      options: {
        widgetName: 'parent'
      },
      _create: function() {
        this.element
          // add a class for theming
          .addClass( this.options.widgetName );
      },
      doSomething: function( event ) {
        alert(this.options.widgetName);

      }
    });

    //create child widget; just overrides the widgetName property
    $.widget( "custom.childWidget", $.custom.parentWidget, {
      options: {
        widgetName: 'child'
      }
    });

        //make an instance of each widget
    $( "#my-widget1" ).parentWidget();
    $( "#my-widget2" ).childWidget();

    //function to get the widget instance
    $.fn.getWidget = function() {
            if($(this).is('.parent'))
                return $(this).parentWidget();

            return $(this).childWidget();
        }; 

    //this does not work
    $( "#my-widget1" ).getWidget()('doSomething');

  });
  </script>
</head>
<body>

<div>
  <div id="my-widget1">parent widget</div>
  <div id="my-widget2">child widget</div>
</div>


</body>
</html>
4

1 に答える 1

0

私のテストに基づいて、これに対する答えは「いいえ」であると確信しています。

私が解決したのは、共通の関数を介してウィジェットへのすべての呼び出しをファネリングすることでした。これは、それぞれが 1 つのパラメーターを含む非常に単純なウィジェットへの呼び出しのみを行う必要があるためです。

$.fn.callMyWidget = function (params) {
    if ($(this).is('.parent')) {
        $(this).parentWidget(params);
    }
    else {
        $(this).childWidget(params);
    }
}

//so now I can do this:
$( "#my-widget1" ).callMyWidget('doSomething');
于 2013-09-24T17:59:28.513 に答える