Knockout.js [object Object]를 반환하는 동적 HTML 바인딩

Question

저는 Knockout.js로 시작 했으므로 동적 HTML에 대한 쿼리를 얻었습니다.

동적 설문지를 작성 중입니다. 이것은있다;

• 포함 포함 메인 설문보기 모델, ... 포함 페이지의
• observableArray ... 질문의
• observableArray, ...
• 옵션의 배열 .

$ .map 함수를 사용하여 내 옵션을 매핑했습니다.

this.options = $.map(questionOptions, function(text) { 
                 return new Option(text) 
                }); 

나는 시도하고 라디오 버튼의 세트처럼 뭔가에 옵션 텍스트를 말할 연결할 그러나 때 뷰 모델에 동적으로 일부 HTML을 생성하는거야;

var htmlContent = ''; 
ko.utils.arrayForEach(_self.options, function (item) { 
    htmlContent += '<input type="radio" name="' + ko.utils.unwrapObservable(_self.questionNumber) + '" data-bind="attr: {value: value}, checked: $root.selected" />\r\n'; 
    htmlContent += '<span>\r\n'; 
    htmlContent += item.optionText; 
    //htmlContent += ko.utils.unwrapObservable(item.optionText); // Doesn't Work 
    //htmlContent += item.optionText(); // Doesn't Work 
    htmlContent += '</span>\r\n'; 
       }); 

return htmlContent; 

나는 한 묶음으로 끝납니다.

[object Object] 

는 내가 텍스트 상자를 가지고 계획하고있어로

내가 템플릿을 사용하는 방법을 잘 모르겠어요 .. 대안의 몇 가지를 시도하고 어디로 가야 붙어 조금 들어 왔 라디오 버튼, 드랍 다운,리스트 등이 모두 함께 있습니다. 하지만 아마도 내 지식은 여기에 부족합니다!?

여기 예제 코드가있는 jsFiddle이 있습니다.

http://jsfiddle.net/PGallagher69/wA6mQ/21/

어떤 아이디어가?

Answer 1

optionText은 실제로 Option 개체입니다.

시도 :

는

htmlContent += item.optionText.optionText; 

는 UPDATE :는

진짜 문제는 여기에있다 :

function PagesViewModel(pageNo, pageHeader, questions) { 
    this.pageNumber = ko.observable(pageNo); 
    this.pageHeaderText = ko.observable(pageHeader); 

    this.questionItems = ko.observableArray($.map(questions, function (n) { 
     return [new QuestionViewModel(n.questionType, n.questionNumber, n.questionText, n.pointsBudget, n.options)] 
    })); 
} 

당신이 당신의 PagesViewModel를 만드는의 questions 매개 변수가 이미의 배열입니다 QuestionViewModel 개체에 할당하고 this.questionItems에 cu를 할당합니다. stom 함수를 사용하여 QuestionViewModel을 다시 만들고 이미 Option 배열의 객체 인 n.options을 전달하여 Option 객체로 다시 배치하면 결국 item.optionText 대신 item.optionText.optionText이 필요하게됩니다.

이 시도 :

function PagesViewModel(pageNo, pageHeader, questions) { 
    this.pageNumber = ko.observable(pageNo); 
    this.pageHeaderText = ko.observable(pageHeader); 
    this.questionItems = ko.observable(questions); 
}