Question

我更新了小提琴。在这fiddle我有3个div。在中间div中有循环的文本。当div很小的时候，我想取出这个项目并把它放在另一个observableArray中，它被绑定到这样的选择类型。

<div data-bind="collection:{items:itemsThatFit,itemsDontFit:itemsDontFit">
   <span data-bind="text:$data"></span>
</div>


<select data-bind="visible:itemsDontFit.length>0, options: itemsDontFit"></select>

当你添加许多不适合的小提琴时，我希望它被移动到itemsDontFit数组。我无法从正确的角度解决这个问题，需要一些帮助。

我知道小提琴并不接近任何解决方案。我只想表明div中的信息是大的，我想将它转换为选择。

我也知道我可以使用样式绑定来获取宽度，但我不需要在我的viewModel上，所以我只想在我的bindingHandler中使用它。

如何让bindingHandler充当带有值的foreach？

这是我现在的测试

ko.bindingHandlers.collection = {
init: function (element, valueAccessor) {
    var value = valueAccessor();
    ko.utils.unwrapObservable(value);
    var $elm = $(element);
    //here I want a foreach on the itemsThatFit
    //maybe add the select in code here?
},
update: function (element, valueAccessor) {
    var value = valueAccessor();
    ko.utils.unwrapObservable(value);
    var $elm = $(element);
    //the div width
    var containerWidth = $elm.width();
    //the children width
    var childSum = 0;
    $elm.children().each(function() {
        childSum + $(this).width());
    });

    if(childSum>containerWidth){
       //move last item to itemsDontFit
    }
}};

Answer 1

你很亲密。

html是

<div data-bind="foreach: developers"> 
  <span data-bind="textWidth:$data, sourceArray:$root.developers,
                   overflowArray:$root.overflow"></span> 
</div>

请注意，我在<span>级别添加了额外的绑定，而不是<div>。这是因为它必须检查每个<span>绑定。

关键JavaScript是

ko.bindingHandlers['textWidth'] = {
  'update': function (element, valueAccessor, allBindingsAccessor) {
    var allBindings = allBindingsAccessor();
    // use ko text binding to do actual output.
    ko.bindingHandlers['text'].update(element, valueAccessor);
    var value = valueAccessor();
    ko.utils.unwrapObservable(value);
    var $parentEement = $(element).parent();

    var childSum = 0;
    $parentEement.children().each(function () {
      childSum += $(this).width();
    });

    if (childSum > $($parentEement[0]).width()) {
      var source = allBindings.sourceArray;
      var overflow = allBindings.overflowArray;
      source.remove(value);
      overflow.push(value);
      $(element).text('');
    }
  }
};

更新后的小提琴位于http://jsfiddle.net/DbJBs/17/

获得宽度的绑定处理程序

1 个答案: