2

テキスト入力を CSS にリンクして、入力の値を変更すると特定の CSS 値が更新される WordPress テーマ (ライブ) カスタマイザーを再作成したいと考えています。

テンプレートに {{ Ember.TextField }} を作成<style>し、Ember 変数を含む正しい CSS 宣言を含むタグを作成して、CSS を更新しました。<style>タグ内の変数が DOM の外にあるため、Ember がアクセスできないというエラーが表示されます。それは理にかなっていますが、生成されたコードは<script>inside a <style>inside another<script>で、少し醜いです。

入力/テキストエリア/選択フィールドを CSS プロパティにリンクする (クリーンな) Ember の方法があるかどうか疑問に思っています。Ember.js - Update CSS width based on an object propertyを読みましたが、更新したいすべてのタグに {{bindAttr}} を追加することはおそらく逆効果になるので、グループ化する方法があるかどうか Ember の専門家に尋ねていますこれらすべての変更は、私が必要とすることを行うために何らかの方法で行われます。

それ以外の場合、これは jQuery の自家製プラグインになると思いますが、Ember マジックをあきらめる前に、完全に確実に実行したいと思います ;)

ありがとう！

4

1 に答える 1

2

この場合、オブザーバーを使用するとうまくいくと思います。

App.StyleTextField = Ember.TextField.extend({

  valueDidChange: function() {
    var value = this.get('value');
    var cssText = 'h1 { color: ' + value + '; }'; // You could even use Mustache to generate this if you were so inclined

    // create a <style /> tag with cssText and dump it into the <head />
  }.observes('value')
});
于 2013-03-07T05:08:50.403 に答える