0

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

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

  • 主要问卷视图模型，其中包含...
  • 一个 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/

有任何想法吗？

4

1 回答 1

2

你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);
}
于 2013-07-06T20:22:34.423 回答