如何使用模板和 BEM 方法组织 javascript 表单生成器的架构？答案

【问题标题】：How to organize the architecture of javascript form generator using a templates and BEM methodology?如何使用模板和 BEM 方法组织 javascript 表单生成器的架构？
【发布时间】：2015-07-05 04:01:51
【问题描述】：

如何使用模板和 BEM 方法组织架构 javascript-generator 表单？

美好的一天！

问题的实质如下：有必要根据带有控件描述的json文件组织生成器表单，例如： “订单”：[“input1”，“input2”，“cb3”]， “输入1”：{ “类型”：“输入”， “标题”：“第一个输入” "路径": "root.input", “可见”：是的， “可编辑”：真 } “输入 2”：{...}

可用于处理控件的类型应该易于扩展。控件中的数据必须从数据源中提取（它们在行中可用，属性路径中的路径，在控件中描述）。数据源必须放置在一个单独的模块中，并提供公共方法来从中获取数据。

应该通过 jQuery 库或（最好）i-bem 使用 DOM。有必要在 BEM 的思想中描述页面的控件和组件。

作为模板语法使用syntax mustache。

使用 jquery + 小胡子。慎重考虑是否使用组织要求js mvc应用结构。你能告诉我如何使用模板胡子更好地组织应用程序架构吗？（因为之前没遇到过，刚开始学）如何在不使用 BEM 技术堆栈的情况下应用 BEM 方法？

PS。对不起我的英语。

【问题讨论】：

你到底想知道什么：1. 文件结构 2. 生成器的 JS 实现 3. 每个块的模板 4. 其他的？

标签： javascript architecture mustache bem

【解决方案1】：

应该在其中生成控件的块的 i-bem.js 实现如下所示：

modules.define('form', ['i-bem__dom', 'mu', 'tmpl'], function(provide, BEMDOM, mu, tmpl) {

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                this.generate(this.params);
            }
        }
    },
    generate: function(opts) {
        var html = opts.Order.map(function(control) {
            return mu.render(tmpl, buildopts[control]); // assuming you have client-size mustache renderer in mu module and compiled templates in tmpl
        }).join('');

        BEMDOM.append(this.domElem, html);
    }
}));

});

所以你会得到 HTML <form class="form i-bem" data-bem="{'form':{ HERE GOES JSON DESCRIPTION OF COMPONENTS YOU SUGGESTED }}"></form>。当form 将被初始化时，它将遍历Order 数组并将模板渲染的结果附加到自身内部。

【讨论】：