在淘汰赛中绑定嵌套依赖可观察对象的可观察数组答案

【问题标题】：Binding Observable array of nested dependent observables in knockout在淘汰赛中绑定嵌套依赖可观察对象的可观察数组
【发布时间】：2013-05-19 20:48:36
【问题描述】：

我正在使用 Breeze，它会自动创建一个嵌套的 Observablearray 结构，该结构由不同级别的依赖 observables 组成。

我试图模仿这个小提琴中的结构。简单地说，我有一个客户端实体从服务器返回，并带有一个相关的用户实体，Breeze 自动映射到一个可观察的数组。我只需要从这个数组中在我的表单上显示一些客户端属性和一些用户属性。

HTML

<div>

    <select  data-bind="options: clientAndStaff, optionsText: 'clientId', value: 'clientId', optionsCaption: 'Select a client'"></select>    

</div>

虚拟机

var esp= esp||{};

esp.ClientDetails  = function(x){

    this.clientId =  new ko.dependentObservable(function(){return x.clientId;});

   this.User =  new ko.dependentObservable(function(){return x.ClientStaffDetails;});


};


esp.ClientStaffDetails = function(x){

    var FirstName = new ko.dependentObservable(function(){return x.firstName;});
    var LastName =  new ko.dependentObservable(function(){return x.lastName;});


};

esp.vm = new (function()
              {
                  this.clientAndStaff= ko.observableArray(
                  [
                      new esp.ClientDetails({clientId:1                                        
                                             ,clientStaff:new esp.ClientStaffDetails({firstName:'first',lastName:'example'})

                                            }),
                      new esp.ClientDetails({clientId:2
                                             ,clientStaff:new esp.ClientStaffDetails({firstName:'second',lastName:'example'})
                                            })   

                  ]
                  );
              });

ko.applyBindings(esp.vm);

小提琴

http://jsfiddle.net/T6Fk5/7/

谁能告诉我如何将 optionsText 绑定到 firstName 或者更好的是 firstName + LastName 给定 observableArray 结构。提前致谢

【问题讨论】：

标签： knockout.js breeze

【解决方案1】：

最简单的方法是重写 clientStaffDetails 类的 toString 方法。

esp.ClientStaffDetails = function (x) {
    var self = this;

    self.FirstName = new ko.observable(x.firstName);
    self.LastName = new ko.observable(x.lastName);
    self.toString = ko.computed(function () {
        return self.FirstName() + ' ' + self.LastName();
    });

};

我还将 optionsText 参数更改为 User

<div>
    <select data-bind="options: clientAndStaff, optionsText: 'User', value: 'clientId', optionsCaption: 'Select a client'"></select>
</div>

见Fiddle

希望对你有帮助。

【讨论】：

感谢达米安的回复。问题是我刚刚创建了这些类来尝试模拟微风生成的结构。如果没有这些课程，而您只能与客户和员工一起工作……您将如何做到这一点？在这里创建一个计算似乎并不奏效。

【解决方案2】：

好吧，我能做到的唯一方法是重新建模微风返回的数据，然后将其添加到我的可观察数组中。对此不是很满意，但由于只读数据现在可以使用。

function querySucceeded(data) {
            if (observableArray!= null) {
                var temp = [];
                data.results.forEach(function (val) {
                    temp.push({'id':val.ClientStaffID(),'name':val.User().FirstName() +' '+val.User().LastName() });

                });
                observableArray(temp);
                firstLoad = false;
                return;
            }

        }

【讨论】：