0

无论如何在这个 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());
4

2 回答 2

3

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

未捕获的 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');
    }
}

编辑2：

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

老的：

<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/

于 2013-08-02T17:41:16.613 回答
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());
于 2013-08-02T17:46:58.153 回答