Question

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

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

主要调查问卷视图模型，其中包含......
一个observableArray of Pages，其中包含......
一个observableArray of Questions，其中包含......
选项数组。

我使用$ .map函数映射了我的选项，比如;

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

我在ViewModel中动态生成一些html，但是当我尝试连接时将Option Text说成像一组Radio Buttons;

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);
}

Knockout.js动态HTML绑定返回[object Object]

1 个答案: