0

我正在尝试使用 HandleBars JS，到目前为止它大部分都在工作。但是我遇到了一个有趣的问题。

我正在尝试让 HandleBars 呈现具有三个文本字段的用户输入表单。为了进行测试，我已将构建这三个文本字段所需的 JSON 字符串粘贴到我的文档中，并且效果很好。但是，当我使用 $.getJSON 并在呈现文本字段时通过 ajax 调用完全相同的 JSON 字符串时，不会将 CSS 或 jQuery 规则应用于表单。

我知道这是因为此时已调用 Document Ready，因为我在我的静态字符串周围添加了 Document Ready，同样的事情发生了，它们没有呈现任何 CSS 或 JS 规则。

有没有办法可以重新强制所有 jQuery 和 CSS 规则刷新？或者我怎样才能让它工作？

另外，请注意这不是jQuery Mobile。

非常感谢..如果您有任何问题，请在投票前询问。

编辑 - 这是代码：

静态版本

var source   = $("#form-template").html();
var template = Handlebars.compile(source);
var data = { 
    info: { id: 'longbeach2012', name: 'Long Beach 2012' },
forms: [
{id: "1", label: "This is a label", description: "", type: "text", name: "t1", username: "alan" },
{id: "2", label: "This is a label2", description: "description2", type: "text", name: "t2", username: "allison" },
{id: "3", label: "This is a label3", description: "description3", type: "text", name: "t3", username: "ryan" }
]};
var example = {title: "Sample Title", body: "Sample Body"};
$("#testForm").html(template(data));

动态版

$.getJSON('http://register.local.dev/fetchtemplate',
{
    language: 'english',
    formid: 'longbeach2012'
},
function(data) {
    $.each(data, function(i,item){
        if( item.elem_type === 'text' )
        {
            var source = $("#textinput-template").html();
            var template = Handlebars.compile(source);
            $("#testForm").append(template(item));
        }
    });
});

车把模板

<script id="textinput-template" type="text/x-handlebars-template">
<div id="q{{elem_id}}">
    <div class="small">{{trans_label}}{{#if trans_description}}</br />
    <span class="notice">{{trans_description}}</span>{{/if}}</div>
    <input type="{{elem_type}}" name="{{elem_name}}" id="{{elem_name}}" value="{{trans_defaultValue}}" tabindex="1" autocomplete="off" />
</div>

4

1 回答 1

0

我想到了。

我从准备好的文档中删除了我的大部分 javascript 代码，并让我的 getJSON 调用一个函数，该函数在 getJSON 完成运行后执行我的 javascript 的其余部分。

于 2012-05-29T20:28:32.800 回答