尝试对浏览器窗口执行某些操作:
$(window).width(), $(window).height()
)可观察?任何建议都赞赏!
答案 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>