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 つのドロップダウン間の依存関係に関するものです。1 番目のオプションが選択されているときに 2 番目のドロップダウンの値を変更するにはどうすればよいですか? 上記のコードでわかるように、試してみevent:{mouseover: interactive, mouseout: interactive}ましたが、問題は、2 番目のオプションが選択されたときに、マウスが選択ボックスに再び移動するまで、snd ドロップダウンの値が更新されないことです。これを作る簡単な方法があると確信していますが、初心者としてそれを見つけることができません

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 に答える