0

我成功地将分层 JSON 数据绑定到我的视图。但是，一旦我使用 knockout.mapping 将相同的 JSON 数据投影到视图模型中，foreach 函数就不会遍历子数组。

绑定到 viewModel 数据时，我知道子数据（答案）在那里，因为我可以使用显示对象引用

观点：

<div data-bind="foreach: $data">
    <p data-bind="html: QuestionText">

    <!-- this section outputs [object Object] when bound to pageViewModel or Json -->
    <p data-bind="html: Answers">

        <!-- RadioButtonSelection-->
        <div data-bind="if: QuestionSelectionMode == 'RadioButtonSelection'">
            <span data-bind="foreach: $data.Answers">
                <input type="radio" data-bind="attr: {name: $parent.QuestionId}, value: AnswerId" /><span data-bind="text: AnswerText"></span>
            </span>
        </div>

        <!-- CheckBoxSelection-->
        <div data-bind="if: QuestionSelectionMode == 'CheckBoxSelection'">
            <span data-bind="foreach: $data.Answers">
                <div><input type="checkbox" data-bind="value: AnswerId"/><span data-bind="text: AnswerText"></span></div>
            </span>
        </div>

        <!-- DropDownListSelection-->
        <div data-bind="if: QuestionSelectionMode == 'DropDownListSelection'">
            <select data-bind="options: $data.Answers, optionsText: 'AnswerText', optionsValue: 'AnswerId'"></select>
        </div>

    </p>
</div>

视图模型代码：

<script type="text/javascript">

    /* get the first page of questions and bind them */
    @{ 

        string startUrl = "URL-Removed" + ViewData["formId"] + "?page=" + ViewData["pageNumber"];

    }

    var pageViewModel;


    $.ajax({ url: '@startUrl' ,
        async: false,
        dataType: 'json',
        success: function (data) {
            //console.log("JSON received:  " + JSON.stringify(data));            

            // when i bind to the view model the parent question text shows, but not the child answers
            pageViewModel = ko.mapping.fromJS(data);
            ko.applyBindings(pageViewModel);
            //ko.applyBindings(data);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log("Error: TextStatus: " + textStatus + " errorThrown: " + errorThrown);
        }
    });
    </script>

