1

フィドルを更新しました。このフィドルには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内の情報が大きすぎることを示したかったので、それをselectに転送したいと思います。

スタイルバインディングを使用して幅を取得できることも知っていますが、viewModelには必要ないので、bindingHandlerにのみ入れたいと思います。

項目値を使用してforeachとして機能するbindingHandlerを取得するにはどうすればよいですか？

これは今の私のテストです

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
    }
}};
4

1 に答える 1

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/にあります

于 2013-01-13T22:22:11.800 に答える