无法通过backbone.js嵌套循环插入模板

Question

我尝试使用backbone.js从数据库中获取嵌套数据并将其放入模板中。检索到的数据是嵌套形式，其中有另一个数组独立元素。我能够将第一个嵌套数据放入模板中，并且能够循环第二个嵌套数组，但无法访问其中的值

我的backbone.js获取

this.quesCollec = new questionAnsCollection();
this.quesCollec.bind("reset", this.render, this);
this.quesCollec.bind("change", this.render, this);
var that = this;
this.quesCollec.fetch({
    url: 'http://localhost/AWT_CW1/index.php/Rest_API/CWRestAPI/getQuesAns?catID=' + catId + '&quesNum=' + txtBoxVal,
    success: function () {
        console.log(that.quesCollec);
        var myTemplate = _.template($("#quizDisAreaTemp").html(), {questions: that.quesCollec});
                    $('#quizDisArea').html(myTemplate);
    }
});

模型和集合

var questionAns = Backbone.Model.extend({
    defaults: {
        question_id: "",
        question: "",
        option: {
            optionId: "",
            options: ""
        }
    }
});

var questionAnsCollection = Backbone.Collection.extend({
    model: questionAns
});

模板

<script type="type/template" id="quizDisAreaTemp">
    //iterating to inset 1st level (Working)
    <% questions.each(function(cat){%>
        <div class="form-group">
            <div class="row colbox">
                <div class="col-lg-12">
                    <div class="input-group">
                        <span class="input-group-addon" id="sizing-addon2" for="txtQuestion"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></span>
                        <input disabled class="form-control" id="txtQuestion" name="<%=cat.get('question_id')%>" value = "<%=cat.get('question')%>" type="text" aria-describedby="sizing-addon2" required/>
                    </div>
                </div>
            </div>
        </div>

        //iterating to inset 2nd level array (option) (Looping But couldnt access value)
        <% _.each(cat.get('option'),function(opt){   %>
            <div class="form-group">
                <div class="row colbox">
                    <div class="col-lg-12">
                        <div class="input-group">
                            <span class="input-group-addon" id="sizing-addon2"><span class="glyphicon glyphicon-circle-arrow-right" aria-hidden="true"></span></span>
                            <input disabled value="<%=cat.get('question')%>" class="form-control" type="text" aria-describedby="sizing-addon2" name="optChangeText" /><span class="input-group-addon" id="sizing-addon2">
                            <input type="radio" value="<%=cat.get('question_id')%>" id="btnUpdateCorrectAns" name="<%=cat.get('question_id')%>"></span></span>
                        </div>
                    </div>
                </div>
            </div>
        <% }) %>
    <% }) %>
</script>

这里使用了从第一次迭代（cat）到第二次循环的值。如果不是它会抛出错误。输出看起来像这样

输出

提取的数据看起来像

[
  {
    "question_id": "63",
    "question": "What is 4+5?",
    "option": [
      {
        "optionId": "87",
        "options": "6"
      },
      {
        "optionId": "88",
        "options": "9"
      },
      {
        "optionId": "89",
        "options": "32"
      },
      {
        "optionId": "76",
        "options": "1993"
      }
    ]
  },
  {
    "question_id": "59",
    "question": "What is world's largest animal?",
    "option": [
      {
        "optionId": "82",
        "options": "Whale"
      },
      {
        "optionId": "83",
        "options": "Venkad"
      },
      {
        "optionId": "84",
        "options": "Elephant"
      },
      {
        "optionId": "85",
        "options": "Dinosaur"
      }
    ]
  }
]

Answer 1

从我所看到的，你的模板是错误的。我猜你是复制并粘贴它而忘了删除它。您有一个<input disabled value="<%=cat.get('question')%>" class="form-control" type="text" aria-describedby="sizing-addon2" name="optChangeText" /><span class="input-group-addon" id="sizing-addon2">太多，而您忘了放<%=opt.options%>。其他一切看起来都不错。

演示：http://jsfiddle.net/tm0kccq3/