ドロップダウン/チェックボックスオプションは、ノックアウトjsで初めてページを読み込んだ後の最初のクリックでバインドされません

SK

ASP.net + knockout-3.1.0アプリのバグを調査しています。

バグ:ドロップダウンとチェックボックスがいくつかあるポップアップがあります。場合によっては、最初にクリックしてポップアップを開いたときに最初のページを読み込んだ後、空のドロップダウン/チェックボックスが表示されます。それはめったに起こらず、ポップアップでのみ問題になります。

コード:

ASPX

<div id="campaignSettings" runat="server">
    <div class="action modal-popup">
        <a data-bind="click: settings.Show">Settings </a>
    </div>
    <div id="popupContainer">
        <div id="dialog" class="window dialog-settings">
            <div class="dialog-container">
                <controls:Settings id="settings" runat="server"></controls:Settings>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
function loadKo() {
    self.settings = new SettingsViewModel(self);
    ko.applyBindings(self);
    ko.applyBindings(self.settings, document.getElementById('koSettings'));
}

Sys.Application.add_init(loadKo);   
</script>

Settings.ascx

<div id="koSettings">
 <select data-bind="options: messageDropdown.Items, optionsText: 'Value', optionsValue: 'ID', value: messageDropdown.SelectedValue" ></select>     
</div>

settings.js

function SettingsViewModel(parent) {
    var self = this;

    self.isVisible = ko.observable(false);
    self.isLoaded = false;
    self.SearchType = ko.observable(false);
    self.ShowDefault = ko.observable();

    self.messageDropdown = {
        Items: ko.observableArray(),
        SelectedValue: ko.observable()
    };

    self.preferences = ko.observableArray();
    self.showDuration = ko.observable(false);

    self.getPreference = function (list, id) {
        var arr = ko.utils.arrayFilter(list, function (item) {
            return item.PreferenceID() == id.PreferenceID;
        });
        return arr[0];
    }

    self.messageDropdown.SelectedValue.subscribe(function (data) {
        if (data == 22) {
            self.showDuration(false);
            self.durationDropdown.SelectedValue(0);
        }
        else {
            self.showDuration(true);
        }
    });


    self.Show = function () {
        if (self.isLoaded !== true) {
            self.Load();
        }

        if (self.isVisible() !== true) {
            self.LoadPreferences();
        }
        self.isVisible(true);
    }


    self.Cancel = function () {
        self.isVisible(false);
    }

    self.Load = function () {
        $.ajax({
            type: "GET",
            contentType: "application/json",
            url: "rest/preference/load",
            async: false,
            context: document.body
        }).done(function (data) {
            ko.mapping.fromJS(data.Data, {}, self);
            self.isLoaded = true;
            self.SearchType(data.Data.SearchType);
        });
    }

    self.LoadPreferences = function () {
        $.ajax({
            type: "GET",
            contentType: "application/json",
            url: "rest/preference/get",
            async: false,
            context: document.body
        }).done(function (data) {
            self.preferences.removeAll();
            self.messageDropdown.SelectedValue(data.Data.SelectedMessage);
        });
    }
}

$(document).ready(function () {
    $('.modal-popup').click(function (e) {
        var att = $('.modal-popup').attr('disabled');
        var isLinkDisabled = false;
        e.preventDefault();

        if (!$.browser.msie) {
            if (att != 'disabled') {
                isLinkDisabled = false;
            }
            else {
                isLinkDisabled = true;
            }
        }
        else {
            if (att != true) {
                isLinkDisabled = false;
            }
            else {
                isLinkDisabled = true;
            }
        }

        if (!isLinkDisabled) {
            var id = $('#dialog');
            setPopupPosition(id, e);

            $(id).show('fast');
        }
    });
});

ポップアップが空で表示されたときにself.Show関数がトリガーされない場合があることに気付きました。誰かが持っているかもしれないどんな洞察も大いに感謝されるでしょう。

SK

このコードをsettings.jsに追加すると、私の問題が解決しました。

$(document).ready(function () {
    $('.modal-popup').click(function (e) {
        var elementToBind = document.getElementById('koSettings');
        var existingContext = ko.contextFor(elementToBind);
        if (existingContext && existingContext.$data.isLoaded) {
            // do nothing
        }
        else {
            existingContext.$rawData.Load();
            existingContext.$rawData.LoadPreferences();
        }

        // other lines
    });
});

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