无法将视图与敲除中的复杂对象绑定。js

Question

我正在尝试使用KnockOut在视图上绑定一个复杂对象。js。没有使用overservable（）和observableArray（），我就能够将对象绑定到视图。但是，当我实现observable（）时，返回的结果将可观察对象添加到我的javascript viewmodel中，并且我的视图无法绑定viewmodel。

下面是服务器端的代码实现：

    Model:

    public class SurveyQuestion
    {
        public string QuestionNumber { get; set; }
        public string Question { get; set; }
        public QuestionType QuestionTypeStructure { get; set; }
        public IList OptionsList { get; set; }
    }

    public enum QuestionType
    {
        CheckBox,
        RadioButton,
        TextBox,
        AdvancedCheckBox,
        AdvancedRadioButton
    }

    public class Options
    {
        public string OptionValue { get; set; }
    }

    ViewModel:

    public class SurveyCollection
    {
        public IList SurveyList { get; set; }
    }

上述泛型结果的结果将显示在下面的json中

    {"SurveyList":[

    {"QuestionNumber":"1","Question":"Write down the second consonant after the second vowel?","QuestionTypeStructure":2,"OptionsList":[{"OptionValue":"F"},{"OptionValue":"G"},{"OptionValue":"C"},{"OptionValue":"B"}]},

    {"QuestionNumber":"2","Question":"Complete the following letter series: ZYX/ VW/ UTS/ QR/ PON/ LM/ KJI?","QuestionTypeStructure":1,"OptionsList":[{"OptionValue":"GB"},{"OptionValue":"IJ"},{"OptionValue":"GH"},{"OptionValue":"LM"}]},

    {"QuestionNumber":"3","Question":"What would be the numrical digits to represent the word VOWEL when the letters of the alphabets were numbered as A 26, B 25, C 24 and o on till Z 1.","QuestionTypeStructure":0,"OptionsList":[{"OptionValue":"5 ,12 ,4, 22, 15"},{"OptionValue":"6 ,12 ,5, 22, 15"},{"OptionValue":"5 ,14 ,4, 22, 16"},{"OptionValue":"4 ,13,4, 22, 12"}]}

    ]}

    @model Test.UI.ViewModel.SurveyCollection
    @using System.Web.Script.Serialization

    [h2]Survey[/h2]

    [div data-bind="template: { name: 'surveyTemplate', foreach: SurveyList }"][/div]

    [script type="text/html" id="surveyTemplate"]
        [div style = "margin-bottom:20px"]
            [div style = "margin-bottom:10px"]
                [strong data-bind="text: Question"][/strong]
            [/div]
            [div]
[ul data-bind="template: { name: function() { return QuestionTypeStructure.toString(); }, foreach: OptionsList }"]
                [ul]
            [/div]
        [/div]
    [/script]

    [script type="text/html" id="0"]
        [div]
            [input type = "radio" style = "margin-right:10px; width: auto"/][span data-bind="text: $data.OptionValue" /]
        [/div]
    [/script]

    [script type="text/html" id="1"]
        [div]
            [input type = "checkbox" style = "margin-right:10px"/][span data-bind="text: $data.OptionValue" /]
        [/div]
    [/script]

    [script type="text/html" id="2"]
        [div]
            [input type = "text" style = "margin-right:10px"/]
            [span data-bind="value: $data.OptionValue" /]
        [/div]
    [/script]


        $(document).ready(function () {
            var surveyViewModel = {
                SurveyList: ko.observableArray([])
            };

            var data = $('').html("@(new JavaScriptSerializer().Serialize(Model))").text();
            var jsonData = $.parseJSON(data);
            if (jsonData != undefined) {
                //$.each(jsonData.SurveyList, function (baseIndex, T) {
                ko.utils.arrayForEach(jsonData.SurveyList, function (T) {
                    var surveyModel = new SurveyModel(T);
                    surveyViewModel.SurveyList.push(surveyModel);

                    ko.utils.arrayForEach(T.OptionsList, function (Q) {
                        var optionModel = new OptionModel(Q);
                        surveyModel.OptionsList.push(optionModel);
                        //surveyViewModel.SurveyList[baseIndex].OptionsList.push(optionModel);
                    });
                });
                ko.applyBindings(surveyViewModel);
           }
    });

    function SurveyModel(T)
    {
        this.QuestionNumber = ko.observable(T.QuestionNumber);
        this.Question = ko.observable(T.Question);
        this.QuestionTypeStructure = ko.observable(T.QuestionTypeStructure);
        this.OptionsList = ko.observableArray([]);
    }

    function OptionModel(Q)
    {
        this.OptionValue = ko.observable(Q.OptionValue);
    }

我很抱歉将html转换为其他内容。问题在于mozilla的错误字段中的上述结果如下所示：

    Error: Cannot find template with ID function observable() {
            if (arguments.length > 0) {
                // Write

                // Ignore writes if the value hasn't changed
                if ((!observable['equalityComparer']) || !observable['equalityComparer'](_latestValue, arguments[0])) {
                    observable.valueWillMutate();
                    _latestValue = arguments[0];
                    if (DEBUG) observable._latestValue = _latestValue;
                    observable.valueHasMutated();
                }
                return this; // Permits chained assignments
            }
            else {
                // Read
                ko.dependencyDetection.registerDependency(observable); // The caller only needs to be notified of changes if they did a "read" operation
                return _latestValue;
            }
        }
    http://localhost:3391/Scripts/knockout-2.1.0.debug.js
    Line 2653

Answer 1

问题出在[ul data-bind="模板：{Foreach： OptionsList}"]中，您没有给出模板名称。从你的其他模板判断，你想要这样的东西，我想：

[ul data-bind="foreach: OptionsList "]
    [li data-bind="template: $data.OptionValue]
    [/li]
[/ul]