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

Question

只是想知道是否有人试图将semantic-ui与emberjs一起使用？

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

Answer 1

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

CSS＆amp; HTML

Semantic 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模块给你一个更具体的答案。