Question

好的，我有相当多的分层数据。

我预先超过1部分

然后我有一个可用的下拉列表

<p  data-bind="visible: Id">
  Race:
  <select data-bind="options: $parent.data.Races, optionsText: 'Name' , optionsValue:        'Id',     value: RaceId, optionsCaption: 'Choose...'"></select>
</p>

但是使用raceId查找有效性别的绑定不起作用，因为上下文不会随着with绑定而改变。

<p data-bind="with: $parent.data.Races()[ RaceId ]">
    <pre data-bind="text: ko.toJSON($data,null , 2) "></pre> //debug

    Gender:
    <select data-bind="options: Genders, optionsText: 'Name' , optionsValue: 'Id', value:  $parent.Gender, optionsCaption: 'Choose...'"></select>
</p>

请注意，无法更改上下文，所有内容都是可观察的。

我想过用函数做这个，但是有点棘手，因为它需要在raceId更改时更改（并且当没有设置raceId时隐藏或空列表）

任何帮助将不胜感激。

这是我当前的函数尝试（并且我是javascript的新手），虽然with binding会更加优雅。

self.getGenderForRace = ko.computed( function () {
    if ( this && this.data) {
        return this.data.Races()[this.RaceId].Genders;
    } else {
        return new Array();
    }

    deferEvaluation: true;
}, this);

这是我的一些视图模型

l6.CreateViewModel = function (options) {
var self = this;


//this.getGenderForRace = ko.computed(function (character) {
//    return this.data.Races()[character.RaceId].Genders;
//}, this);

self.getGenderForRace = ko.computed( function () {
    if ( this && this.data) {
        return this.data.Races()[this.RaceId].Genders;
    } else {
        return new Array();
    }

    deferEvaluation: true;
}, this);

self.setData = function (url, raceId, factionId, viewmodel) {



    $.getJSON(url, { raceId: raceId, factionId: factionId }, function (data) {
        viewmodel.data = ko.mapping.fromJS(data.Data);

        ko.applyBindings(viewmodel);  // we dont bind till we get data
        // add to strcture and map!
        //self.data = data.Data; 
        $("#tabContainer").tabs();

    });

Answer 1

如果您像我在项目中那样分解数据，根据每个选项，您必须在此处进行ajax调用，这是一个如何做到这一点的示例。

http://jsfiddle.net/Zholen/h7j3f/

Answer 2

如果您想加入deferEvaluation: true，则应将其作为ko.computed的选项传递：

self.getGenderForRace = ko.computed({
    read: function() {
        if ( this && this.data) {
            return this.data.Races()[this.RaceId].Genders;
        } else {
            return [];
        }
    },
    deferEvaluation: true
}, this);

Answer 3

这是一个工作小提琴，演示了一种方法来做你想要的：http://jsfiddle.net/jearles/Q8kcs/

你有什么理由搞乱Ids吗？使用选择值绑定可以保存整个选定的observable。这使我们可以轻松访问可用的子选项。

knockoutjs绑定依赖选择列表

3 个答案: