如何使用knockout观察窗口大小

时间:2012-06-01 16:35:52

标签: javascript jquery knockout.js

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

  1. 是否可以使用Knockout使窗口大小($(window).width(), $(window).height())可观察?
  2. 如何在窗口中央保留未来添加的元素?是否可以使用 jquery live method knockout自定义绑定来完成某些事情?
  3. 任何建议都赞赏!

2 个答案:

答案 0 :(得分:10)

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

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上的值。 希望这会有所帮助。

答案 1 :(得分:1)

详细说明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>