有人在emberjs中使用语义UI吗?

Ben

只是想知道是否有人尝试将embering -ui与emberjs一起使用

有什么大陷阱吗?语义ui看起来不错且常规...对于浏览器开发的相对新手来说,与其他“包罗万象”的css框架相比,它似乎是一大优势...

邓肯·沃克

我没有将Emantic UI与Ember一起使用,但是我已经与Ember实现并构建了单独的jQuery插件和CSS框架。

CSS和HTML

语义UI中的css不会影响Ember,因为Ember是一个javascript框架,并且它的css类都带有'ember-'前缀。不过,值得注意的是,css通配符选择器[class * ='input']仍将.ember-input作为目标。因此,请确保语义UI框架的选择器是有效的且非侵入性的。通过扩展Ember视图或使用在视图/组件中设置了tagNames和classNames的组件,可以使语义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类的键-值对映射,以查找类,tagName以及每个语义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...
});

这只是一个理论上的用例。

Java脚本

至于javascript,您可以通过将其重建为组件来优化Ember的语义UI的js文件。但是,我不建议这样做,因为随着语义UI发行新的内部版本和功能,将很难维护它。最好的选择可能是用Ember App加载插件,然后在didInsertElement上运行其他可自定义的功能(例如在语义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'),
});

如果遇到语义UI未正确添加模块功能的问题,我将查看DOM中的插件和元素加载和相互交互的顺序。另外,如果您在Rails或Yeoman上运行Ember Apps或类似的设置,则资产管道可能会在此处产生干扰。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

有人在nsf中使用javascript原型后,如何在Domino服务器中清理SSJS?

来自分类Dev

有人在go可执行文件上使用简单的pprof吗?

来自分类Dev

为什么有人在循环宏中的子句中使用关键字?

来自分类Dev

使用字典时,有人在操场上看到“一些”输出吗?

来自分类Dev

iframe及其使用Angular的父级之间的window.postMessage:有人在工作吗?

来自分类Dev

是否有人在生产Rails应用程序中使用Babel / 6-to-5?

来自分类Dev

如何在Webpack中使用语义UI?

来自分类Dev

是否有人在生产中使用Swagger Codegen或OpenAPI Generator SDK?

来自分类Dev

如何使用语义UI CDN?

来自分类Dev

使用语义UI的Codeigniter分页

来自分类Dev

使用语义UI高亮显示代码

来自分类Dev

无法使用语义UI表获得表行选择

来自分类Dev

如何使用语义UI设置Rails应用程序?

来自分类Dev

如何使用语义UI右对齐按钮

来自分类Dev

如何使用语义UI反应下拉菜单

来自分类Dev

有人在页面上时保持a:active吗?

来自分类Dev

我们可以同时使用语义UI和Foundation吗?

来自分类Dev

有人在emberjs中使用语义UI吗?

来自分类Dev

使用字典时,有人在操场上看到“某些”输出吗?

来自分类Dev

是否有人在家中使用用于台式机或工作站的Red Hat Enterprise Linux?

来自分类Dev

有人在ServiceStack Ormlite中使用postgres jsonb遇到问题吗?

来自分类Dev

在Webpack中使用语义UI和jQuery

来自分类Dev

无法使用语义UI表获得表行选择

来自分类Dev

高度:使用语义UI时100%不起作用

来自分类Dev

有人在 csv 文件中使用 nfdump 有 Netflow 数据吗?

来自分类Dev

如何使用语义ui样式?

来自分类Dev

如何在另一个中使用语义 ui 添加 div?

来自分类Dev

有没有人在 PhoneGap 版本中使用过 OneSignal sendtag?

来自分类Dev

使用语义ui想要生成动态下拉列表

Related 相关文章

  1. 1

    有人在nsf中使用javascript原型后,如何在Domino服务器中清理SSJS?

  2. 2

    有人在go可执行文件上使用简单的pprof吗?

  3. 3

    为什么有人在循环宏中的子句中使用关键字?

  4. 4

    使用字典时,有人在操场上看到“一些”输出吗?

  5. 5

    iframe及其使用Angular的父级之间的window.postMessage:有人在工作吗?

  6. 6

    是否有人在生产Rails应用程序中使用Babel / 6-to-5?

  7. 7

    如何在Webpack中使用语义UI?

  8. 8

    是否有人在生产中使用Swagger Codegen或OpenAPI Generator SDK?

  9. 9

    如何使用语义UI CDN?

  10. 10

    使用语义UI的Codeigniter分页

  11. 11

    使用语义UI高亮显示代码

  12. 12

    无法使用语义UI表获得表行选择

  13. 13

    如何使用语义UI设置Rails应用程序?

  14. 14

    如何使用语义UI右对齐按钮

  15. 15

    如何使用语义UI反应下拉菜单

  16. 16

    有人在页面上时保持a:active吗?

  17. 17

    我们可以同时使用语义UI和Foundation吗?

  18. 18

    有人在emberjs中使用语义UI吗?

  19. 19

    使用字典时,有人在操场上看到“某些”输出吗?

  20. 20

    是否有人在家中使用用于台式机或工作站的Red Hat Enterprise Linux?

  21. 21

    有人在ServiceStack Ormlite中使用postgres jsonb遇到问题吗?

  22. 22

    在Webpack中使用语义UI和jQuery

  23. 23

    无法使用语义UI表获得表行选择

  24. 24

    高度:使用语义UI时100%不起作用

  25. 25

    有人在 csv 文件中使用 nfdump 有 Netflow 数据吗?

  26. 26

    如何使用语义ui样式?

  27. 27

    如何在另一个中使用语义 ui 添加 div?

  28. 28

    有没有人在 PhoneGap 版本中使用过 OneSignal sendtag?

  29. 29

    使用语义ui想要生成动态下拉列表

热门标签

归档