Knockout computed property not binding

wbm

I am having trouble binding a computed variable using Knockout. Here is some simplified code of the problem. I have a computed variable selectedClientStrategy which should be an array of strategy objects when set. I can see it in the pre data-bind but it is not populating the second select in the page. Any help appreciated.

<div>

    <select data-bind="visible:dealClients().length > 0, options: dealClients, optionsText: 'clientName', value: selectedClient"></select>
    <br />
    <select data-bind="visible:selectedClientStrategies().length > 0, options: selectedClientStrategies, optionsText: 'strategyName'"></select>

</div>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

<script>
//client object
function client(data) {
    var jClient = $.parseJSON(data);

    this.clientId = ko.observable(jClient.documentId);
    this.clientName = ko.observable(jClient.company.companyName);
    this.clientDescription = ko.observable(jClient.company.companyDescription);
    this.clientStrategies = ko.observableArray([]);
    for (var i = 0; i < jClient.strategies.length; i++)
    {
        this.clientStrategies.push(new strategy(jClient.strategies[i]));
    };
}
//strategy object
function strategy(data) {

    this.strategyId = ko.observable(data.documentId);
    this.strategyName = ko.observable(data.strategyName);
    this.strategyClientId = ko.observable(data.clientId);
}
// Overall viewmodel for this screen, along with initial state
function dealViewModel() {
    var self = this;
    self.dealClients = ko.observableArray([]);
    self.selectedClient = ko.observable();
    self.selectedClientStrategies = ko.computed(function ()
    {

        if (self.selectedClient())
        {
            return self.selectedClient().clientStrategies;
        }
        else
        {

            return [new strategy({strategyId: "", strategyName: "", strategyClientId: ""})];
        }

    }
    )

    self.clientData = ko.observable();

    $.getJSON
        (
            '/api/client',
            function (data)
            {
                for (var i = 0; i < data.length; i++)
                {
                    self.dealClients.push(new client(data[i]));
                };
            }
        )
}

ko.applyBindings(new dealViewModel());

sample JSON from ajax call

[
  {
  documentId: "client_1",
  documentType: "client",
  company: {
    documentId: "company_97",
    documentType: "company",
    companyName: "gg",
    companyDescription: ""
    },
  strategies: [
    {
      documentId: "strategy_1",
      documentType: "strategy",
      clientId: "client_1",
      strategyName: "af"
    },
    {
      documentId: "strategy_10",
      documentType: "strategy",
      clientId: "client_1",
      strategyName: "gdf"
    },
    {
      documentId: "strategy_2",
      documentType: "strategy",
      clientId: "client_1",
      highriseId: "fi",
      strategyName: "fi"
    },
    {
      documentId: "strategy_3",
      documentType: "strategy",
      clientId: "client_1",
      strategyName: "rp"
    },
    {
      documentId: "strategy_4",
      documentType: "strategy",
      clientId: "client_1",
      strategyName: "ad"
    },
    {
      documentId: "strategy_5",
      documentType: "strategy",
      clientId: "client_1",
      strategyName: "Df"
    },
    {
      documentId: "strategy_6",
      documentType: "strategy",
      clientId: "client_1",
      strategyName: "g"
    },
    {
      documentId: "strategy_7",
      documentType: "strategy",
      clientId: "client_1",
      strategyName: "eme"
    },
    {
      documentId: "strategy_8",
      documentType: "strategy",
      clientId: "client_1",
      strategyName: "ff"
    },
    {
      documentId: "strategy_9",
      documentType: "strategy",
      clientId: "client_1",
      strategyName: "ggr"
    }
  ]
}
,
{
  documentId: "client_2",
  documentType: "client",
  company: {
    documentId: "company_100",
    documentType: "company",
    companyName: "Mmm",
    companyDescription: "mm"

  },
  strategies: [
    {
      documentId: "strategy_11",
      documentType: "strategy",
      clientId: "client_2",
      strategyName: "GG"
    },
    {
      documentId: "strategy_12",
      documentType: "strategy",
      clientId: "client_2",
      strategyName: "EM"
    },
    {
      documentId: "strategy_13",
      documentType: "strategy",
      clientId: "client_2",
      strategyName: "DG"
    },
    {
      documentId: "strategy_14",
      documentType: "strategy",
      clientId: "client_2",
      strategyName: "GG "
    },
    {
      documentId: "strategy_15",
      documentType: "strategy",
      clientId: "client_2",
      strategyName: "mm"
    }
  ]
}
]
thangcao

