0
我是全新的淘汰賽框架。如何使用淘汰賽爲視圖模型動態生成html模板
我有這樣的視圖模型
{"PagesList":
[{"QuestionList":
[
{"ParentQid":191,"QuestionId":192,"QuestionText":"Enter Question Text","QuestionType":2,"OptionsList":
[
{"QuestionId":192,"OptionId":95,"OptionText":"Option1"},
{"QuestionId":192,"OptionId":96,"OptionText":"Option2"}
]
},
{"ParentQid":191,"QuestionId":193,"QuestionText":"Enter Question Text","QuestionType":2,"OptionsList":
[
{"QuestionId":193,"OptionId":97,"OptionText":"Option1"},
{"QuestionId":193,"OptionId":98,"OptionText":"Option2"}
]
},
{"ParentQid":191,"QuestionId":194,"QuestionText":"Enter Question Text","QuestionType":2,"OptionsList":
[
{"QuestionId":194,"OptionId":99,"OptionText":"Option1"},
{"QuestionId":194,"OptionId":100,"OptionText":"Option2"}
]
}
],"PageId":191,"PageName":0
}]
}
我想正是這樣生成一個HTML模板。
<div>
<div id="191" type="page">
<div id="192" type="question" parentqid="191">
<label>
Enter ur Question Text</label>
<div>
<div id="95" questionid="192">
<input type="radio" id="r_95" />
<label for="r_95">
Option1</label>
</div>
<div id="96" questionid="192">
<input type="radio" id="r_96" />
<label for="r_96">
Option1</label>
</div>
</div>
</div>
<div id="193" type="question" parentqid="191">
<label>
Enter ur Question Text</label>
<div>
<div id="97" questionid="193">
<input type="radio" id="r_97" />
<label for="r_97">
Option1</label>
</div>
<div id="98" questionid="193">
<input type="radio" id="r_98" />
<label for="r_98">
Option1</label>
</div>
</div>
</div>
<div id="194" type="question" parentqid="191">
<label>
Enter ur Question Text</label>
<div>
<div id="99" questionid="194">
<input type="radio" id="r_99" />
<label for="r_99">
Option1</label>
</div>
<div id="100" questionid="194">
<input type="radio" id="r_100" />
<label for="r_100">
Option1</label>
</div>
</div>
</div>
</div>
</div>
我想這樣。 Ajax調用
$.ajax({
url: "/authorsurvey/LoadSurveyQuestions?SurveyId=151",
type: 'post',
success: function (result) {
ViewModel = ko.mapping.fromJS(result);
ko.applyBindings(ViewModel, document.getElementById('sMain'));
}
});
和HTML模板是
<script type="text/x-jquery-tmpl" id="layoutpages">
<div data-bind="attr: {id: PageId }" type="pages">
<div class="questiontype" style="height: 40px; padding-top: 4px;">
<label class="questiontype" data-bind="attr: {id: PageId()+'_plabel' }" >Add New Question</label>
</div>
<div data-bind="template: {name:'qtp2', foreach: QuestionList}">
</div>
</div>
</script>
<script type="text/x-jquery-tmpl" id="qtp2">
<div data-bind="attr: {id: QuestionId }" type="pages">
<div class="questiontype" style="height: 40px; padding-top: 4px;">
<label class="questiontype" data-bind="attr: {id: QuestionId()+'_plabel',text:QuestionText()}" ></label>
</div>
</div>
</script>
<div id="sMain">
<div id="pages" data-bind="template: {name:'layoutpages', foreach: PagesList}">
</div>
</div>
有任何shortway辦呢？
感謝您的幫助？
你已經有一個工作模板，以便..什麼是您的具體問題？你想創建一個更短的模板？你能提供一個jsFiddle嗎？ –
它不適合我..它生成與適當的id的div，但它不顯示QuestionText等...... – Chakradhar
如果你可以在jsFiddle（http://jsfiddle.net/）中重新創建行爲，我會嘗試修理它 ：） –