是否有人使用语义ui与emberjs？

Question

只是想知道是否有人试图使用语义ui与emberjs？

有任何重大缺陷吗？semantic-ui看起来很漂亮和常规......对于浏览器开发的相对新手来说,它看起来像是一个很大的优点而不是其他'全包'的css框架......

Answer 1

我没有使用Ember的Semantic UI,但我已经使用Ember实现并构建了单独的jQuery插件和css框架.

CSS和HTML

语义UI中的CSS不会影响Ember,因为Ember是一个javascript框架,它的css类都有'ember-'前缀.但是,值得注意的是css通配符选择器[class*='input']仍然会以.ember-input为目标.因此,确保Semantic UI的框架选择器是高效且非侵入性的.您可以通过扩展Ember视图或使用在视图/组件中设置了tagNames和classNames的组件,使Semantic UI的预先给定的类名更容易使用.或者,您可以使用返回html的寄存器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的下拉列表组件).您甚至可以创建一个Ember对象,其中包含所有Semantic UI类的键 - 值对映射,以查找每个Semantic 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,您可以通过将它们重建为组件来优化Ember的Semantic UI的js文件.但是,我不建议这样做,因为随着Semantic UI发布新的构建和功能,它将难以维护.您最好的选择可能是使用您的Ember App加载插件,然后在didInsertElement上运行其他可自定义的函数(如Semantic UI的examples目录中的那些函数),如下所示:

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

如果您遇到Semantic UI没有正确添加模块函数的问题,我会看一下插件和DOM中的元素加载和相互交互的顺序.此外,如果您在Rails或Yeoman上运行Ember应用程序或类似的设置,资产管道可能会干扰此处.

如果您计划仅为CSS使用语义UI,那么您应该没有任何问题.否则,我希望有人可以给你一个关于javascript模块的更具体的答案.