2

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

data-bind = "值：programId，事件：{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>
4

2 回答 2

2

是的。要在可观察对象发生变化时调用函数，请使用subscribe：

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

这一直记录在文档页面的底部。

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

var UploadModel = ...;
var theViewModel = new UploadModel('1');
ko.applyBindings(viewModel, $('#container-upload')[0]);
theViewModel.getProgramDetails();
于 2013-06-25T19:56:17.220 回答
1

如果您想手动订阅示例中的 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(); 
  });
};

淘汰赛计算文档

于 2013-06-26T03:44:09.040 回答