1

我可能会为此获得很多反对意见，但我真的很需要你的帮助，因为我正在努力。

我的 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>

这是我的视图模型：

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 个下拉菜单之间的依赖关系。选择第一个选项时，如何更改第二个下拉列表的值？As you can see in the above code, I have tried event:{mouseover: interactive, mouseout: interactive}but the problem with it is that when the 2nd option is selected the value in the snd drop down is not updated untill the mouse goes again over the select box. 我确信有一种简单的方法可以做到这一点，但作为初学者，我无法发现它

4

2 回答 2

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

我希望它有帮助

于 2013-09-11T08:33:36.847 回答
0

我建议考虑订阅您的可观察活动。

会是这样的：

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

每当您的活动可观察更新时，此功能就会运行。

于 2013-09-11T08:26:29.160 回答