jquery - オブザーバブルのコンテンツ内で購読する

Question

ドロップダウンリストがあります。ドロップダウンリストの値はアカウントにバインドされています。アカウントが変更されるたびに、その値に基づく別のドロップダウンが必要です。アカウントが変更されるたびにコードを追加して他のドロップダウンに入力できるように、アカウントにサブスクライブを追加できますか?

 var riskRegisterViewModel = function () {
    var self = this;
    self.Site = ko.observable();
    self.Program = ko.observable();
    self.Department = ko.observable();
    self.AuditType = ko.observable();
    self.Auditor = ko.observable();
    self.Status = ko.observable();
    self.ScheduleClause = ko.observable();
    self.AuditDateFrom = ko.observable();
    self.AuditDateTo = ko.observable();
    self.RiskRegisterArray = ko.observableArray();

    self.AuditTypeList = ko.observableArray(GetAuditType()); // This will handle the Audit Type Of the Modal dialog          
    self.ProjectList = ko.observableArray(GetProject()); // This will handle the Account Model

    self.RetrieveRiskRegister = function () {
        var riskRegister = GetRiskRegister(self.Site(), self.Program(), self.Department(), self.Status(), self.AuditType(), self.Auditor(), self.AuditDateFrom(), self.AuditDateTo());
        self.RiskRegisterArray($.map(riskRegister, function (item) {
            return new MapRiskRegister(item);
        }));
    };
    self.selectedRisk = ko.observable();
    self.selectRisk = self.selectRisk.bind(self);
    self.itemForEditing = ko.observable();

};
ko.utils.extend(riskRegisterViewModel.prototype, {
    // select an item and make a copy of it for editing
    selectRisk: function (item) {
        var self = this;
        self.selectedRisk(item);
        self.itemForEditing(new MapRiskRegister(ko.toJS(item)));            
    }
});

var riskRegisterVM = new riskRegisterViewModel();
ko.applyBindings(riskRegisterVM);
riskRegisterVM.itemForEditing.Account.subscribe(function () {
    console.log("Hello");
});
function MapRiskRegister(item) {
    var self = this;
    self.SeriesNumber = ko.observable(item.SeriesNumber);
    self.RiskRegisterEntryId = ko.observable(item.RiskRegisterEntryId);
    self.RiskRegisterTypeId = ko.observable(item.RiskRegisterTypeId);
    self.RiskRegisterType = ko.observable(item.RiskRegisterType);
    self.AuditDate = ko.observable(moment(item.AuditDate).format("MMMM DD, YYYY"));
    self.ScheduleClause = ko.observable(item.ScheduleClause);
    self.Details = ko.observable(item.Details);
    self.Account = ko.observable(item.Account);
    self.AccountName = ko.observable(item.AccountName);
    self.Department = ko.observable(item.Department);
    self.DepartmentName = ko.observable(item.DepartmentName);
    self.IsCompliance = ko.observable(item.IsCompliance);
    self.ComplianceName = ko.observable(item.ComplianceName);
    self.Findings = ko.observable(item.Findings);
    self.Recommendation1 = ko.observable(item.Recommendation1);
    self.Likelihood = ko.observable(item.Likelihood);
    self.LikelihoodName = ko.observable(item.LikelihoodName);
    self.Consequence = ko.observable(item.Consequence);
    self.ConsequenceName = ko.observable(item.ConsequenceName);
    self.RiskLevel = ko.observable(item.RiskLevel);
    self.RiskLevelName = ko.observable(item.RiskLevelName);
    self.RiskReason = ko.observable(item.RiskReason);
    self.AuditeesReason = ko.observable(item.AuditeesReason);
    self.POC = ko.observable(item.POC);
    self.POCName = ko.observable(item.POCName);
    self.TargetCompletionDate = ko.observable(item.TargetCompletionDate);
    self.IsOpen = ko.observable(item.IsOpen);
    self.Status = ko.observable(item.Status);
    self.RiskLevelCurrent = ko.observable(item.RiskLevelCurrent);
    self.StatusRemarks = ko.observable(item.StatusRemarks);
    self.DateOfCompletion = ko.observable(item.DateOfCompletion);
    self.Site = ko.observable(item.Site);
    self.SiteName = ko.observable(item.SiteName);
    self.Auditor = ko.observable(item.Auditor);
    self.AuditorName = ko.observable(item.AuditorName);
    self.RiskComputationAuditPeriod = ko.observable(item.RiskComputationAuditPeriod);
    self.Filter1 = ko.observable(item.Filter1);
    self.Filter1Name = ko.observable(item.Filter1Name);
    self.Filter2 = ko.observable(item.Filter2);
    self.Filter2Name = ko.observable(item.Filter2Name);
    self.RiskComputationCurrent = ko.observable(item.RiskComputationCurrent);
    self.RiskComputationCurrentName = ko.observable(item.RiskComputationCurrentName);
    self.IsEfficient = ko.observable(item.IsEfficient);
    self.IsRemediated = ko.observable(item.IsRemediated);
    self.IsCommitted = ko.observable(item.IsCommitted);
    self.CreatedDate = ko.observable(item.CreatedDate);
    self.CreatedBy = ko.observable(item.CreatedBy);
    return self;
}

Answer 1

非常に一般的に言えば、2 つのドロップダウンをリンクする方法ko.computedは、最初の選択された値に依存する に 2 番目をバインドすることです。このようなもの：

self.firstDropDownOptions = ko.observableArray();
self.firstDropDownSelected = ko.observable();
self.secondDropDownOptions = ko.computed(function() {
    var options = [];
    if (self.firstDropDownSelected() == whatever) {
        // populate options with whatever you need
    }
    else if (self.firstDropDownSelected() == somethingelse) {
        // population options with something else
    }
    return options;
});

変更すると、ノックアウトは依存関係にあり、ドロップダウン バインディングが更新されるため、firstDropDownSelected自動的に再評価されます。secondDropDownOptionsfirstDropDownSelected

HTML は次のようになります。

<select data-bind='options: firstDropDownOptions, 
    value: firstDropDownSelected'></select>
<select data-bind='options: secondDropDownOptions'></select>

あなたの場合、(バインディングを見ずに)itemForEditingと同等になると思いますfirstDropDownSelected。

Answer 2

これを行う方法の例を次に示します http://knockoutjs.com/examples/cartEditor.html