只是想知道是否有人尝试将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] 删除。
我来说两句