Comment générer un modèle html dynamiquement pour un modèle de vue en utilisant knock-out

Je suis nouveau à knock-out framework.Comment générer un modèle html dynamiquement pour un modèle de vue en utilisant knock-out

Je possède ce viewmodel

 {"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 
}] 
    }

Je veux générer un modèle html exactement comme celui-ci.

 <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>

Je suis comme ça. appel ajax est

$.ajax({ 
    url: "/authorsurvey/LoadSurveyQuestions?SurveyId=151", 
    type: 'post', 
    success: function (result) { 
     ViewModel = ko.mapping.fromJS(result); 
     ko.applyBindings(ViewModel, document.getElementById('sMain')); 
     } 
    });

et html modèle est

<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>

est-il shortway de le faire?

Merci pour votre aide?

Source

2012-08-23 Chakradhar

Vous avez déjà un modèle de travail si .. quelle est votre question exactement? Vous voulez créer un modèle plus court? Pourriez-vous fournir un jsFiddle? –

son ne fonctionne pas pour moi .. sa génération de la div avec id propres, mais il ne montre pas le QuestionText etc .... – Chakradhar

Si vous pouvez recréer le comportement dans un jsFiddle (http://jsfiddle.net/), je vais essayer répare le :) –

Essayez de déplacer la liaison de texte en dehors de la liaison d'attr.

<label data-bind="attr : {text: QuestionText()}" ></label> <!--does not work --> 
    <label data-bind="text: QuestionText"></label> <!--does work -->

Voir http://jsfiddle.net/dtiemstra/wRg88/11/ pour un exemple

Source

2012-08-27 14:12:36 DiederikTiemstra

Comment générer un modèle html dynamiquement pour un modèle de vue en utilisant knock-out

Répondre

Questions connexes