0

例 jsFiddle

部分的に機能し、ダイアログをレンダリングし、N 件の送信を追加して 1 件を削除できますが、編集はできません... まだ

サブ質問のリストを表示する jQuery UI ダイアログを表示するカスタム バインディング ハンドラーを作成しました。これらが完了し、 [変更を保存] ボタンが押されると、observable using のコピーがko.toJS(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 の機能を妨げていると思います。

誰かが私を正しい方向に押しやる指針を持っていますか? 私は現在、ノックアウトで簡単なエディター パターンを読んでいるので、編集ダイアログをキャンセルするときにすべてを処理できると確信commitしrollbackています。保存された送信を編集する方法がわかりません。

試行 1: jsFiddle

という 2 番目のカスタム バインディング ハンドラーを作成し、ビュー モデルにeditSubmissionDialog追加しました。selectedSubmissionこれはダイアログを開いていますが、ko.toJS（私が思うに）ダイアログに渡されたアイテムは観察できません。また、同じダイアログを使用する別のカスタム バインディング ハンドラーを本当に作成する必要がありますか?

4

2 に答える 2

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

于 2013-08-14T09:57:18.437 に答える
0

ワーキング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);
};

詳細については、提供されている作業用 jsFiddleを参照してください。

于 2013-09-16T14:57:01.563 に答える