以下是 JSON 中的一些数据：

 [{"FormId":0,"QuestionId":28807,"QuestionSelectionMode":"StaticTextSelection","QuestionText":"<hr />\r\n<div><span style=\"font-size: medium\"><span style=\"color: #003366\"><strong>Event Details</strong></span></span></div>","DisplayOrder":1,"PageNumber":1,"Answers":[]},{"FormId":0,"QuestionId":28782,"QuestionSelectionMode":"RadioButtonSelection","QuestionText":"<div><span style=\"font-size: larger\"><strong>What type of patient safety event is being reported?</strong></span><span style=\"font-size: x-small\"><strong>&nbsp; </strong><font color=\"#ff0000\" size=\"1\">(Required)</font></span></div>","DisplayOrder":2,"PageNumber":1,"Answers":[{"AnswerId":460935,"QuestionId":0,"AnswerTypeId":null,"RegularExpressionId":null,"AnswerText":"Reached the patient","DisplayOrder":1,"Selected":null,"DefaultText":null,"Mandatory":null,"ValidatorId":null,"SyncRefMandatory":null,"FieldLength":null,"AnswerFormId":null,"EntryMaskId":null,"ShowTimeSelector":null,"Disabled":false},{"AnswerId":460936,"QuestionId":0,"AnswerTypeId":null,"RegularExpressionId":null,"AnswerText":"Did not reach the patient (Near Miss)","DisplayOrder":2,"Selected":null,"DefaultText":null,"Mandatory":null,"ValidatorId":null,"SyncRefMandatory":null,"FieldLength":null,"AnswerFormId":null,"EntryMaskId":null,"ShowTimeSelector":null,"Disabled":false},{"AnswerId":460937,"QuestionId":0,"AnswerTypeId":null,"RegularExpressionId":null,"AnswerText":"Unsafe Condition","DisplayOrder":3,"Selected":null,"DefaultText":null,"Mandatory":null,"ValidatorId":null,"SyncRefMandatory":null,"FieldLength":null,"AnswerFormId":null,"EntryMaskId":null,"ShowTimeSelector":null,"Disabled":false}]},{"FormId":0,"QuestionId":46080,"QuestionSelectionMode":"RadioButtonSelection","QuestionText":"<div><span style=\"font-size: larger\"><strong>Was the patient harmed?</strong></span></div>","DisplayOrder":3,"PageNumber":1,"Answers":[{"AnswerId":632595,"QuestionId":0,"AnswerTypeId":null,"RegularExpressionId":null,"AnswerText":"Yes","DisplayOrder":1,"Selected":null,"DefaultText":null,"Mandatory":null,"ValidatorId":null,"SyncRefMandatory":null,"FieldLength":null,"AnswerFormId":null,"EntryMaskId":null,"ShowTimeSelector":null,"Disabled":false},{"AnswerId":632596,"QuestionId":0,"AnswerTypeId":null,"RegularExpressionId":null,"AnswerText":"No","DisplayOrder":2,"Selected":null,"DefaultText":null,"Mandatory":null,"ValidatorId":null,"SyncRefMandatory":null,"FieldLength":null,"AnswerFormId":null,"EntryMaskId":null,"ShowTimeSelector":null,"Disabled":false}]}, and so on...

有任何想法吗？

4

1 回答 1

1

在 if 绑定中，您将放入一个完整的语句，而不仅仅是引用视图模型上的属性。因此，您需要调用 observable（作为函数），而不仅仅是引用它。翻译：代替

<div data-bind="if: QuestionSelectionMode == 'CheckBoxSelection'">

你应该有

<div data-bind="if: QuestionSelectionMode() == 'CheckBoxSelection'">

所以这里是更新的标记：

<div data-bind="foreach: $data">
    <p data-bind="html: QuestionText">

    <!-- RadioButtonSelection-->
    <div data-bind="if: QuestionSelectionMode() == 'RadioButtonSelection'">
        <span data-bind="foreach: Answers">
            <input type="radio" data-bind="attr: {name: $parent.QuestionId}, value: AnswerId" /><span data-bind="text: AnswerText"></span>
        </span>
    </div>

    <!-- CheckBoxSelection-->
    <div data-bind="if: QuestionSelectionMode() == 'CheckBoxSelection'">
     <span data-bind="foreach: Answers">
            <div><input type="checkbox" data-bind="value: AnswerId"/><span data-bind="text: AnswerText"></span></div>
        </span>
    </div>

    <!-- DropDownListSelection-->
    <div data-bind="if: QuestionSelectionMode() == 'DropDownListSelection'">
        <select data-bind="options: Answers, optionsText: 'AnswerText', optionsValue: 'AnswerId'"></select>
    </div>

</div>​

这是一个工作小提琴：http: //jsfiddle.net/g5g36/

其他几点注意事项：

  1. 您正在尝试对 p 标签执行 'html:answers' 绑定。html 绑定旨在告诉敲除您的视图模型上有一个 HTML 字符串，您希望将其放入现有标记中。但是随后您在 p 标记内定义了各种其他标记。完全摆脱这个标签。

  2. 我必须更正 JSON，以便您使用双斜杠而不是单斜杠（参见小提琴），以使 JSON 解析器满意。这可能与您无关，具体取决于您的服务如何处理事情。

  3. $data 在绑定中是隐含的，因此您可以绑定到“Answers”，而不是绑定到“$data.Answers”。无论哪种方式都有效，但删除 $data 会使它更干净。

  4. 从技术上讲，您不应该在 p 标签中包含 div 标签。

  5. p 标签应该是关闭的

于 2012-12-18T04:21:12.297 回答