使用Knockout.js级联下拉列表

时间:2013-11-27 17:14:47

标签: asp.net-mvc knockout.js

除了两件我无法弄清楚的事情之外,我能够实现这个目标:

问题1:我需要同时获得以下两项,但现在只能实现一个或另一个:

  1. 选择需要具有值和文字的选项
  2. 模型中捕获的selectedOption需要返回所选选项的对象,而不仅仅是选项的值
  3. 我可以通过在我的选择标记中包含或排除以下内容来影响其中一项工作:

    ...data-bind="optionsValue = 'Id'"...
    

    我如何实现这两个目标?

    问题2:我需要在下拉列表中将所选选项设置为从包含用户首选值的cookie中检索的对象。我的下面的实现根本没有设置所选的值。我错过了什么?

    $(document).ready(function(){
        var userOption = $.cookie("userPref") == null ? undefined : JSON.parse($.cookie("userPref"));
    
        var model = function(){
            this.options = ko.observableArray();
            this.childOptions = ko.observableArray();
            this.selectedOption = ko.observable(userOption); //this does nothing to set the value
    
            this.selectedOption(userOption); //this also does nothing
    
            this.options.subscribe(function(){
                //this.selectedOption() returns an object if optionsValue is excluded from select databinding and returns option value if included
                $.cookie("userPref", JSON.stringify(this.selectedOption());
                this.childOptions(undefined);
                this.childOptions(this.selectedOption() ? this.selectedOption().children : []);
            }.bind(this));
        };
    
        var viewModel = new model();
        ko.applyBindings(viewModel);
    
        $.ajax({
            type: "GET",
            url: "myurl",
            success: function(data){
                viewModel.options(data);
            }
        }); 
    });
    
    <select data-bind="options: options, optionsText: 'text', optionsValue: 'Id', value: selectedOption, optionsCaption: 'Select Option'"></select>
    

1 个答案:

答案 0 :(得分:0)

你不能使用整个对象作为值,因为选项值必须是一个简单的类型:string,int等。我想你可以 JSON编码对象(所以&& #39; sa string)并将值设置为 ,但是你必须在后端回复并将发布的字符串值解码回一个对象并以某种方式使用它。但是,所述对象将与EF断开连接,因此您必须从数据库中获取新对象以便对其执行任何有意义的操作。而且,您的第二个问题与第一个问题相同,您无法使用完整的对象。

通常使用ID的方式。您将选项值设为对象的ID。然后,您可以根据Cookie中对象的ID设置所选选项。当你到达后端时,如果你需要使用该对象,你可以通过发布的id获取它。其他任何事情都不是一个可靠的情况。