Question

我是淘汰框架的新手。

我有这个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
}]
  }

我想生成一个与此完全相同的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>

有什么做法吗？

感谢您的帮助？

Answer 1

尝试将文本绑定移到attr-binding之外。

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

有关示例，请参阅http://jsfiddle.net/dtiemstra/wRg88/11/

如何使用knockout为viewmodel动态生成html模板

1 个答案: