0

我是淘汰框架的新手。

我有这个视图模型

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

有什么捷径可以做到吗？

谢谢你的帮助 ？

4

1 回答 1

1

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

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

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

于 2012-08-27T14:12:36.640 回答