【问题标题】:Knockout attribute binding does not work with a custom functionKnockout 属性绑定不适用于自定义函数
【发布时间】:2014-02-23 21:26:23
【问题描述】:

我有一个淘汰模型,其中有一个 bar 元素,我有一个自定义函数 foo(),它不在模型中,用于格式化数据。

当我将模型绑定到具有以下内容的 html 视图时:

<span data-bind="text: foo(bar), attr: { 'title': foo(bar)}"></span>

它只部分起作用:文本被格式化,但属性标题被忽略(没有出现错误,它只是被忽略)。但是当我使用时:

<span data-bind="text: foo(bar), attr: { 'title': bar}"></span>

标题输出为“条”。所以基本上自定义函数不适用于属性绑定。

那么有没有办法让我的foo(bar) 正常工作?

附:这是一个可重现的代码:

HTML 视图

<span data-bind="foreach: listOfReports">
    <div class="10">
        <span data-bind="text: Helper.timestamp2HumanReadable(date), attr: { 'title': Helper.timestamp2Date(date)}"></span>
    </div>
</span>

视图模型

function ArticlesViewModel() {
    this.listOfReports      = ko.observableArray([{'date' : 1283364108}, {'date' : 1893364108}]);
};
ko.applyBindings(new ArticlesViewModel());

当我开始编写代码以使其可重现时,我发现我没有在 Helper 的函数中返回正确的值。

很抱歉给大家发了这篇文章并浪费了你们的时间。我希望我下次永远不要这样做。非常感谢您的帮助。

【问题讨论】:

  • 所以text 绑定有效但title 无效?你能创建一个 jsfiddle 因为对我来说你的代码工作正常:jsfiddle.net/fdXDu
  • 是的,在第一个示例中,text 绑定正在工作,title 被忽略而没有错误。在第二个示例中,一切正常。
  • 请发布您的实际foo 函数以及您如何定义bar(它是ko.observbale,还是计算的或“常规”属性)?如果您不想发布您的实际代码,请尝试从我的 privious 评论中重现我的小提琴中的问题并在此处发布链接。
  • @nemesv 我的函数 foo。看起来更像这样:var Helper = { foo : function (bar){ return bar.toUpperCase(); } } 但是当我将它发布到您的fiddle 时,它会出现错误。我正在尝试创建一个可重现的示例(我有很多代码,不想用巨大的代码墙惹恼每个人)
  • 这正是小提琴的工作原理:您不需要在 Helper 之前使用 var 来使其在小提琴中全局化。否则你的代码仍然有效:jsfiddle.net/LCJHp/1 所以你的问题在其他地方......

标签: data-binding knockout.js


【解决方案1】:

如果bar 是ko.observable,那么您需要做的就是:

<span data-bind="text: foo(bar()), attr: { 'title': foo(bar())}"></span>

如果bar 不是ko.observable,那么您的代码应该可以工作。

【讨论】:

  • 感谢您调查问题,但我的 bar 是可观察数组中的一个元素,并且我的文本 foo(bar) 正在工作,只是标题 foo(bar) 不是
猜你喜欢
  • 1970-01-01
  • 2014-02-03
  • 1970-01-01
  • 2018-03-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多