javascript - 如何使用敲除使窗口大小可观察

Question

尝试对浏览器窗口做一些事情：

1. 是否可以使用 Knockout 使窗口大小 ( $(window).width(), $(window).height()) 可观察？
2. 如何将未来添加的元素保持在窗口的中心？使用jquery live 方法或淘汰赛自定义绑定可以做些什么吗？

任何建议表示赞赏！

Answer 1

使它们可观察的唯一方法是将它们代理为可观察的属性。

var yourViewModel = {
   width: ko.observable(),
   height: ko.observable()
};

var $window = $(window);
$window.resize(function () { 
    yourViewModel.width($window.width());
    yourViewModel.height($window.height());
});

我真的不明白你的第二个问题。你不能只使用css吗？

编辑

第二个问题。一种可能性是编写一个绑定处理程序来执行此操作（未经测试）。

ko.bindingHandlers.center {
   init: function (element) {
       var $el = $(element);

       $el.css({ 
           left: "50%", 
           position: "absolute", 
           marginLeft: ($el.width() / 2) + 'px' 
       }); 
   }
}

50% 和左边距是在场景中居中的好方法，因为即使调整了窗口大小，它也会自动工作。显然，如果 div 本身调整大小，您需要重新计算左边距，这可能总是绑定到 viewmodel 上的值。希望这可以帮助。

Answer 2

为了详细说明 Dean 对他的winsize自定义 bindingHandler 的评论，它是如何使用的：

JS

ko.bindingHandlers.winsize = {
    init: function (element, valueAccessor) {
        $(window).resize(function () {
            var value = valueAccessor();
            value({ width: $(window).width(), height: $(window).height() });
        });
    }
}

self.windowSize = ko.observable();

HTML

<div data-bind="winsize: windowSize"></div>