javascript - Knockout.js 动态 HTML 绑定(bind)返回 [object Object]

Question

我刚刚开始使用 Knockout.js，并且有一个关于动态 HTML 的查询。

我正在创建一份动态调查问卷。这有;

• 主要调查问卷 View 模型，其中包含...
• 一个可观察的页面数组，其中包含...
• 一个可观察的问题数组，其中包含...
• 一系列选项。

我已经使用 $.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/

有什么想法吗？

Answer 1

您的optionText确实是 Option对象。

尝试:

htmlContent += item.optionText.optionText;

更新:

真正的问题在于:

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使用您的自定义函数，您将重新创建 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);
}