8

ブラウザウィンドウについて何かをしようとしています：

  1. $(window).width(), $(window).height()Knockoutを使用してウィンドウサイズ（）を観察可能にすることは可能ですか？
  2. FUTURE追加要素をウィンドウの中央に保持するにはどうすればよいですか？jqueryライブメソッドまたはノックアウトカスタムバインディングを使用して何かできることはありますか？

どんな提案もありがたいです！

4

2 に答える 2

11

それらを監視可能にする唯一の方法は、それらを監視可能なプロパティにプロキシすることです。

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

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

私はあなたの2番目の質問を本当に理解していません。これにはcssだけを使用できませんか？

編集

2番目の質問。1つの可能性は、これを行うためのバインディングハンドラーを作成することです（テストされていません）。

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

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

50％とマージン左は、ウィンドウのサイズが変更された場合でも自動的に機能するため、シナリオの中央に配置するのに最適な方法です。明らかに、div自体のサイズを変更する場合は、左マージンを再計算する必要があります。これは、常にビューモデルの値にバインドされる可能性があります。お役に立てれば。

于 2012-06-01T17:09:58.420 に答える
1

彼のカスタムbindingHandlerに関する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>
于 2018-05-30T19:58:15.460 に答える