将所选对象保存到另一个Observable Array - KnockoutJS中

时间:2014-07-25 18:18:19

标签: javascript html asp.net-mvc data-binding knockout.js

我正在使用KnockoutJS来绑定一些数据但是在将两个DOM元素绑定在一起时遇到了问题。我有一个用JS对象填充的Observable Array。我正在尝试让选定的选项将其值保存到另一个将在别处使用的Observable Array中。这是我目前所拥有的一小部分内容。

function BracketsViewModel() {
    var self = this;
    self.AfcTeams = ko.observableArray([]);
    self.AfcSelectedDivision = ko.observableArray([]);

    // Initially creates array that will hold selected values from the dropdowns
    for (var i = 0; i <= 3; i++) {
        self.AfcSelectedDivision.push(new TeamModel(null));
    }

    // This gets a JSON string and saves into array
    $.getJSON('/Brackets/GetAFCTeams', function (data) {
        $.each(data, function (i, item) {
            self.AfcTeams.push(new TeamModel(item));
        });
   });
}

// JS Object
function TeamModel(data) {
    if (data) {
        this.Tri = data.Tricode;
        this.Name = data.DisplayName;
    } else {
        this.Tri = "";
        this.Name = "";
    }
    this.Rank = 0;
 }

 ko.applyBindings(new BracketsViewModel());

为简单起见,我这里只写了一行,但基本上会有12行。这是HTML。

<div class="row">
    <div class="col-sm-3" style="padding-right: 1px">
        <input class="form-control" type="number" data-bind="value: AfcSelectedDivision[0].Rank" />
    </div>
    <div class="col-sm-9" style="padding-left: 1px">
        <select class="form-control" data-bind="options: AfcTeams, optionsText: 'Name', optionsValue: 'Tri', optionsCaption: '-- Team --', value: AfcSelectedDivision[0]"></select>
    </div>
 </div>

我想将所选选项保存到另一个数组中的原因是因为我将在其他下拉列表中使用该数组,并使用用户选择的所有选定对象。因此,Rank属性只需输入一次,并将链接到所选团队。所以我要做的就是让选择的选项将JS对象保存到另一个数组中。有什么办法可以做到这样吗?或者也许是另一种可以完成同样事情的替代方案?

提前感谢您提供的任何帮助。

修改 我已经创建了一个修改过的JSFiddle来更好地直观地表达我正在尝试做的事情http://jsfiddle.net/VAufX/1/

1 个答案:

答案 0 :(得分:0)

试一试:Fiddle

关键在于使用计算机。

self.AfcSelectedTeams = [];

for (var i = 0; i <= 3; i++) {
    self.AfcSelectedTeams.push(ko.observable());
}

self.AfcSelectedDivision = ko.computed(function() {
    var tmp = [];
    ko.utils.arrayForEach(self.AfcSelectedTeams, function(team) {
        if (team()) {
            tmp.push(team());
        }
    });

    return tmp;
});

另外,请阅读this section of Knockout's documentation。看来你可能一直在使用&#34; optionsValue&#34;在你不需要时绑定。