12

knockout.jsのドキュメントには、次のようなcssバインディングが示されています。

<div data-bind="css: { profitWarning: currentProfit() < 0 }">   
    Profit Information
</div>

マウスクリックでcssクラスを変更するためにそれを適応させる必要があります。これどうやってするの？

以下の回答に基づいて、私は次のようなコードを使用しています。

// CSS class to be applied
<style>
    .bigclass
    {
        width: 200px;
    }

</style>

// Select list inside a jquery .tmpl
<script id='criteriaRowTemplate' type='text/html'>
    <tr>
        <td>
            <select data-bind='click: makeBig, css: {bigclass : SelectHasFocus() > 0}' />
        </td>
    </tr>
</script> 

// Knockout.js Viewmodel
var CriteriaLine = function() {
    this.SearchCriterion = ko.observable();
    this.SelectHasFocus = ko.observable(0);

    // this method is called
    makeBig = function(element) { 
        this.SelectHasFocus(1);            
    };        
};

ただし、これは選択リストの幅を拡大するものではありません。私は何が間違っているのですか？

4

3 に答える 3

17

クリック関数で監視可能な変数を変更します。例: _

<div data-bind="css: { myclass: newClass() == true }">
   Profit Information
</div>

<button data-bind="click: changeClass">Change Class</button>

<script type="text/javascript">
    var viewModel = {
        newClass: ko.observable(false),
        changeClass: function() {
            viewModel.newClass(true);
        }
    }; 
</script>

注:同じ要素でclickとを組み合わせることができます。css例えば：

<div databind="click: changeClass, css: { myclass: newClass() == true }"></div>
于 2012-06-27T21:35:59.563 に答える
1

最も簡単な方法は、コールバックでオブザーバブルを変更するクリック バインディングを使用することです。attrバインディングのようなものを使用して、クラスを適切にバインドします

于 2012-06-27T21:24:05.490 に答える
1

問題は script タグにあると思います。

次のリンクで解決策を見つけてください: http://jsfiddle.net/ZmU6g/3/

于 2012-10-16T16:08:10.613 に答える