如何使用挖空使窗口大小可观察

How to make window size observable using knockout

本文关键字：窗口大小 观察 何使用      更新时间：2023-09-26

尝试对浏览器窗口执行某些操作：

  1. 是否可以使用挖空使窗口大小（$(window).width(), $(window).height()）可观察？
  2. 如何将未来添加元素保留在窗口中央？是否可以使用 jquery live 方法或 KNOCKOUT 自定义绑定来完成一些事情？

任何建议表示赞赏！

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

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 本身调整大小，您需要重新计算左边距，这始终可以绑定到视图模型上的值。希望这有帮助。

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

.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>
相关文章：