Knockout计算属性不绑定

时间:2014-10-12 23:18:59

标签: javascript knockout.js

我无法使用Knockout绑定计算变量。这是一些简化的问题代码。我有一个计算变量selectedClientStrategy,它应该是一个策略对象数组。我可以在pre data-bind中看到它,但它没有填充页面中的第二个选择。任何帮助表示赞赏。

<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());

来自ajax调用的样本JSON

[
  {
  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"
    }
  ]
}
]

1 个答案:

答案 0 :(得分:0)

selectedClientStrategies依赖于selectedClient并且selectedClient未初始化,因此在这种情况下,您应该返回一个策略数组: 返回[新策略({strategyId:&#34;&#34;,strategyName:&#34;&#34;,strategyClientId:&#34;&#34;})]; 和它应该是:return self.selectedClient()。clientStrategies();如果selectedClient有值。

原因是选项必须与对象数组绑定。