【问题标题】:knockout.js assign observable in data-binding declarationknockout.js 在数据绑定声明中分配 observable
【发布时间】:2012-06-10 20:48:39
【问题描述】:

是否可以通过如下的数据绑定声明设置 showErrorConsole 可观察对象?这个炸弹是“k.apply is not a function”。我知道我可以在这里使用内联函数,但这感觉不对,而且需要更多的输入。

HTML:

<div data-bind="event: { mouseover: showErrorConsole(true) }" ></div>
<div id="devConsole" data-bind="visible: showErrorConsole">
        <div><button data-bind="click: showErrorConsole(false)">X</button></div>
</div>

视图模型:

AjaxErrorsModel = (function () {
    function Constructor() {
        var self = this;
        self.errors = ko.observableArray();
        self.hasErrors = ko.computed(function () {
            return self.errors().length > 0;
        }, self);
        self.showErrorConsole = ko.observable(false);
    };
    return Constructor;
})();

【问题讨论】:

  • 我很惊讶您也无法通过数据绑定设置可观察属性,最终使用匿名函数。包含它似乎是一个基本的东西 - 我很好奇为什么 Knockout 作者忽略了它。

标签: javascript data-binding mvvm knockout-2.0


【解决方案1】:

可能有一个巧妙的 KO 技巧可以让您这样做,但最简单的方法是将其添加到您的构造函数中:

self.showErrorConsoleIsFalse = function() {
    self.showErrorConsole(false);
};

然后:

<button data-bind="click: showErrorConsoleIsFalse">

或者如果你想要鼠标悬停事件,也是一样的想法:

self.showErrorConsoleIsTrue = function() {
    self.showErrorConsole(true);
};

<div data-bind="event: { mouseover: showErrorConsoleIsTrue }" ></div>

编辑

当然,没有什么可以阻止您通过 jQuery 管理这些事件:

<div class="showConsole" ></div>

$(".showConsole").hover(function() {
    yourViewModel.showErrorConsole(true);
}, function() {
    yourViewMode.showErrorConsole(false);
});

【讨论】:

  • 谢谢。在查看了选项之后,我最终选择了匿名内联函数。这不是我想要的,但在可用的选项中,它最适合我的口味。在视图模型中为每个可以打开或关闭的属性添加额外的“setter”方法似乎会过多地污染虚拟机。
猜你喜欢
  • 2014-11-04
  • 2021-08-03
  • 2015-04-17
  • 2023-03-15
  • 1970-01-01
  • 2012-06-22
  • 2013-01-14
  • 2012-06-16
  • 1970-01-01
相关资源
最近更新 更多