10

ノックアウトを使用してDOM要素をviewModelにバインドしました。基になるモデルのプロパティを変更すると、DOMが変更されます-すべてOKです。

ただし、バインドされたDOM要素にアクセスして、基になるモデルが外部で更新されたときにクラスを追加できるようにする方法はありますか？

DOM要素にアクセスできるカスタムバインディングを使用しましたが、viewModelのバインドされたプロパティから直接簡単な方法があるかどうか疑問に思いました。

ありがとう

サンプルコード（TypeScript）

SetMyCell(row: number, newValue: any) {

    var ditem = this._DataItems[row];

    // update the actual value    
    ditem.Producer(newValue);

    // Now I wish to decorate the DOM item this Producer property is 
    // bound to with a class. How to go about that?

}
4

1 に答える 1

12

たとえば、$element と $data を渡す関数を実行するために、目に見えるバインディングを悪用することができます。

<span data-bind="visible: func1($element, $data)">Test span</span>

このフィドルを見てください

カスタムバインディングを使用したくないという上記のことは知っていますが、それでもこのオプションを指摘したいと思います。カスタムバインディングを使用していますが、要素を変更するためのロジックは、外部の変更が発生したときに引き続きビューモデルで発生します。

ko.bindingHandlers.widget = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var elemObservable = valueAccessor();
        if (ko.isObservable(elemObservable)) {
            elemObservable(element);
        }
    }
};

var vm = function () {
    var self = this;
    .....
    self.spanElement = ko.observable();
    self.btnClick = function (){
        var elem = self.spanElement();
        $(elem).html("This is the span element");
    };
    ......
};

そして、htmlは次のようになります

<button data-bind="click: btnClick">change element text or something else</button>
<span data-bind="widget: spanElement"></span>

フィドルを更新したので、実際の動作を確認できます

于 2013-03-11T12:06:44.003 に答える