如何使用knockout观察窗口大小

Question

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

1. 是否可以$(window).width(), $(window).height()使用Knockout 使窗口大小()可观察？
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%和margin-left是在场景中居中的好方法,因为即使调整窗口大小,它也会自动生效.显然,如果div自身调整大小,则需要重新计算左边距,这可能始终绑定到viewmodel上的值.希望这可以帮助.