何时在knockoutJS中使用括号

When to use parenthesis in knockoutJS?

本文关键字:knockoutJS 何时      更新时间:2023-09-26

我知道你在knockoutjs中对ff使用了paranthesign:*解开代码中的可观察函数*使用声明性绑定深入对象

或者当你有一个对象具有某些属性时,例如:*person().firstname*person()年龄(最右边的属性不需要括号)

现在我有了这种html/js:

<section>
      <label>
        <input data-bind="checked: displayGuitars" type="checkbox" />
         Display Guitars
      </label>
      <div data-bind="fadeVisible: displayGuitars(), fadeDuration: 250">
        <ul data-bind="foreach: products">
          <li>
            <span data-bind="text: model"></span>
          </li>
        </ul>
      </div>
      <div data-bind="dump: $data, enable: false"></div>
    </section>
<script>

  ..................................some code
   ko.bindingHandlers.fadeVisible = {
    init: function (element, valueAccessor) {
        // Start visible/invisible according to initial value
        var shouldDisplay = valueAccessor();
        $(element).toggle(shouldDisplay);
    },
    update: function (element, valueAccessor, allBindingsAccessor) {
        // On update, fade in/out
        var shouldDisplay = valueAccessor(),
            allBindings = allBindingsAccessor(),
            duration = allBindings.fadeDuration || 500; // 500ms is default duration unless otherwise specified
        shouldDisplay ? $(element).fadeIn(duration) 
            : $(element).fadeOut(duration);
    }
};

var vm = (function () {
    var data = mockdata.getProducts();
    var products = ko.observableArray(data);
    var displayGuitars = ko.observable(false);
    var vm = {
      displayGuitars: displayGuitars,
      products: products
    };
    return vm;
})();
ko.applyBindings(vm);
</script>

因此,它所做的基本上是,具有fadeVisible绑定的div根据复选框是否选中而切换为显示/隐藏,我尝试删除<div data-bind="fadeVisible: displayGuitars(), fadeDuration: 250">中的括号,然后fadeVisibility突然停止工作,当我选中/取消选中复选框时,div不再显示/隐藏。我的问题是,为什么我需要在div中使用fadeVisible绑定的括号,如果它符合我上面提到的任何标准,那是哪一个?

先生/女士,您的回答将大有帮助。谢谢++

您的问题是在自定义绑定中没有valueAccessorunwrap调用。它应该看起来像这个

init: function (element, valueAccessor) {
        // Start visible/invisible according to initial value
        var shouldDisplay = ko.unwrap(valueAccessor());
        $(element).toggle(shouldDisplay);
    },

这将在Knockout2.3中工作。如果你有一个旧版本,它的ko.utils.unwrapObservable

这是一把没有琴的小提琴。顺便说一句,将来,当你有这样的代码来演示这个问题时,把你自己的小提琴放在一起会有帮助,这样人们就可以快速地看到问题。