0

たとえば、そのようなテンプレートがあり、現在の $index に基づいていくつかの値を動的に計算したい 

    <div class="cond" title="Click to flip">
        <div class="condFlip" data-bind="attr: {id: Id }, click: viewModel.setClick">               
            <div class="piece-all piece" data-bind="attr: {style: background-position: viewModel.getValue($index)  viewModel.getValue($index) }"></div>
        </div>
    </div>      
</script>

<script type="text/javascript">
    viewModel = {
        flips: ko.observableArray([]),      

        setClick: function (data, e) {
            e.preventDefault();
            //doing things
        },

        getValue: function (data, e) {
            return //get my value
        }        
    };    

ko.applyBindings(viewModel);

では、モデル バインディングで関数 viewModel.getValue を使用するにはどうすればよいですか? これを行う方法はありますか？

4

1 に答える 1

2

実行している方法で文字列を返す関数を呼び出すことはできますが、形式が少し異なります。いくつかのヒントを次に示します。

  • スタイル属性全体を置き換えるのではなく、個々のスタイリングを追加/削除するため、styleバインディングではなくバインディングを使用できます(おそらくあなたのケースでは重要ではありません)。attr

  • は、バインディングbackground-positionを指定するために作成しているオブジェクト リテラルの無効なプロパティ名です。"background-position"引用符で囲むか、JavaScript で使用できる名前を使用する必要がありますbackgroundPosition

  • getValue関数が次のように完全な文字列を返すか15px 30px、次のようにバインディングで構築する必要があります。 getValue($index) + ' ' + getValue($index)

  • $indexはオブザーバブルであるため、関数で処理する場合は、関数として呼び出して値を取得する必要があります。

したがって、バインディングは次のようになります。

<i class="icon-blah" data-bind="style: { backgroundPosition: viewModel.getValue($index) + ' ' + viewModel.getValue($index) }"></i>

サンプルはこちら: http://jsfiddle.net/rniemeyer/BAVZa/

于 2012-08-28T01:28:08.283 に答える