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

是。要在观察到更改时调用函数，请使用subscribe：

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

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

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

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

Answer 2

如果您希望手动订阅属性（如示例中的programId），并且还希望立即触发，则可以使用knockout computed observable。

计算出的observable会立即进行求值，并且每当其中任何一个依赖项发生更改时。

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

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

调用knockout js函数

2 个答案: