Question

我可能会为此获得大量的支持，但我真的需要你的帮助，因为我正在努力。

我在HTML页面中有这个代码：

<div class="lines">
    <div class="formElement">
        <label>Activity</label>
        <select name="activity" id="activity" data-bind="options: activityArray, value: activity, event:{mouseover: interactive, mouseout: interactive}, onclick: interactive" style="width: 15em;"></select>
    </div>
    <div class="formElement">
        <label>Sub Activity</label>
        <select name="subActivity" id="subActivity" data-bind="options: subActivityArray, value: subActivity" style="width: 15em;"></select>
    </div>
</div>

这是我的viewModel：

viewModelMain = function () {
    var
    mainData = ko.observableArray([]),
        showView = ko.observable(),
        activity = ko.observable(),
        activityArray = ko.observableArray(['licenses', 'services']),
        subActivity = ko.observable(),
        subActivityArray = ko.observableArray([]),
        request = ko.observable(),
        firstPayAmmount = ko.observable(),
        recuringAmmount = ko.observable(),
        comment = ko.observable(),

        interactive = function () {
            console.log("inside of interactive");
            if (this.activity() == 'licenses') {
                this.subActivityArray(['test']);
            } else this.subActivityArray(['test1']);
        };

    return {
        mainData: mainData,
        showView: showView,
        activity: activity,
        activityArray: activityArray,
        subActivity: subActivity,
        subActivityArray: subActivityArray,
        request: request,
        firstPayAmmount: firstPayAmmount,
        recuringAmmount: recuringAmmount,
        comment: comment,
        interactive: interactive
    };
},

我的问题是关于2次下降之间的依赖性。如果选择了第1个选项，如何更改第2个下拉列表的值？正如您在上面的代码中看到的，我已经尝试了event:{mouseover: interactive, mouseout: interactive}，但问题是当选择第二个选项时，snd下拉列表中的值不会更新，直到鼠标再次移到选择框上。我确信有一种简单的方法可以做到这一点，但作为初学者，我无法发现它

Answer 1

如果subActivityArray依赖于所选活动。您可以使用ko.computed，如下所示：

subActivityArray =  ko.computed(function(){
    // get selected activity
    var a = activity();
    // returns the right sub activities
    if(a ==  'licenses')
      return ['license1', 'license2', 'license3'];
    if(a ==  'services')
      return ['service1', 'service2', 'service3'];
    return [];
})

由于鼠标事件不是必需的，您可以从视图中删除它们：

<div class="lines">
    <div class="formElement">
        <label>Activity</label>
        <select name="activity" id="activity" data-bind="options: activityArray, value: activity" style="width: 15em;"></select>
    </div>
    <div class="formElement">
        <label>Sub Activity</label>
        <select name="subActivity" id="subActivity" data-bind="options: subActivityArray, value: subActivity" style="width: 15em;"></select>
    </div>
</div>

另一点，您可以按照以下方式简化代码

ViewModelMain = function(){
    var self = this;
    self.mainData = ko.observableArray([]);
    self.showView = ko.observable();
    self.activity = ko.observable();
    self.activityArray = ko.observableArray(['licenses', 'services']);
    self.subActivity = ko.observable();
    self.subActivityArray =  ko.computed(function(){
        // get selected activity
        var a = self.activity();
        // returns the right sub activities
        if(a ==  'licenses')
          return ['license1', 'license2', 'license3'];
        if(a ==  'services')
          return ['service1', 'service2', 'service3];
        return [];
    });
    self.request = ko.observable();
    self.firstPayAmmount = ko.observable();
    self.recuringAmmount = ko.observable();
    self.comment = ko.observable(); 
}; 

var viewModelMain = new ViewModelMain();

我希望它有所帮助

Answer 2

我建议您考虑对您的活动进行订阅观察。

会是这样的：

activity.subscribe(function(newValue) {
    if (newValue == 'licenses') {
            this.subActivityArray(['test']);
        } else this.subActivityArray(['test1']);
});

只要您的活动可观察性更新，此功能就会运行。

选择选项后无法执行操作

2 个答案: