Question

Example jsFiddle

部分工作，我可以渲染对话框，添加N个提交并删除一个 - 但我无法编辑......但是

我创建了一个自定义绑定处理程序，它呈现了一个显示子问题列表的jQuery UI对话框。完成这些操作并按下保存更改按钮后，它会使用ko.toJS(observable)获取observable的副本并将其添加到数组中，然后将其添加到observableArray在我的视图模型上，像这样。

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副本会阻止Knockout执行此操作。

有没有人有任何指示让我朝着正确的方向前进？我目前正在阅读a simple editor pattern in Knockout，所以我非常有信心在取消编辑对话框时我可以处理所有commit和rollback - 我只是不确定我怎么做编辑已保存的提交内容。

尝试1：jsFiddle

我创建了第二个名为editSubmissionDialog的自定义绑定处理程序，并在我的视图模型中添加了selectedSubmission。这是打开对话框 - 但由于ko.toJS（我认为），传递给对话框的项目是不可观察的。另外，我是否真的必须创建另一个使用相同对话框的自定义绑定处理程序，希望不是。

Answer 1

您的绑定处理程序非常奇怪，您从处理程序依赖于VM。查看我的对话框示例，其中使用了更通用的模板方法。

http://jsfiddle.net/H8xWY/107/

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

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

它使用我写的这个绑定集合中的对话框绑定 https://github.com/AndersMalmgren/Knockout.Bindings

Answer 2

Working jsFiddle

管理以我喜欢的方式执行此操作，基本上我.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>

功能

self.deleteSubmission = function (submission) {
    var index = self.submissions().indexOf(submission);
    self.submissions.splice(index, 1);
};

provided working jsFiddle。

中的更多详细信息

编辑模态（对话框）提交

Example jsFiddle

尝试1：jsFiddle

2 个答案:

Working jsFiddle