嵌套淘汰赛模板结合

Question

 $.ajax({ 
        url: "/survey/surveyQuestions", 
        success: function (questionsData) { 
         $.ajax({ 
          url: "/survey/surveyOptions", 
          success: function (optionsData) { 
           alert(questionsData.length); 
           for (var i = 0; i < questionsData.length; i++) { 
            QuestionsScript.Question = ko.mapping.fromJS(questionsData[i]); 
            ko.applyBindings(QuestionsScript, document.getElementById("innerDiv")); 
            for (var j = 0; j < optionsData.length; j++) { 
               if (optionsData[j].QuestionId = questionsData.QuestionId[i]) { 
                OptionsScript.Option = ko.mapping.fromJS(optionsData[j]); 
                ko.applyBindings(OptionsScript, document.getElementById(" ... here i nee to give options template table Id.....")); 
                } 
             } 
           } 


          } 
         }); 

        } 
       }); 

我需要绑定像下面

Question 1 
     Option1 
     Option2 
     Option3 
Question 2 
     Option1 
     Option2 
     Option3 
Question 3 
     Option2 
     Option3 

我的模板是

<script id="QuestionsScript" type="text/x-jquery-tmpl"> 
<div data-bind="attr:{id :QuestionId}" class="question"> 
    <h2><label data-bind="text :QuestionText" /></h2> 
    <div class="option"> 
     <table data-bind="attr:{id : QuestionId} , template: {name:'OptionsScript', foreach: Option}"> 
      <tbody> 
      </tbody> 
     </table> 
    </div> 
</div> 
</script> 
<script id="OptionsScript" type="text/x-jquery-tmpl"> 
<tr> 
    <td>{{= OptionText}}</td> 
</tr> 
</script> 

正如我说我的期望输出和模板，我不知道为什么我不能得到那个。 所以请向我提供任何示例代码。 在此先感谢。

Answer 1

我认为你可以做到这一点像：

function Question(id, name) { 
    this.id = id; 
    this.name = name; 
    this.answers = ko.observableArray(); 
} 

function Answer(id, name) { 
    this.id = id; 
    this.name = name; 
} 

function ViewModel() { 
    this.questions = ko.observableArray(); 
    var self = this; 

    //dummy data 
    self.init = function() { 
     var q1 = new Question(1, "Question 1"); 
     var q1a1 = new Answer(1, "Option 1"); 
     var q1a2 = new Answer(2, "Option 2"); 
     q1.answers([q1a1, q1a2]); 

     var q2 = new Question(2, "Question 2"); 
     var q2a1 = new Answer(1, "Option 1"); 
     var q2a2 = new Answer(2, "Option 2"); 
     var q2a3 = new Answer(3, "Option 3"); 
     q2.answers([q2a1, q2a2, q2a3]); 

     var q3 = new Question(3, "Question 3"); 
     var q3a1 = new Answer(1, "Option 1"); 
     var q3a2 = new Answer(2, "Option 2"); 
     var q3a3 = new Answer(3, "Option 3"); 
     q3.answers([q3a1, q3a2, q3a3]); 

     self.questions([q1, q2, q3]); 
    }; 

    self.init(); 
} 

，并绑定视图模型那样：

<div data-bind="foreach:questions"> 
    <div data-bind="attr:{id :id}" class="question"> 
     <h2><label data-bind="text :name" /></h2> 
     <div class="option"> 
      <table data-bind="attr:{id : id}"> 
       <tbody data-bind="foreach:answers"> 
        <tr> 
         <td data-bind="text:name"></td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
</div> 

这里是fiddle与例子。