Question

我有一个x-template部分，其中包含一个调查元素（基本上是文本字段和单选按钮）。当用户加载屏幕时，基于先前存储的部分，数据库将jSON对象发送到UI，然后使用JSON对象填充此调查模板。

我能够动态创建整个模板，并且没有任何问题。但是，当我尝试使用JSON对象的值填充模板时 - 我遇到了问题。对于我可能做错的任何帮助表示赞赏。

由于

使用Javascript：

    $(document).on('click', '.btn-toggle', function () {
    $(this).find('.btn').toggleClass('active');

    if ($(this).find('.btn-primary').size() > 0) {
        $(this).find('.btn').toggleClass('btn-primary');
    }

    $(this).find('.btn').toggleClass('btn-default');
});

var questions = [{
    "id": "6",
        "survey_id": "23",
        "name": "How are you? Not here?",
        "subtext": "",
        "type": "1",
        "required": "N"
}, {
    "id": "7",
        "survey_id": "23",
        "name": "Where are you?",
        "subtext": "",
        "type": "1",
        "required": "Y"
}];


for (var key in questions) { 
    question = questions[key];
    var questionTemplate = $('#textSurveyTemplate');
    $('#textSurveyTemplate').find('input#question-name').attr('value', question.name);
    $('.test').append($('#textSurveyTemplate').text());
}

HTML code：

    <script id="textSurveyTemplate" type="text/x-tmpl">
    <div class = "text-question" > 
        <div class = "form-group survey-form-group" style = "border-bottom: none;"> 
            <label class = "col-md-2 control-label" > Question </label>
            <div class="col-md-9">
                <input type="text" class="form-control" id="question-name" name="qname" placeholder="Question" value="" data-type="1" />
            </div>
        </div>
        <div class="form-group survey-form-group">
            <label class="col-md-2 control-label">Required</label> 
            <div class = "col-md-9 btn-group btn-toggle" > 
                <button type = "button" class = "btn btn-xs btn-default" > Y </button>
                <button type="button" class="btn btn-xs btn-primary active">N</button > 
            </div>
        </div > 
    </div>
</script>
<div class="test">Test Area</div>

Answer 1

我的第一次尝试是通过以下方式替换你的最终循环：

for (var key in questions) {
    question = questions[key];
    var questionTemplate = $('.textSurveyTemplate').html();
    $('.test').append(questionTemplate).find('input#question-name').attr('value', question.name);  
}

但是这将在每次迭代中替换所有生成的元素，因此我们必须为每个元素添加一个标识符，以便替换其正确的值。

for (var i=0 ; i<questions.length ; i++) { 
    question = questions[i];
    var questionTemplate = '<div id="'+i+'" class="text-question">' + $('.textSurveyTemplate').html() + '</div>';
    $('.test').append(questionTemplate);  
    $('#'+i).find('input#question-name').attr('value', question.name);  
}

Answer 2

几个星期前我遇到了类似的问题，最后使用了以下插件。它非常轻巧（6kbs），简单易用。

https://code.google.com/p/jquery-load-json/

Answer 3

修正了它 - 诀窍是使用appendTo并将新附加的元素分配给变量以供将来操作。显然，当DOM被附加到另一个DOM元素时，现有的引用会被删除，这就是它不起作用的原因。我更新了小提琴here

更新后的JAvascript代码如下 - 请注意appendTo的使用以及之后的操作

$(document).on('click', '.btn-toggle', function () {
    $(this).find('.btn').toggleClass('active');

    if ($(this).find('.btn-primary').size() > 0) {
        $(this).find('.btn').toggleClass('btn-primary');
    }

    $(this).find('.btn').toggleClass('btn-default');
});

var questions = [{
    "id": "6",
        "survey_id": "23",
        "name": "How are you? Not here?",
        "subtext": "",
        "type": "1",
        "required": "N"
}, {
    "id": "7",
        "survey_id": "23",
        "name": "Where are you?",
        "subtext": "",
        "type": "1",
        "required": "Y"
}];


for (var key in questions) { //questions is defined in edit.ctp
    question = questions[key];
    var template = $('#textSurveyTemplate').html();
    var curr = $(template).appendTo($('.test'));
    curr.find('input#question-name').val(question.name);
}

动态修改DOM并添加到文档

3 个答案: