【问题标题】:When to use parenthesis in knockoutJS?什么时候在 knockoutJS 中使用括号?
【发布时间】:2013-08-06 09:04:28
【问题描述】:

我知道您在 knockoutjs 中为 ff 使用了括号: * 在代码中解开可观察函数 * 使用声明式绑定深入研究对象

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

现在我有了这种 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,我尝试删除&lt;div data-bind="fadeVisible: displayGuitars(), fadeDuration: 250"&gt;中的括号,然后突然fadeVisible停止工作,div不再当我选中/取消选中复选框时显示/隐藏。我的问题是为什么我需要 div 中的括号和 fadeVisible 绑定,如果它确实符合我上面提到的任何标准,那是哪一个?

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

【问题讨论】:

    标签: javascript data-binding knockout.js knockout-2.0


    【解决方案1】:

    您的问题是您在自定义绑定中没有unwrap 调用您的valueAccessor。它应该是这样的

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

    这将适用于 Knockout2.3 如果您有旧版本,则改为使用 ko.utils.unwrapObservable

    这里是 a fiddle 演示它没有括号。顺便说一句,将来当你有这样的代码来演示这个问题时,你可以自己组装一个小提琴,这样人们就可以快速查看问题。

    【讨论】:

      猜你喜欢
      • 2018-10-13
      • 2022-11-10
      • 2020-01-09
      相关资源
      最近更新 更多