Question

我有一个弹出div，其中包含我想在弹出窗口实际弹出时生成的错误消息。在我的弹出窗口div中，我有一个p标记，其文本被数据绑定到一个返回字符串的函数（错误消息）。我之前做过类似的事情取得了很大的成功，但这次我正在努力成功地正确绑定价值。
HTML div（忽略jQuery Mobile属性）：

<div data-role="popup" id="ErrorRowValidation" data-overlay-theme="b" data-theme="a" class="standarddialog" data-dismissible="false">
    <div data-role="header" data-theme="a" class="ui-corner-top">
        <h1>Error</h1>
    </div>
    <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
        <p data-bind="text: $root.getModelErrorText.bind($root)" class="validationError"></p>
        <a href="#" data-role="button" data-icon="check" data-inline="true" data-bind="click: $root.correctRowValue.bind($root)" data-theme="a">Edit</a>
        <a href="#" data-bind="click: $root.undoValidation.bind($root)" data-role="button" data-icon="delete" data-inline="true" data-rel="back" data-theme="a">Undo changes</a>
    </div>
</div>

我的JavaScript（实际上是typescript）函数成功返回一个正确的字符串，因此不是问题所在，但无论如何它仍然存在：

public getModelErrorText(): string {
    return lang.translateNewlineString(this.model.ErrorText());
}

我认为在撰写data-bind="text: $root.getModelErrorText.bind($root)"时我没有正确绑定文本值根据上面的代码，我得到了function() {[native code]}。我也试过data-bind="text: $root.getModelErrorText()"没有成功;该页面甚至无法加载。我是使用淘汰赛的新手，所以我真的不知道我在做什么......非常欢迎任何建议！

Answer 1

我认为我在写作时没有正确绑定文本值 data-bind="text: $root.getModelErrorText.bind($root)"

确实，这不正确，会导致function() {[native code]}

bind没有执行你的函数，它只是创建一个具有不同执行上下文的新函数（这可能会或可能不会由我稍微不正确地制定，但我100％确定函数是没有执行）。

data-bind="text: $root.getModelErrorText()"如果所有其他事情都有效，我们应该工作。所以我不能100％确定为什么这对你不起作用。我们需要其他信息来调试（更多代码，例如您的viewModel，html和applyBindings调用）。一个不错的选择是，当您通过绑定执行时，函数this中的getModelErrorText未设置为viewModel。您可以通过将函数转换为fat arrow syntax来轻松查看这是否是问题，如下所示：

public getModelErrorText = () => {
    return lang.translateNewlineString(this.model.ErrorText());
}

这应该保证this指向您的viewModel。

如果这不能解决问题，您可以使用我上面提到的代码编辑您的帖子，我也会编辑我的答案。

编辑：

另一种可能性是，this.model或this.model.ErrorText在应用绑定时尚未达到真值（例如，null或undefined）。在这种情况下，this.model.ErrorText()将失败，因为您正在尝试执行尚不存在的函数（可观察），因为它在稍后的时间点初始化。确保viewModel中的默认值具有正确设置的model ErrorText函数/ observable。当您的页面无法加载时，请尝试查看developer tools -> console以查看Knockout是否为您提供了错误消息。如果你在这里发布它可能会有所帮助。

使用knockout绑定html元素中的文本值

1 个答案:

编辑：