调用敲除js函数

Question

我有一个具有“getProgramDetails”函数的 KnockoutJS 模型，它在下拉列表更改事件时被调用：

data-bind = "value: programId, event: {change: getProgramDetails}"

这很好用，但是在我传入默认程序 ID 1 后，如何在页面加载时调用此函数？如果 programId 属性发生变化，有没有办法调用函数？而不是通过下拉列表的更改事件调用该函数。这可能会有所帮助。

这是我的模型：

<script type="text/javascript">
var UploadModel = function (programId) {
    var self = this;
    self.programId = ko.observable(programId);
    self.fileType = ko.observable();
    self.fileTypes = ko.observableArray();
    self.getProgramDetails = function () {
        if (self.programId() > 0) {
            // get program budget level and file types
            $.ajax({
                url: '@Url.Action("GetProgramDetails", "FileLoader")', 
                data: 'programId=' + self.programId(),
                dataType: 'json', 
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    $('#budget-level').html(data.BudgetBalance);
                    var jsonFileTypes = data.FileTypes;

                    // add default option
                    jsonFileTypes.unshift({ 'Id': '', 'Name': '-- Select One --' });
                    self.fileTypes(jsonFileTypes);

                    $('.allow-upload').fadeIn();
                }
            });

        } else {
            $('.allow-upload').hide();
        }
    };
};

ko.applyBindings(new UploadModel('1'), $('#container-upload')[0]);
</script>

Answer 1

是的。要在 observable 发生变化时调用函数，请使用 subscribe：

self.programId.subscribe(function (newValue) {
    alert('Program ID is now:' + newValue);
}, self);

这一直记录在this page of the docs 的底部。

然而，我发现subscribe 不会在初始页面加载时触发，即使您初始化了 observable。你仍然需要做这样的事情：

var UploadModel = ...;
var theViewModel = new UploadModel('1');
ko.applyBindings(viewModel, $('#container-upload')[0]);
theViewModel.getProgramDetails();

Answer 2

如果您想手动订阅示例中的 programId 之类的属性，并且还希望它立即触发，您可以使用敲除计算 observable。

计算出的 observable 立即计算，并且每次它的任何一个依赖项发生变化。

一个鲜为人知的事实是，Knockout 甚至支持匿名计算 observables，这对于这种情况非常有用。

var UploadModel = function (programId) {
  self.programId = ko.observable(programId);
  ...

  ko.computed(function(){
    // register programId as a dependency
    self.programId() 
    // execute the function you need to call
    self.getProgramDetails(); 
  });
};

Knockout Computed Docs