3

只是想知道是否有人尝试将语义 UI与 emberjs 一起使用？

有什么重大的陷阱吗？语义用户界面看起来不错且规则......对于浏览器开发的相对新手来说，与其他“全包”css框架相比，它看起来像是一个很大的优势......

4

1 回答 1

9

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

CSS & 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 对象，其中包含所有语义 UI 类的键值对映射，以查找每个语义 UI 组件的类、标记名等。例如：

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 的 Semantic UI 的 js 文件。但是，我不建议这样做，因为随着 Semantic 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 中的元素加载和相互交互的顺序。此外，如果您在 Rails 或 Yeoman 或类似设置上运行 Ember 应用程序，则资产管道可能会在此处干扰。

如果您打算只为 CSS 使用语义 UI，那么您应该没有任何问题。否则，我希望有人可以就javascript模块给你一个更具体的答案。

于 2014-03-10T18:32:52.517 回答