1

我的级联选择仍然存在问题，尤其是 optionsCaption。

如果我在父选择中选择“选择海报”选项，则会收到此错误：

Microsoft JScript 运行时错误：无法解析绑定。消息：TypeError：无法获取属性“ClientSite”的值：对象为空或未定义；绑定值：options: enter code hereselectedPoster().ClientSite, optionsText: 'ClientName', optionsCaption:select2OptionsCaption(), value: 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()isundefined而不是null

这解决了你的第一个问题

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 回答