我正在尝试使用KnockOut.js绑定视图上的复杂对象 . 在不使用overservable()和observableArray()的情况下,我能够将对象与视图绑定 . 但是当我实现observable()时,返回的结果在我的javascript viewmodel中添加了observable对象,并且我的视图无法绑定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
1 回答
问题是
[ul data-bind="template: { foreach: OptionsList }"]
你没有在那里给出模板名称 . 从你的其他模板来看,你想要这样的东西,我想: