2

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

再会！

问题实质如下： 需要根据带有控件描述的json文件来组织生成器表单，如："Order": ["input1", "input2", "cb3"], "Input1" : { "Type": "input", "Title": "The first INPUT" "Path": "root.input", "Visible": true, "Editable": true } "Input2": {...}

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

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

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

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

PS。对不起我的英语不好。

4

1 回答 1

2

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

于 2015-04-27T21:08:21.813 回答