使用小胡子模板化较小的部分，以便在表单中多次使用

Question

好的。所以我希望这足够具体。我是小胡子的新手，但看到它有很大的潜力，所以为什么不使用它呢。

我正在制作一个相当大的表格，并希望在表格中添加小胡子。所以我开始用小胡子制作表格，然后我意识到我想为表格元素制作模板。我希望每个窄输入、宽输入、select 等看起来如何的模板。因为现在我在重复自己。

我的模板和部分是通过$.ajax get提供的，其中主表单模板被定义为一个小胡子文件，内容为html，部分被定义为一个小胡子文件每个模板都在 -tags.

中

小胡子要使用的变量。此对象可能会有所更改。

var jsonForm = {
        oneInputField: {
            value:'put your title here',
            rule_set: {
                required: {
                    strName: 'required',
                    strErrorMsg: 'error message'
                }
            }
        },
        oneSelect: {
            options: [
                {value: '- Pick one -', helper: 'helper', select_options: {disable_search: true}},
                {value: 'option1', selected: true},
                {value: 'option2'},
                {value: 'option3'},
                {value: 'option4'}
            ],
            rule_set: {
                required: {
                    strName: 'required',
                    strErrorMsg: 'error message'
                }
            }
        }
    };

我如何获取数据

$.ajax({
            url: 'myForm.mustache',
            type: 'get',
            success: function(template) {
                $.ajax({
                    url: 'myFormElements.mustache',
                    type: 'get',
                    success: function(partials) {
                        var $html = Mustache.render(template, jsonForm.fields, partials);
                        $('div#formContent').html($html);
                        $('div#formContent select').chosen();

                        if (jsonForm.fields.title.length > 1) {
                            $('div#header').html(jsonForm.fields.title);
                        }
                    }
                });
            }
        });

部分。实际上我想将它们全部放在单独的文件中，但如果不进行大量 ajax 调用似乎是不可能的，所以我保留我当前的两个小胡子模板。

<script type="text/html" id="inputNarrow">
    <label>{{label}}:</label><input value="{{value}}">
        {{#rule_set.required}}<div class="required">*</div>{{/rule_set.required}}
        {{^rule_set.required}}<div class="not-required">&nbsp;</div>{{/rule_set.required}}
    <div class="clearfix"></div>
</script>

和我的表单模板

<div id="formContainer" class="border-box">

<div class="group-box">
    <p>Fields marked with <span class="required">*</span> are required to complete the form</p>
</div>

<div class="group-box">
    <h2>Partial element test</h2>
    <div class="form-container">
        {{>partials.inputNarrow}} <-- I have to be able to specify what data I want to enter here.
    </div>
    <div class="form-container">
        {{>partials.selectNarrow}} <-- I have to be able to specify what data I want to enter here.
    </div>
</div>

所以我的问题是，一个更大的独特胡须模板是否可以使用 "element"-模板（也在胡须中）进行渲染？

我不太愿意向我的项目添加额外的库，例如 ICanHaz 或类似库，因为这是为了工作。

如果之前有人回答过这个问题，我真的很抱歉，但我找不到了

Answer 1

我找到了一种替代方法来完成我尝试做的事情。我不确定它是否有任何好处，但它确实起作用了。

我使用了在发送到主模板的对象内部制作函数的可能性"form-template"。

看起来像这样：

var smallRender = function(url, containerId, objData) {
        $.ajax({
            url: url,
            type: 'get',
            success: function(template) {
                var $html = Mustache.render(template, objData);
                var $objContainer = $('div#' + containerId);
                $objContainer.append($html);
            }
        });
    };

实际对象

oneInputField: {
        value:'put your title here',
        rule_set: {
            required: {
                strName: 'required',
                strErrorMsg: 'error message'
            }
        },
        getRendered: function() { // I would like to cache this somehow
            smallRender(templateUrl.input.narrow, jsonForm.fields.title.containerId, {
                            label: jsonForm.labels.title,
                            field: jsonForm.fields.title,
                            required: isRequired(jsonForm.fields.title)
             });
        }
    },

所以基本上我发送了一个 ajax 调用来获取主模板，对于我想要呈现的表单中的每个元素，我调用了 main-tamplate mustache 中的 getRendered，它基本上渲染了满足于较小的模板。 tempalte url 基本上是一个包含所有模板的 url 的集合。所以如果我指定 templateUrl.input.narrow 我将得到窄输入元素等等。

我不确定这是否是 "correct" 的做法，或者它在大环境中的扩展效果如何，但它确实有效。

我会将我的这个标记为正确答案（如果允许的话），因为没有其他答案可以解决我的问题。

使用小胡子模板化较小的部分，以便在表单中多次使用

Use mustache for templating smaller parts for use multiple times in a form

forms

templates

mustache

partials