3

emberjsでセマンティックUIを使おうとした人がいるのだろうか？

大きな落とし穴はありましたか？semantic-ui は見栄えがよく、規則的です ... ブラウザ開発の比較的初心者にとっては、他の「すべてを含む」css フレームワークと比べて大きなプラスのように見えます ...

4

1 に答える 1

9

私は Ember でセマンティック UI を使用したことはありませんが、Ember で個々の jQuery プラグインと css フレームワークを実装して構築しました。

CSS & HTML

Ember は JavaScript フレームワークであり、すべての CSS クラスに「ember-」プレフィックスが付いているため、セマンティック UI の css は Ember に影響しません。ただし、css ワイルドカード セレクター [class*='input'] は引き続き .ember-input を対象とすることに注意してください。したがって、セマンティック UI のフレームワークのセレクターが効率的で非侵襲的であることを確認してください。おそらく、Ember ビューを拡張するか、ビュー/コンポーネントで tagNames と classNames が設定されたコンポーネントを使用することで、セマンティック UI の事前に指定されたクラス名を操作しやすくすることができます。または、html を返す register Handlebars ヘルパーを使用することもできます。例えば：

Em.Handlebars.helper('button', function(unescapedText) {
    var type = Handlebars.Utils.escapeExpression(unescapedText);

    buttonString = '<button class="semantic-ui-button">' + text + '</button>';
    return new Handlebars.SafeString(buttonString);
});

明らかに、これは非常に単純化された答えです。より複雑にして、コンテンツを含むブロック ハンドルバー ヘルパーを使用することもできます (たとえば、任意の数の異なる LI を含むドロップダウン リスト コンポーネント)。すべてのセマンティック UI クラスのキーと値のペアのマップを含む Ember オブジェクトを作成して、各セマンティック UI コンポーネントのクラス、tagName などを検索することもできます。例えば：

App.SemanticUi = Em.Object.create({
    components: [
        button: {
            class: 'semantic-ui-button',
            tagName: 'button',
        }
    ],
});

App.Handlebars.helper('button', function() {
    // Some logic ...
    var class = App.SemanticUi.get('components')[button];
    // Some more logic...
});

これは単なる理論上の使用例です。

Javascript

JavaScript に関しては、Semantic UI の js ファイルをコンポーネントとして再構築することで、Ember 用に最適化できます。ただし、セマンティック UI が新しいビルドと機能をリリースするため、維持するのが難しいため、これはお勧めしません。おそらく最善の方法は、Ember アプリでプラグインをロードしてから、次のように didInsertElement で追加のカスタマイズ可能な関数 (セマンティック UI のサンプル ディレクトリにある関数など) を実行することです。

App.HomeView = Em.View.extend({
    customFunctions: function() {
        // Custom Semantic UI logic with DOM targeting here
        $('.ui.dropdown').dropdown({
            // Dropdown stuff, etc
        });
    }.on('didInsertElement'),
});

セマンティック UI がモジュール関数を正しく追加しないという問題に遭遇した場合は、プラグインと DOM 内の要素が読み込まれ、相互に対話する順序を調べます。また、Ember アプリを Rails や Yeoman、または同様の設定で実行している場合、アセット パイプラインがここで干渉する可能性があります。

CSS のためだけにセマンティック UI を使用することを計画している場合、問題はないはずです。それ以外の場合は、javascript モジュールに関して、誰かがより具体的な回答を提供してくれることを願っています。

于 2014-03-10T18:32:52.517 に答える