Question

无论如何都要在这个JS小提琴中触发我的元素的title属性的更新：

请注意，元素的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

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

未捕获的ReferenceError：未定义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._copyOtherParty HelpText（）'和' this .copyOtherParty HelpText（）'

这里你去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());

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

2 个答案: