javascript - バインディングと動的htmlを「使用」したknockout.js

Question

内部にいくつかのコンテンツとボタンを表示するモーダル ダイアログが必要です。ダイアログは、観察可能なプロパティにバインドするかどうかに関係なく、ダイアログには閉じるボタンも必要です。1つは本体の内側に、もう1つは右上隅にあります。私の主な目的は、これらのボタンでこのモーダルフォームを閉じることですが、ダイアログの本文内の「キャンセル」ボタンが期待どおりに機能しません。

1) 最初のアプローチ:

この例では、ダイアログは静的ダイアログで作成され、[ダイアログを開く] ボタンをクリックすると表示され、右上の X リンクをクリックすると閉じますが、[閉じる] ボタンをクリックしても閉じませんが、オブザーバブルを設定しますヌルに。この素晴らしい説明で説明されているように、私はこのアプローチについてかなり確信していました。

私のコードからの抜粋:

HTML:
<button data-bind="click: openDialog">Open dialog</button>
<div data-bind="with: dialogOpener">
    <div data-bind="dialog: { data: $data, options: { close: Close } }">
        <button data-bind="click: Save">Save</button>
        <button data-bind="click: Close">Cancel</button>
   </div>
</div>

JS:
self.dialogOpener = ko.observable();

self.openDialog = function () {             
    var data = {
        Save: function() {
                  alert('Saved');
              },
        Close: function() {
                  alert('Closed');
                  self.dialogOpener(null);
               }
        }

    self.dialogOpener(data);
}

完全に機能する例: http://jsfiddle.net/cQLbX/

2) 2 番目のアプローチは、ダイアログ html が動的に作成され、最初の例と同じ内容と結果が得られる方法を示しています。

私のコードからの抜粋:

HTML:
<button data-bind="click: openDialog">Open dialog</button>

JS:
self.dialogOpener = ko.observable();

self.openDialog = function () {
    var element = "";
    element += '<div data-bind="with: $data">';
    element += '<div data-bind="dialog: { data: $data, options: { close: Close } }">';
    element += '<button data-bind="click: Save">Save</button>';
    element += '<button data-bind="click: Close">Cancel</button>';
    element += '</div>';
    element += '</div>';

    var data = {
        Save: function() {
            alert('Saved');
        },
        Close: function() {
            alert('Closed');
            self.dialogOpener(null);
        }
    }

    self.dialogOpener(data);

    ko.applyBindings(data, $(element)[0]);
}

完全に機能する例: http://jsfiddle.net/6T3Ra/

私の質問は：

両方の例で、本文内の「キャンセル」ボタンが機能せず、ダイアログが閉じません。何が間違っていて、これを解決するにはどうすればよいですか?

どうもありがとう！