Knockout.js 从动态创建的输入元素更新可观察对象

下面是JSON形式的模型结构概述

---

我有一个问题列表（如上所述），每个问题都有各自的

text

和

controlType

属性。我已经创建了一个自定义绑定处理程序，用于在表单上绘制输入，并创建了另一个处理程序，用于根据所创建控件的DOM结构处理

应答

例如，对于一个特定控件类型，我将多个作为一个类型，这将创建以下标记：

<select data-bind="options: ['Jan','Feb','Mar'...], optionsCaption: ' - '"></select>
<input type="text" size="5" />

但是我开始进入各种循环引用地狱——所以我想我应该把它提升到一个级别，并将我的
答案设置为可以从DOM元素中观察到

有没有人有任何想法/建议来让这项工作顺利进行

进一步信息

看来我之前解释得不够好，所以我会再努力一点

我的每个
问题
对象都有一个名为
controlType
的属性。这表示应该在页面上绘制哪些DOM元素。因此，对于多个（作为示例），我应该具有以下DOM元素：

<div class="question">
    <label class="question-label" data-bind="text: $data.text"></label>
    <select data-bind="value: $data.answer.month, options: [month names]"></select>
    <input type="text" data-bind="value: $data.answer.year" />
</div>



这将允许用户回答一个问题——假设问题文本可能类似于你什么时候出生的？然后，上述DOM结构允许他们提交月份和年份的答案，即1990年1月的答案。现在，在后台，我需要从这两个DOM元素中获取值，并将它们合并为一个答案，以设置
question.answer
属性。我试着用两个计算的观察值
question.answer.month
和
question.answer.year
，但随着我的控制类型变得越来越复杂，我进入了循环参考地狱，即我的答案依赖于它的计数器部分，每个计数器部分依赖于解析的答案

简言之，我试图根据未指定数量的DOM元素设置一个observable的值，在这种（最简单的）情况下，它是一个
SELECT
和一个
INPUT
元素。
这个答案建议了另一种解决方案

首先，使用替换自定义绑定处理程序的用法。您的模板如下所示：



这可能是主要问题，也是这里的主要问题。下面是关于你的“多重”问题类型的一些想法，但我强烈建议你在这方面多做一些工作，如果你有困难，可以问一个单独的问题，因为如果你一次只有一个问题，那么效果最好

顺便说一句，看看这一切都在起作用。请注意，jQuery已经很少使用了，这通常是一个好的标志（至少是您使用KO的方式）

我认为你可能需要在“复杂的”/多个问题类型上做更多的工作。以上是朝着正确方向迈出的一步，IMO还需要对数据和视图模型进行一些更改：


数据将包含选项，例如

选项：['Jan'、'Feb'、'Mar'/*等*/]

视图模型将包含类似于

self.opts=ko.observearray（data.opts | | |[]）

视图模型还将包含额外的可观察对象：

self.answerAddition=ko.可观察（“”）

以及可能的只读计算返回：

self.answer（）+“”+self.answerAddition（）


然而，我认为进一步采取这几步会让您受益匪浅，也许可以创建一些基于原型的继承，并创建一个专门的问题构造函数来表示“月+年”。
对不起，我不明白什么不起作用。你能描述一下你的小提琴出了什么毛病吗？“现在发生了什么应该发生什么呢？”内梅斯夫很抱歉，我有两个3个月大的孩子需要经常关注！我添加了更多信息，希望能有所帮助？谢谢，我的问题是我有很多控件类型，有很多不同的计数器部件，所以我尽量避免每个控件类型都有一个特定的模型。我试图将DOM访问排除在我的模型之外（因此使用了自定义绑定），但我认为如果我可以从给定组中的特定DOM元素设置答案，那么它的可伸缩性会更好。模板的想法很好，我可以很高兴地摆脱
renderControl
绑定，转而使用模板。
question.answer.month = ko.computed({
    read: function () {
        if (this.answer()) {
            return this.answer().split(' ')[0]; // returns the month part
        }
        return null;
    },
    write: function (value) {
        if (value) {
            this.answer(value);
        }
    },
    owner: question
});

<div class="question">
    <label class="question-label" data-bind="text: $data.text"></label>
    <select data-bind="value: $data.answer.month, options: [month names]"></select>
    <input type="text" data-bind="value: $data.answer.year" />
</div>