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，傳遞n.options這個已經是Option對象的數組，因此再次用Option對象重新包裝它，這就是爲什麼你最終需要item.optionText.optionText而不是簡單的item.optionText。

試試這個：

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