3

ユーザーがロゴセクションをクリックすると、新しいロゴ画像をアップロードしたり、現在のロゴ画像を変更したり、現在のロゴ画像を削除したりできるモーダルダイアログが表示されます。

現在、アップロード画像によってページが更新されますが、ページの更新を防ぐために、この機能を処理するajax投稿を使用する方向に進んでいます。

私が抱えている問題は、画像がそこにあり、ユーザーが画像を削除すると、ノックアウトjsモデルが更新された後、モーダルダイアログボックスが更新されないことです。画像は2つの領域に表示されます。1つは本来あるべき画面に表示され、もう1つはプレビューとしてモーダルダイアログに表示されます。メイン画像のsrcが更新され、非表示にできますが、jQueryUIが要素のクローンを作成すると、ノックアウトとダイアログの間のバインディングが削除されたように見えます。

この投稿のinitの例を使用しようとしましたが、モーダルダイアログがレンダリングされませんでした。

何か案は？

HTML / Razor

<div id="logo" data-bind="cmdDialog: {id:'dialog-form', cmd:'open'} ">
    <div id="changeLogo">
        <h1 data-bind="visible: URL() == null"><span>Logo Here</span></h1>
        <img data-bind="attr: { src: URL}, visible: URL() != null"/>
    </div>
    <div id="dialog-form" data-bind="setDialog:{}">
        <img data-bind="attr: { src: URL}"/>
        <button type="button" data-bind="visible: URL() != null, deleteImage: ImageID">Remove Image</button>
        <hr/>
        <form action="uploadImage" method="post">
            @Html.HiddenFor(m => m.ID, new { data_bind = "value: ID" })
            @Html.HiddenFor(m => m.ImageID, new { data_bind = "value: ImageID" })
            <div>
                <input type="file" name="file" id="file"/>
            </div>
            <div>
                <input type="submit" value="Upload" />
                <button type="button" data-bind="cmdDialog: {id:'dialog-form', cmd:'close'} ">Cancel</button>
            </div>
        </form>
    </div>
</div>

</ p>

JavaScript 

$(document).ready(function () {
        /*************************************/
        // Modal Dialog config
        /*************************************/
        var options = {
            autoOpen: false,
            resizable: false,
            modal: true,
            height: 400,
            width: 450
        };

        /*************************************/
        // Knockout config
        /*************************************/
        var viewModelLogo;

        ko.bindingHandlers.setDialog = {
            init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
                var $element = $(element);

                setTimeout(function() {$element.dialog(options); }, 0);
            }
        };

        ko.bindingHandlers.cmdDialog = {
            init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
                $(element).click(function() {
                    var parms = ko.utils.unwrapObservable(valueAccessor());
                    var $logoForm = $('#' + parms.id);

                    $logoForm.dialog(parms.cmd);
                });
            }
        };

        ko.bindingHandlers.deleteImage = {
            init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
                $(element).click(function() {
                    deleteImage(viewModel);
                });
            }
        };
        $.getJSON("/Logo/Logo/GetPageModel", Model.ID, function(result) {
            updateModel(result.Data);
        });

        var deleteImage = function(imageModel) {
            var image = ko.toJS(imageModel);
            $.post("/Logo/Logo/deleteImage", image, function(result) {
                updateModel(result.Data);
            });
        };

        function updateModel(image) {
                viewModelLogo = ko.mapping.fromJS(image);
                ko.applyBindings(viewModelLogo, document.getElementById('logo'));
                $('#dialog-form').dialog("close");
        };
    });
4

2 に答える 2

3

あなたが行ったようにダイアログを定義したとき、つまり通常のdivとしてバインディングが機能しないことがわかりました。ただし、テンプレートを使用した場合、 data パラメーターを使用して、ビューモデルで使用していた他のアイテムを含むすべてをスコープに入れるバインド先のアイテムを指定できました。

元のページhttp://jsfiddle.net/rniemeyer/WpnTU/を更新するダイアログ ウィンドウでこれを行う Ryan Niemeyer の優れた例をご覧ください。

彼がどのようにダイアログの内容をテンプレートとして定義したかに注目してください。

于 2012-05-04T16:17:22.187 に答える
0

updateハンドラを設定していないようです。これを正しく行う方法については、このノックアウト チュートリアルをご覧ください。

于 2012-04-24T21:28:25.157 に答える