javascript - [オブジェクトオブジェクト]を返すKnockout.js動的HTMLバインディング

Question

Knockout.js を使い始めたばかりで、動的 HTML に関するクエリがあります。

動的アンケートを作成しています。これは持っています;

• ...を含むメインアンケートビューモデル
• ... を含むページの observableArray。
• ... を含む質問の observableArray です。
• オプションの配列。

$.map 関数を使用してオプションをマップしました。

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

ViewModel でいくつかの 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/

何か案は？