1

私はノックアウトとMVC4を使用するプロジェクトに取り組んでいます。ノックアウトデータを入力する動的jqueryダイアログを生成するコードがあります。

$("#manage-pros").click(function () {
$("<div>")
    .attr("data-bind", "template: { name: 'pro-template' }")
    .dialog({
        resizable: false,
        modal: true,
        title: "Manage Pros",
        width: 700,
        buttons: [
            {
                text: "Save Changes",
                'data-bind': 'click: saveChanges',
                click: function () { }
            },
            {
                text: "Cancel",
                click: function () {
                    $(this).dialog("close");
                }
            }
        ],
        close: function () {
            $(this).dialog("close");
            ko.cleanNode($(this));
        },
        open: function () {
            ko.applyBindings(new ProViewModel());
            $("input[type=button]").button();
        }
    });
});

Proテンプレートは次のようになります。

    <div class="modal-form" id="pro-template">
        <div class="form-element">
            <label>Add New Pro</label>
            <input data-bind="value: newProText" class="textbox ui-widget-content ui-corner-all" />
            <input type="button" data-bind="click: addPro" value="Add Pro" />
        </div>
        <table style="border-collapse: collapse;" class="ui-widget ui-corner-all">
            <tr class="ui-widget-header ui-dialog-header" style="">
                <td style="width: 75px; padding: 5px;">Modified</td>
                <td style="width: 425px; padding: 5px;">Pro Name</td>
                <td style="width: 100px; padding: 5px;"></td>
            </tr>
            <tbody data-bind="foreach: pros">
                <tr>
                    <td style="text-align: center;">
                        <span data-bind="fadeVisible: name.hasChanged()"><span class="ui-icon ui-icon-check left-icon"></span></span>
                    </td>
                    <td>
                        <input data-bind="value: name, visible: editingText(), hasfocus: editingText" class="textbox ui-widget-content ui-corner-all" />
                        <span data-bind="text: name, visible: !editingText(), click: textClick"></span>
                    </td>


                    <td>
                        <a href="#" data-bind="click: $parent.removePro">Delete</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

私が見つけたのは、動的コンテンツがDOMに初めて追加されたときはすべてがうまく機能するということですが、エスケープを押すかダイアログを閉じると、「クリックして編集」機能が機能しません。これをjsfiddleに入れようとしましたが、少し複雑すぎると思います。

誰か考えがありますか？

4

2 に答える 2

1

えーと……今は馬鹿げています。ダイアログを完全に破壊していませんでした。

$(this).dialog('destroy').remove();

上記の行をダイアログとブームのクローズハンドラーに追加しました。うまく機能します。

于 2013-01-05T06:00:29.753 に答える
0

ノックアウトによって作成されたものにイベントをバインドするときは、新しく作成されたDOM要素をピックアップするために.bindではなく.liveを使用する必要があります

于 2013-01-05T16:52:24.500 に答える