2

MinicolorJQueryコンポーネントをEmber.jsアプリケーションに統合しようとしています。統合は簡単なはずですが、私にはうまくいきません...（入力は表示されますが、JQueryコンポーネントはありません）...

ミニカラー統合ガイド： https ：//github.com/claviska/jquery-miniColors

ドキュメントから：jsファイルを挿入し、次の入力を追加するだけです。

私のjsファイル：

App.ColorPicker = Em.TextField.extend({
  type: 'minicolors',
  attributeBindings: ['name'],
   willInsertElement: function() {
    ;
  }
});

htmlファイル

{{view App.ColorPicker placeholder="Background color" name="color" valueBinding="App.MyController.backgroundColor"}}
4

1 に答える 1

4

あなたの問題は、<input type='minicolors' ... />minicolorsの初期化コードがすでに実行された後、emberが要素を動的に追加しているため、新しいminicolors入力が初期化されていないことだと思います。

didInsertElementイベントの代わりにイベントを使用して、willInsertElementミニカラーに動的に追加された要素を作成させることで、例を機能させましたApp.ColorPicker。willInsertElementは、要素が挿入されるときに起動しますが、まだ起動していません。また、didInsertElementは、要素が挿入された後に起動します。minicolorsgithubリポジトリの最新ファイルを使用しました。

App.ColorPicker = Em.TextField.extend({
  type: 'minicolors',
  attributeBindings: ['name'],
   didInsertElement: function() {
       $.minicolors.init();
  }
});

私が抱えていた他の唯一の問題は、cssファイルとカラーピッカーのグラフィック要素を含むpngを確実にロードできるようにする必要があることでした。どうやら、cssファイルとpngファイルがロードできない場合、js部分は機能しません。

于 2012-12-21T21:13:55.993 に答える