无法在 Knockout.js 中绑定具有复杂对象的视图

Question

我正在尝试使用 KnockOut.js 在视图上绑定复杂对象。在不使用 overservable() 和 observableArray() 的情况下，我能够让对象与视图绑定。但是，当我实现 observable() 时，返回的结果在我的 javascript viewmodel 中添加了 observable 的对象，并且我的视图无法绑定 viewmodel。

这是服务器端的代码实现：

模型： 公开课SurveyQuestion { 公共字符串 QuestionNumber { 获取；放; } 公共字符串问题{获取；放; } 公共 QuestionType QuestionTypeStructure { get;放; } 公共 IList 选项列表 { 获取；放; } } 公共枚举 QuestionType { 复选框， 单选按钮， 文本框， 高级复选框， 高级单选按钮 } 公共类选项 { 公共字符串 OptionValue { 获取；放; } } 视图模型： 公共类SurveyCollection { 公共 IList 调查列表 { 获取；放; } }

上述通用结果的结果在下面的json中

{“调查列表”：[ {"QuestionNumber":"1","Question":"写下第二个元音后面的第二个辅音？","QuestionTypeStructure":2,"OptionsList":[{"OptionValue":"F"},{"OptionValue ":"G"},{"OptionValue":"C"},{"OptionValue":"B"}]}, {"QuestionNumber":"2","Question":"完成以下字母系列：ZYX/VW/UTS/QR/PON/LM/KJI？","QuestionTypeStructure":1,"OptionsList":[{"OptionValue ":"GB"},{"OptionValue":"IJ"},{"OptionValue":"GH"},{"OptionValue":"LM"}]}, {"QuestionNumber":"3","Question":"当字母表中的字母编号为 A 26、B 25、C 24 和 o 直到 Z 1 时，表示单词 VOWEL 的数字是多少。" ,"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 @使用 System.Web.Script.Serialization [h2]调查[/h2] [div data-bind="template: { name: 'surveyTemplate', foreach: SurveyList }"][/div] [脚本类型="text/html" id="surveyTemplate"] [div 样式 = "margin-bottom:20px"] [div 样式 = "margin-bottom:10px"] [strong data-bind="text: Question"][/strong] [/div] [分区] [ul data-bind="template: { name: function() { return QuestionTypeStructure.toString(); }, foreach: OptionsList }"] [ul] [/div] [/div] [/脚本] [脚本类型="文本/html" id="0"] [分区] [输入类型=“收音机”样式=“边距右：10px；宽度：自动”/][跨度数据绑定=“文本：$data.OptionValue”/] [/div] [/脚本] [脚本类型="文本/html" id="1"] [分区] [输入类型=“复选框”样式=“边距右：10px”/][跨度数据绑定=“文本：$data.OptionValue”/] [/div] [/脚本] [脚本类型="文本/html" id="2"] [分区] [输入类型=“文本”样式=“边距右：10px”/] [span data-bind="value: $data.OptionValue" /] [/div] [/脚本] $(文档).ready(函数 () { var 调查视图模型 = { 调查列表：ko.observableArray([]) }; var data = $('').html("@(new JavaScriptSerializer().Serialize(Model))").text(); var jsonData = $.parseJSON(data); 如果（jsonData！=未定义）{ //$.each(jsonData.SurveyList, function (baseIndex, T) { ko.utils.arrayForEach（jsonData.SurveyList，函数（T）{ varsurveyModel = new SurveyModel(T); surveyViewModel.SurveyList.push(surveyModel); ko.utils.arrayForEach（T.OptionsList，函数（Q）{ var optionModel = new OptionModel(Q); surveyModel.OptionsList.push(optionModel); //surveyViewModel.SurveyList[baseIndex].OptionsList.push(optionModel); }); }); ko.applyBindings(surveyViewModel); } }); 功能测量模型（T） { this.QuestionNumber = ko.observable(T.QuestionNumber); this.Question = ko.observable(T.Question); this.QuestionTypeStructure = ko.observable(T.QuestionTypeStructure); this.OptionsList = ko.observableArray([]); } 函数选项模型（Q） { this.OptionValue = ko.observable(Q.OptionValue); }

对于将 html 转换为其他内容，我深表歉意。问题是上述结果在 Mozilla 的错误字段中显示为：

错误：找不到具有 ID 函数 observable() 的模板 { if (arguments.length > 0) { // 写 // 如果值没有改变，则忽略写入 if ((!observable['equalityComparer']) || !observable['equalityComparer'](_latestValue, arguments[0])) { observable.valueWillMutate(); _latestValue = 参数[0]; if (DEBUG) observable._latestValue = _latestValue; observable.valueHasMutated(); } 返回这个； // 允许链式赋值 } 别的 { // 读 ko.dependencyDetection.registerDependency(observable); // 如果调用者执行了“读取”操作，则只需要通知调用者更改 返回_最新值； } } http://localhost:3391/Scripts/knockout-2.1.0.debug.js 2653线

Answer 1

问题在于[ul data-bind="template: { foreach: OptionsList }"] 你没有在那里给出模板名称。从你的其他模板来看，我认为你想要这样的东西：

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