The selectedClientStrategies is dependent on the selectedClient and the selectedClient is not initialized, so in this case you should return an array of strategy: return [new strategy({strategyId: "", strategyName: "", strategyClientId: ""})]; and it should be: return self.selectedClient().clientStrategies(); in case the selectedClient has value.

the reason is that options must be bound with an array of objects.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Knockout computed property not binding

From Dev

Knockout custom binding to a computed column

From Dev

How to avoid binding table knockout in computed array

From Dev

Knockout options binding reference property

From Dev

binding viewmodel to existence of a property in knockout

From Dev

Knockout.js computed array property

From Dev

Knockout mapping nested array with computed property

From Dev

Accessing Knockout Observable Property from Computed Property Gives TypeError

From Dev

Binding a property that could be of multiple data types in Knockout

From Dev

Knockout SelectedOptions binding to property of object fails

From Dev

Knockout Nested Computed Property binds on page load but fails after Parent Computed Property update

From Dev

Knockout: Prevenet a property from adding into a computed's dependency list

From Dev

Swift: Cocoa binding value to a computed property does not work

From Dev

Have computed binding fire when array sub property changes?

From Dev

Knockout if binding

From Dev

Knockout "with" binding

From Dev

knockout value binding: the way to reread property from html element

From Dev

binding a Knockout observable property to a bootstrap radio button value fails

From Dev

Knockout.js binding with a mapped object and subscribing to property changes

From Dev

Knockout Computed with Parameter not updated

From Dev

Knockout writable computed observables

From Dev

Knockout Computed Observable with parameters

From Dev

knockout foreach computed value

From Dev

knockout observable array computed

From Dev

knockout foreach computed value

From Dev

Knockout writable computed observables

From Dev

observable and computed are not working properly Knockout

From Dev

Knockout Js computed not working in a model

From Dev

Knockout js Computed not being fired

Related Related

  1. 1

    Knockout computed property not binding

  2. 2

    Knockout custom binding to a computed column

  3. 3

    How to avoid binding table knockout in computed array

  4. 4

    Knockout options binding reference property

  5. 5

    binding viewmodel to existence of a property in knockout

  6. 6

    Knockout.js computed array property

  7. 7

    Knockout mapping nested array with computed property

  8. 8

    Accessing Knockout Observable Property from Computed Property Gives TypeError

  9. 9

    Binding a property that could be of multiple data types in Knockout

  10. 10

    Knockout SelectedOptions binding to property of object fails

  11. 11

    Knockout Nested Computed Property binds on page load but fails after Parent Computed Property update

  12. 12

    Knockout: Prevenet a property from adding into a computed's dependency list

  13. 13

    Swift: Cocoa binding value to a computed property does not work

  14. 14

    Have computed binding fire when array sub property changes?

  15. 15

    Knockout if binding

  16. 16

    Knockout "with" binding

  17. 17

    knockout value binding: the way to reread property from html element

  18. 18

    binding a Knockout observable property to a bootstrap radio button value fails

  19. 19

    Knockout.js binding with a mapped object and subscribing to property changes

  20. 20

    Knockout Computed with Parameter not updated

  21. 21

    Knockout writable computed observables

  22. 22

    Knockout Computed Observable with parameters

  23. 23

    knockout foreach computed value

  24. 24

    knockout observable array computed

  25. 25

    knockout foreach computed value

  26. 26

    Knockout writable computed observables

  27. 27

    observable and computed are not working properly Knockout

  28. 28

    Knockout Js computed not working in a model

  29. 29

    Knockout js Computed not being fired

HotTag

Archive