编辑1

Question

Example jsFiddle

我仍然倾向于knockout.js所以随时提出改进我的代码的建议

我正在使用ko.mapping从包含以下结构的JSON字符串生成我的视图模型：

questions: [
    answer: "whetever the user enters", 
    controlType: "the type of input to display",
    lookupItems: "anything that will go into a SELECT input",
    modalSection: "if this question is a modal, then all modal questions will go here"
]

我设法让一切正常运行，following this example of handling modals设法让我的模态和各自的问题按照我的意愿弹出。

我的问题是，如何从此模式中保存多个结果？用户应该能够多次调出模态并添加他们想要的信息 - 然后应该在问题下面显示。

这是我到目前为止所尝试的内容：

将.submissions数组添加到modalSection

扩展我的.modalSection以获得提交集合，因此当用户点击模式上的确定时，它会将当前模态的副本添加到此集合中，然后应该在我的表中显示：

<!-- ko foreach: modalSection.submissions -->
<table>
    <tbody data-bind="foreach: questions">
        <tr>
            <td data-bind="text: text"></td>
            <td data-bind="text: answer"></td>
        </tr>
   </tbody>
</table>
<!-- /ko -->

Here's a version of my fiddle trying this

但这似乎不起作用，我的桌子仍未填充。即便如此，如果我确实这样做了，我甚至会朝着正确的方向前进 - 我不会只是多次存储modalSection的同一个可观察实例吗？

任何人都可以指出我正确的方向，也许可以看看提供的小提琴中的代码，并指出我可以改进的内容以及如何到达我想要的位置？

编辑1

尝试更好地理解我想要实现的目标。

说有两个问题：

你有没有车？
请详细说明您拥有的所有汽车，包括品牌，型号和颜色。

所以我的第一个问题是下拉列表（lookupItems是[是]和[否]）。第二个问题需要更多细节，因此它使它成为模态的主要候选者，因此这个问题将有一个按钮作为其输入，可能标记为[添加汽车]。

这会带来问题的模态（有控制类型等就像非模态问题一样）[汽车的品牌是什么？]，[模型是什么？]和[颜色是什么？]。填写模态后，结果将填充到某处（如表格），再添加[添加汽车]按钮可添加N个更多详细信息。

Answer 1

在开始之前，我想说我认为该指南未能实现将DOM操作与视图模型分离的目标。有几个DOM访问实例

var hiddenDiv = document.createElement('div');
    hiddenDiv.style.display = 'none';
    document.body.appendChild(hiddenDiv);
...
$(hiddenDiv).remove();
...
$rendered.dialog('close');

所有这些都打破了我们对问题的分离。有很多方法可以实现这一点，但这意味着要彻底改造您的代码。我会回到这个。

您的代码出现问题（以下解决方案）

HTML中以开头的部分循环遍历"foreach: modalSection.questions"。这里的问题是它不会显示submissions的集合，这是你坚持模态结果的地方。即使您正确地放置了结果，它们也不会显示。
您正在从HTML中收集JSON。这不是斯巴达，这很疯狂。
在对话框确定中，您将submissions添加为observableArray。这不起作用，因为Knockout已经为视图模型应用了绑定。
您push将对话框的结果submissions发送到中的数组，这不会引起可观察到的更改

您不是复制对话框结果，只是将其添加到submissions

您的代码解决方案

这里需要两个循环。 questions的外循环和script的内循环。

我猜你的服务器正在以某种方式将这个JSON粘贴到HTML中。特定服务器的解决方案会有所不同，但您应该能够将JSON粘贴到submissions标记中，将其存储在变量中，然后直接使用它。 DOM不适用于数据。

您需要在原始JSON中拥有submissions.push(item)属性，以便Knockout映射将在原始应用绑定之前为您创建一个observableArray。
添加到可观察数组中，如下所示：push。 ko.toJS位于可观察的之前 parens，而不是之后。
制作副本。 ko.mapping.fromJS将打开一个可观察的视图模型，并为您添加一个标准的javascript对象。然后，您可以在此处致电{{1}}，并获得干净的副本。

The working fiddle

进一步说明

仍然存在未重置对话框结果的问题。你可以通过几种方式处理这个问题，但是我真的鼓励你去做其他处理对话框的方法，这样你就不会在viewmodel中弄乱HTML。 Ryan Niemeyer有一个很好的小提示，展示了一个视图模型正在使用的jQuery dialog。这是基本的，但它应该指向正确的方向。

修改

这是another fiddle，重新进行了大量工作。视图模型中没有DOM访问，我使用Niemeyer的对话框绑定来与模态进行对话。我没有使用映射插件，因为我认为它会让你在视图模型有行为时更加努力。

如果您对此有任何疑问，请与我们联系。

The working fiddle

修改

存储模态模板的多个提交

Example jsFiddle

编辑1

1 个答案: