Question

我有以下ViewModel。

function PageSectionVM(pageSection) {
    var self = this;
    self.SectionName = ko.observable();
    self.Markup = ko.observable();

    self.update(pageSection);
}

我还创建了上面构造函数中调用的更新方法。

PageSectionVM.prototype.update = function (pageSection) {
    var self = this;
    pageSection = pageSection || {};

    self.SectionName(pageSection.SectionName);
    self.Markup(pageSection.Markup);
};

这是捆绑在自己的文件中，我想在几个页面中重用这个VM。在一个特定的页面上，我想扩展＆＃39;这个viewmodel包含一个新函数。我试过通过向PageSectionVM的原型添加一个新函数来做到这一点，就像这样。

PageSectionVM.prototype.tabName = function () {
    var self = this;
    return "#tab-" + self.SectionName();
};

如果我将其添加为敲除绑定语句，则返回函数的文本而不是函数结果。我觉得我错过了一些东西。如果我在原始视图模型中添加tabName作为computedObservable，它可以工作，但这意味着我将特定代码用于我的常规＆＃39; viewmodel的代码（我想避免的事情）。

我正在使用的淘汰赛绑定声明是

<a data-bind="attr:{href: tabName}, text:SectionName"></a>

它位于对PageSectionVMs的observableArray的foreach绑定中。 text属性很好，但是href最终包含函数的文字文本，而不是结果。

非常感谢任何帮助。

Answer 1

我不明白你为什么使用计算机出了问题。如果你想使用原型，可以按如下方式进行：

我还添加了url编码并启动了模型。

function PageSectionVM(pageSection) {
    var self = this;
    self.SectionName = ko.observable(pageSection.SectionName);
    self.Markup = ko.observable(pageSection.Markup);    
    self.TabName = ko.computed(this.getTabName, self);
};

PageSectionVM.prototype.getTabName = function () {
    var self = this;
    return "#tab-" + encodeURIComponent(self.SectionName());
};

http://jsfiddle.net/5vUhe/

Answer 2

如果我将其添加为敲除绑定语句，则返回函数的文本而不是函数结果。

当然可以。 Knockout绑定的工作方式如下：

检查绑定值是否为可观察
如果是，请打开它（即“执行它”）
将剩余的字符串转换为字符串并在视图中使用

注意：所有可观察的都是函数，但并非所有函数都是可观察的。

这意味着当text: SectionName是一个普通的旧函数时，如果你的绑定看起来像SectionName()，你将得到函数文本。

由于observable的工作方式（w / r / t依赖关系跟踪和this处理）你不能在原型中使用它们，它们有来生活在实例中。 / p>

这意味着：

要么将它们放在实例中（如@WayneEllery建议的那样）
或者您在视图（text: SectionName()）
或者您使用ko.utils.extend()来扩展预先存在的PageSectionVM个实例以及额外的可观察/计算。

将computedObservable添加到现有的javascript视图模型

2 个答案: