javascript - 为什么我会收到 self.description(...) is undefined ？

Question

我已经开始使用 Knockout JS，并向我的 View 模型应用了一个 textarea 计数器。但由于某种原因我收到错误消息:

TypeError: self.description(...) is undefined
var counter = self.description().length;

甚至是我的测试集 fiddle不起作用。

我的代码是这样的:

//HTML
<textarea data-bind="value: description, valueUpdate: 'afterkeydown'"></textarea>

//JS
jQuery(document).ready(function($) {
    ko.applyBindings(specialOfferPreviewModel());
});

function specialOfferPreviewModel() {

// -- This part works
    var self = this;
    self.promoTitle = ko.observable();
    self.description = ko.observable();
    self.fromDate = ko.observable();
    self.toDate = ko.observable();

    // To and from date
    self.validPeriod = ko.computed(function() {
        return self.fromDate + " - " + self.toDate;
    }, self);


// -- And this part breaks it
    self.count = ko.computed(function(){
        var counter = self.description().length;
        return counter;
    });
}

我错过了什么？任何帮助表示赞赏!

更新:

我不确定这两者的区别，但其中一个都有效:

//1
function specialOfferPreviewModel(){}
ko.applyBindings(specialOfferPreviewModel());

//2
var specialOfferPreviewModel = function(){}
var vm = new specialOfferPreviewModel ();
ko.applyBindings(vm);

它们都有效

Answer 1

因为可观察值包含未定义的内容，因为它尚未设置。

通过这样写:

self.description = ko.observable();

可观察值包含未定义的内容，如果分解代码如下所示，您可以看到它:

self.description = ko.observable();
var content = self.description();
content.length;

在 fiddle 中:

var counter = self.description().length;

在绑定(bind)到字段之前进行评估，这就是其内部值未定义的原因。

所以你可以初始化可观察的:

self.description = ko.observable('');

或者您可以推迟计算的评估:

self.count = ko.computed({
    read: function () {
         var counter = self.description().length;
         return counter;
    },
    deferEvaluation: true
});

See doc