9

依存関係管理にrequirejsも使用しているAngularアプリでwebshimsポリフィルを使用しようとしています。特定のボタンまたは入力がどのフォームに属しているかをブラウザに伝えるおよびのformようなフォームフィールドに属性がないことをシムしようとしています。IE9 にはこの機能がありません。inputbutton

このポリフィルを使用する最善の方法は、フォーム ディレクティブを作成し$.webshims.polyfill('forms')、リンク関数内で呼び出すことであると考えました。

ディレクティブ 
define(['angular', 'webshims'], function(angular) {
  return angular.module('myApp').directive('form', ['$window', function($window) {
    return {
      restrict: 'E',
      scope: false,
      link: function($scope, iElement, iAttrs) {
        if (!(window.Modernizr.input.placeholder || window.Modernizr.input.autofocus)) {
          $.webshims.setOptions({
            waitReady: false
          });
          $.webshims.polyfill('forms');
        }
      }
    };
  }
]);

これが私が現在 webshims ポリフィルをロードしている方法です:

私のRequirejs構成 
app: {
  options: {
    baseUrl: 'src/apps',
    stubModules: ['cs'],
    paths: {
      jquery: '../public/components/jquery/jquery',
      ....
      angular: '../public/components/angular/angular',
      ....
      webshims: '../public/components/webshim/src/polyfiller',
    },
    shim: {
      angular: {
        deps: ['jquery'],
        exports: 'angular'
      },
      ...
      priority: ['angular']
    }
  }
}

問題は、シムがロードされ、正しい関数を呼び出しても、IE9 にはまだ HTML5 フォーム属性 (プレースホルダー、フォーム属性など)に問題があるため、シムが機能していないように見えることです。

ここで何が欠けていますか？

4

2 に答える 2

5

私はAngularの経験がないので、「フォーム」ディレクティブでこれを行うというあなたの決定が正しいかどうかはわかりません(しかし、私はそれを疑っています)。

しかし最初に: webshims ポリフィラー ファイルは、「ポリフィラー」と呼ばれる名前付き amd モジュールとして登録されます。Webshim の名前を polyfiller に変更するとよいでしょう

define(['angular', 'polyfiller'], function(angular)

と：

polyfiller: '../public/components/webshim/src/polyfiller',

define 関数内では、polyfill メソッドを呼び出す前に basePath も正しく設定する必要があります。

webshims.setOptions({
   waitReady: false,
   basePath: '../public/components/webshim/src/shims/'
});

さらに、オートフォーカスとプレースホルダーは IE10 でサポートされていますが、form 属性は IE11 でもサポートされていません。そのため、Modernizr テストを削除する必要があります。

それでは、現在の問題が何であるかを見てみましょう。

IE9 のコンソールで次のコードを実行できますwebshims.isReady('forms')か?

true の場合: フォームの準備ができている場合は、IE9 のコンソールで次のコードを実行します$('body').updatePolyfill()。これは役に立ちますか？

false の場合: IE9 のコンソールで次のコードを実行します。webshims.modules["form-core"].loaded

true または undefined/false を返しますか。

undefined/false を返す場合: a) webshims.polyfill('forms'); を確認してください。が実際に呼び出され、b) ネットワーク エラーが発生していない -> ファイルが 404 なしで読み込まれている場合は、上記の basePath 構成も参照してください。

webshims の読み込みと実行について:

通常、アプリの初期化時に webshim を一度ロードする必要があります。そして、ビューが変更.updatePolyfillされるたびに、changend であった dom 要素を呼び出す必要があります。

一部のフレームワークには、このための特別なイベントがあります。たとえば、jQuery モバイルは pageinit イベントを使用します。

この場合 (jQM)、次のように記述します。

$(document).on('pageinit', function(e){
    $(e.target).updatePolyfill();
});

一部のフレームワークでは、setTimeout を使用する必要があります。

render: function(target){
    setTimeout(function(){
        $(target).updatePolyfill();
    }, 0);
}
于 2013-12-17T17:07:31.723 に答える