代码之家 › 专栏 › 技术社区 › Ms01

动态创建的选择不绑定到它们的可观察值?

knockout-3.0 knockout.js typescript javascript

0

Ms01 · 技术社区 · 7 年前

我在淘汰中动态创建选择,如下所示:

<h5 data-bind="visible: selectedChildren() > 0">@Model.SelectChildrenAge</h5>
  <input type="hidden" name="ac1" data-bind="value: selectedChildrenAgesCsv()"/>
  <div class="children-age-container__ages" data-bind="foreach: childrenAges">
       <select class="children-age-container__ages--select" data-bind="options: $data, optionsCaption: 'Age', value: $parent.selectedChildrenAges[$index]"></select>
   </div>

在我的模型中,我希望动态创建的选择值绑定到一个ObservableArray:

selectedChildrenAges: KnockoutObservableArray<number> = ko.observableArray([
        0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0
    ]);

然而,似乎它们总是0,即使选择的实际创建工作像一个魅力。这里的问题是,我实际上不想发布选择框中的内容,因为后端系统要求我将其作为csv字符串发布。我所做的是创建一个订阅方法,该方法将更新 selectedChildrenAgesCsv 因此:

this.selectedChildrenAges.subscribe(() => {
            console.log((this.selectedChildrenAges as any).join(", "));
            this.selectedChildrenAgesCsv((this.selectedChildrenAges as any).filter(age => age > 0).join(","));

我的控制台日志从来没有在这里输出任何东西,我有点迷失在如何面对它。我试过这么多不同的方法,但似乎没什么好用的。

1 回复 | 直到 7 年前

1

TSV 7 年前

这个 selectedChildrenAges 是一个可观察的数组。为了得到你应该使用的内容 () :

this.selectedChildrenAges.subscribe(() => {
            console.log((this.selectedChildrenAges() as any).join(", "));
            this.selectedChildrenAgesCsv((this.selectedChildrenAges() as any).filter(age => age > 0).join(","));
});

或者使用NewValue作为子脚本处理程序函数中的参数:

this.selectedChildrenAges.subscribe((newValue: Array<number>) => {
            console.log(newValue.join(", "));
            this.selectedChildrenAgesCsv(newValue.filter(age => age > 0).join(","));
});

或者可以使用计算:

this.selectedChildrenAgesCsv = ko.computed<string>(() => {
    return this.selectedChildrenAges().filter(age => age > 0).join(",");
});