1

カスケード選択、特に optionsCaption でまだ問題があります。

親選択で「ポスターを選択」オプションを選択すると、次のエラーが表示されます。

Microsoft JScript ランタイム エラー: バインドを解析できません。メッセージ: TypeError: プロパティ 'ClientSite' の値を取得できません: オブジェクトが null または未定義です。バインディング値: options: enter code hereselectedPoster().ClientSite, optionsText: 'ClientName', optionsCaption:select2OptionsCaption(), 値: selectedClient, disable: (selectedPoster().ClientSite==undefined)

誰かがそれを修正するのを手伝ってくれれば幸いです。

乾杯C

enter code here 

    var objPoster1 = new Dockethub.Services.PosterDdl();
    objPoster1.SiteId = -1;
    objPoster1.SiteName = "";

    var posterArray = ([
                           { SiteId: 1,
                             SiteName: "Mail",
                             ClientSite:[
                                { ClientId: 1, ClientName: "Mail Client A" }, { ClientId: 2, ClientName: "Mail Client B"}]  
                           },

                           { SiteId: 2,
                             SiteName: "DSAC",
                             ClientSite:[
                                { ClientId: 1, ClientName: "DSAC Client A"}]
                         },

                         {  SiteId: 3,
                            SiteName: "Bank",
                            ClientSite:
                                [{}]
                    }          
    ]);

    //var posterArray = ([]);
    //var posterArray = ([{ SiteId: 1, SiteName: "Royal Mail" }, { SiteId: 2, SiteName: "DSAC"}]);
    //var posterArray = ([{ SiteId: 1, SiteName: "Royal Mail",  ClientSite:[{}] }]);
    //posterArray.push(objPoster1);

    // VIEW MODEL START
                    var ViewModel = function () {
                        var self = this;


                        // Poster 
                        self.PosterList = ko.observableArray([]);
                        ko.mapping.fromJS(posterArray, null, self.PosterList);


                        self.selectedPoster = ko.observable(null);
                        self.selectedClient = ko.observable(null);


                        self.select1OptionsCaption = ko.computed(function () {
                            if (this.PosterList().length == 0) {
                                return 'No Posters';
                            } else {
                                return this.PosterList().length == 1 ? '' : 'Select a Poster';
                            }


                        }, self);


                        self.select2OptionsCaption = ko.computed(function () {
                            if (this.selectedPoster() == null || ko.toJS(this.selectedPoster().ClientSite) == undefined || ko.toJS(this.selectedPoster().ClientSite)[0].ClientName == null) {
                                return 'No Clients';
                            }
                            else {
                                if (this.selectedPoster() != null && ko.toJS(this.selectedPoster().ClientSite).length > 1) {
                                    return 'Select a client';
                                }
                                else if (this.selectedPoster() != null && ko.toJS(this.selectedPoster().ClientSite).length == 1) {
                                    return '';
                                }
                                else if (this.selectedPoster() != null && ko.toJS(this.selectedPoster().ClientSite).length == 0) {
                                    return 'No Clients';
                                }
                            }
                        }, self);


                    };   // END VIEW MODEL 

    var viewModel = new ViewModel();

    $(function () {

        ko.applyBindings(viewModel);


        // remove if statement if you wish to display the select tag event if selectedPoster is null 
    });

</script>
<fieldset class="SearchFilter">
    <legend>Search Filter</legend>
    <div class="SearchItem">
        <span>Poster:</span>




        <select id="Select1" data-bind="options: PosterList, optionsText: 'SiteName', value: selectedPoster, disable:PosterList().length <= 1, optionsCaption:select1OptionsCaption()" ></select> 
        <!-- ko if: selectedPoster --> 
         <select id="Select2" data-bind="options: selectedPoster().ClientSite, optionsText: 'ClientName', optionsCaption:select2OptionsCaption(), value: selectedClient, disable: (selectedPoster().ClientSite==undefined) "></select> 
        <!-- /ko --> 



        <%--<select id="Select1" data-bind="options: PosterList, optionsText: 'SiteName', value: selectedPoster, disable:PosterList().length <= 1, optionsCaption:select1OptionsCaption" ></select> 
        <select id="Select2" data-bind="options: selectedPoster().ClientSite, optionsText: 'ClientName', value: selectedClient"></select> --%>

        <%--<select id="Select1" data-bind="options: PosterList, optionsText: 'SiteName', value: selectedPoster, disable:PosterList().length <= 1, optionsCaption: (PosterList().length==0)?'No Posters':(PosterList().length==1)?'':'Select a Poster'" ></select>
        <select id="Select2" data-bind="options: selectedPoster().ClientSite, optionsText: 'ClientName', value: selectedClient, disable:(selectedPoster().ClientSite==undefined), optionsCaption: (selectedPoster()==undefined)? 'No Clients': ''"></select>--%>


       <%-- <select id="dllPoster" data-bind="foreach: PosterList, disable:PosterList().length <= 1" onchange="viewModel.refreshClientList();">
            <option data-bind="text: SiteName, attr:{value:SiteId}"></option>
        </select>
        <select id="ddlClient" data-bind="with: PosterList.ClientSite ">
            <option data-bind="text: ClientName, attr:{value:ClientId}"></option>
        </select>--%>
    </div>
</fieldset>
 <input type="button" value="Click me!" onclick="alert(viewModel.selectedPoster().ClientSite())" />

4

1 に答える 1

0

これは問題を再現しているようです：

http://jsfiddle.net/7bZT2/

の代わりにthis.selectedPoster()when selectedPoster()isを読み取ろうとしていますundefinednull

これで最初の問題が解決します

http://jsfiddle.net/sV4Vc/

これは問題を残します

<input type="button" value="Click me!" onclick="alert(viewModel.selectedPoster().ClientSite())" />

http://jsfiddle.net/sV4Vc/1/

あなたが望む方法ではないかもしれませんが、あなたが望むものに到達する方法を示しています。

于 2013-02-01T17:58:22.223 に答える