Computed Observable 更改不会更新 UI 中的 title 属性（使用 knockout-bootstrap.js）

Question

在这个 JS Fiddle 中是否有触发更新我的元素的 title 属性：

http://jsfiddle.net/YPXYJ/9/

请注意，元素的 data-bind 属性中的工具提示是 knockout-bootstrap.js 库的一部分

<label data-bind="text: copyOtherPartyHelpText()"></label>
<br />
<br />
 <i class="icon-question-sign" data-bind="tooltip: { title: copyOtherPartyHelpText(), placement: 'top', trigger: 'hover' }"></i>
<br />
<br />
<a style="cursor: pointer;" data-bind="click:changeHelpText">Click HERE To Change Label Text</a>

function MyViewModel() {
    this._copyOtherPartyHelpText = ko.observable();
    this.readOnlyView = ko.observable(true);


    this.copyOtherPartyHelpText = ko.computed({
        read: function () {
            var value = this._copyOtherPartyHelpText();

            if (value) {
                return value;
            }

            if (this.readOnlyView()) {
                value = 'Currently Disabled';
            } else {
                value = 'Match/agree to this term.';
            }
            //this makes things even worse, it is an initialization workaround
            //_copyOtherPartyHelpText(value);

            return value;
        },
        write: function (value) {
            this._copyOtherPartyHelpText(value);
        },
        owner: this
    });

    this.changeHelpText = function(){
        this.copyOtherPartyHelpText('help text updated but not tooltip');
    }
}


ko.applyBindings(new MyViewModel());

Answer 1

控制台/浏览器错误日志会告诉你：

未捕获的引用错误：未定义 copyOtherPartyHelpText

您必须使用 this. 引用您的函数调用，否则内部函数将转而寻找 window.copyOtherPartyHelpText。

我建议在您的视图模型中使用一个名为 self 的局部变量（就像他们在 knockoutjs 文档和教程中经常做的那样），这样您就可以始终安全轻松地从内部引用它的属性，如您修改的JSFiddle：http://jsfiddle.net/YPXYJ/3/

function MyViewModel() {
    var self = this;

    // More code here...

    this.changeHelpText = function(){
        alert('changeHelpText called');
        self.copyOtherPartyHelpText('help text and UI updated');
    }
}

EDIT2：

在标题的工具提示绑定中，您不调用值访问器，而是像这样引用可观察函数：

旧：

<i class="icon-question-sign" data-bind="tooltip: { title: copyOtherPartyHelpText(), placement: 'top', trigger: 'hover' }"></i>

新：

<i class="icon-question-sign" data-bind="tooltip: { title: copyOtherPartyHelpText, placement: 'top', trigger: 'hover' }"></i>

见：http://jsfiddle.net/YPXYJ/11/

Answer 2

你需要“这个”。当参考 'this._copyOtherPartyHelpText()' 和 'this.copyOtherPartyHelpText()'

给你http://jsfiddle.net/FtMdZ/2/

ko.observable();
    this.readOnlyView = ko.observable(true);


    this.copyOtherPartyHelpText = ko.computed({
        read: function () {
            var value = this._copyOtherPartyHelpText();

            if (value) {
                return value;
            }

            if (this.readOnlyView()) {
                value = 'Currently Disabled';
            } else {
                value = 'Match/agree to this term.';
            }
            //this makes things even worse, it is an initialization workaround
            //_copyOtherPartyHelpText(value);

            return value;
        },
        write: function (value) {
            this._copyOtherPartyHelpText(value);
        },
        owner: this
    });

    this.changeHelpText = function(){
        alert('changeHelpText called');
        this.copyOtherPartyHelpText('help text and UI updated');
    }
}


ko.applyBindings(new MyViewModel());