tamaño de la ventana observable utilizando nocaut

Question

Tratando de hacer algo acerca de la ventana del navegador:

1. ¿Es posible hacer que el tamaño de la ventana ($(window).width(), $(window).height()) observable mediante golpe de gracia?
2. Cómo mantener FUTURO Elementos añadidos en el centro de la ventana? ¿Se puede hacer algo utilizando el jquery live method o el knockout custom bindings?

Cualquier sugerencia apreciada!

Answer 1

La única manera de hacer que sean observables es mediante un proxy en propiedades observables.

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

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

Realmente no entiendo su segunda pregunta. ¿No podrías usar CSS para esto?

EDITAR

Segunda pregunta. Una posibilidad sería escribir un controlador de enlace para hacer esto (no probado).

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

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

El 50% y el margen izquierdo es una gran manera de centrar las cosas en sus escenarios ya que funciona automatcially incluso si se cambia el tamaño de la ventana. Obviamente, si los divs cambian de tamaño, debe volver a calcular el margen izquierdo, esto siempre podría estar vinculado a un valor en el modelo de vista. Espero que esto ayude.