Knockout.js 编辑模式（对话框）提交

部分工作，我可以渲染对话框，添加N个提交和删除一个-但我不能编辑。。。然而

---

我创建了一个自定义绑定处理程序，它呈现一个jqueryui对话框，其中显示一系列子问题。一旦完成这些操作并按下保存更改按钮，它将使用

ko.toJS（observable）

获取一份observable的副本，并将其添加到一个数组中，该数组随后将添加到我的视图模型上的

observable array

，如下所示

var submission = [];
viewModel.selectedQuestion().subQuestions().forEach(function (sq) {
    submission.push(ko.toJS(sq));
});
viewModel.submissions.push(submission);

viewModel.deleteSubmission = function (submission) {
    var index = 0;
    viewModel.submissions().forEach(function (s) {
        if (s === submission) {
            viewModel.submissions.splice(index, 1);
        }
        index++;
    });
};

我在视图模型上附加了一个函数，可以删除这样一个给定的提交

var submission = [];
viewModel.selectedQuestion().subQuestions().forEach(function (sq) {
    submission.push(ko.toJS(sq));
});
viewModel.submissions.push(submission);

viewModel.deleteSubmission = function (submission) {
    var index = 0;
    viewModel.submissions().forEach(function (s) {
        if (s === submission) {
            viewModel.submissions.splice(index, 1);
        }
        index++;
    });
};

但是我有点困惑于如何编辑提交，如何使用给定的模型再次呈现对话框。我知道

ko.renderTemplate

并且目前正在尝试这种方法，但是我认为我添加到提交数组中的

ko.toJS

副本阻止了淘汰

有人能给我指点方向吗？我目前正在通读，因此我很有信心在取消编辑对话框时可以处理所有的

提交

和

回滚

——我只是不确定如何编辑保存的提交

---

尝试1：

---

我创建了第二个名为

editSubmissionDialog

的自定义绑定处理程序，并将

selectedSubmission

添加到我的视图模型中。这将打开对话框-但是由于

ko.toJS

（我认为）传递到对话框的项目是不可见的。另外，我是否真的必须创建另一个使用相同对话框的自定义绑定处理程序，希望不是。

您的绑定处理程序非常奇怪，您从处理程序对VM有依赖关系。 在这里查看我的对话框示例，它使用了更通用的模板方法

它使用dialogItem上的一个成员来告诉加载哪个模板

this.dialogItem({ template: "dialog-template-one", message: "Dialog one data", title: "Databindable title" });

它使用我编写的绑定集合中的对话框绑定

---

以我喜欢的方式实现了这一点，本质上，我是

.splice

在给定的索引处编辑提交的集合

绑定

<div class="submissions" data-bind="foreach: { data: $root.submissions, as: 'submission' }">
    <table>
        <tbody data-bind="foreach: { data: $data, as: 'question' }">
            <tr>
                <td class="key" data-bind="text: question.text"></td>
                <td data-bind="text: question.answer"></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2">
                    <button data-bind="click: $root.deleteSubmission">Delete</button>
                </td>
            </tr>
        </tfoot>
    </table>
</div>

---

更多详细信息，请参见。

当然，这是一种很有趣的方式，但对于我在定制绑定中所做的工作来说，这有点超出了我想要实现的范围。也许我稍后会看一些东西，但现在有点复杂。