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

Question

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

美好的一天!

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

可用于处理控件的类型应该易于扩展。控件中的数据必须从数据源中提取(它们在属性路径中的行、路径中可用，在控件中描述)。数据源必须放置在单独的模块中，并应提供公共(public)方法以从其中检索数据。

使用 DOM 应该通过 jQuery 库或(最好是)i-bem 进行。有必要用BEM的思想来描述页面的控件和组件。

使用 Mustache 语法作为模板语法。

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

PS。对不起我的英语。

Answer 1

应在其中生成控件的 block 的 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数组并将模板渲染的结果附加到其自身内部。