knockout.js 检测div中的宽度变化并触发函数Knockout JS

chhqkbe1  于 10个月前  发布在  其他
关注(0)|答案(2)|浏览(73)

如何检测id为X的div的宽度何时改变?我有一个函数'wrapLines',每当这个div容器的宽度改变时,需要调用它。由于以下原因
1.是否调整了窗口大小
1.或任何其他原因,如打开可折叠菜单,导致x div宽度减小
应用使用Knockout JS和OJET(Oracle JET)。因此有为html和各自js定义的视图和视图模型。请帮帮我
我试着使用window.resize像下面提到的,但它不工作-

$("#" + x).on('resize', function(event) {
    //call wrapLines function         
});

字符串
下面的代码可以工作,但仅适用于情况1。我需要第二个案子通过。

$(window).on('resize', function(event) {
   //call wrapLines function               
});

mum43rcc

mum43rcc1#

使用ResizeObserver API。

const elem = document.getElementById("element");
let prevWidth;
new ResizeObserver(([change]) => {
  if ((prevWidth = change.contentRect.width) == prevWidth) {
    console.log(prevWidth);
  }
}).observe(elem);
#element {
   resize: horizontal;
   overflow: hidden;
   border: 1px solid black;
}
<div id="element">I can be resized!</div>
v7pvogib

v7pvogib2#

我已经使用ResizeObserver创建了一个KnockoutJS绑定处理程序来处理更改事件,并使用新的宽度更新一个observable。请看jsfiddle示例:https://jsfiddle.net/martlark/L03wtzqb/36/
超文本标记语言:

<textarea id="element" data-bind="resizeWidth: width, value: value"></textarea>
<h4>
Width
</h4>
<span data-bind="text: width"></span>

字符串
绑定处理程序:

ko.bindingHandlers.resizeWidth = {
  update: function(element, valueAccessor, allBindings) {
    const value = valueAccessor();

    new ResizeObserver(([change]) => {
        value(change.contentRect.width);
    }).observe(element);
  }
};


视图控制器:

class ViewModel {
  constructor() {
    this.value = ko.observable('something');
    this.width = ko.observable(0);
    this.width.subscribe(newValue=>{console.log('resize', newValue)})
  }
}

viewModel = new ViewModel()
ko.applyBindings(viewModel);

相关问题