0

カスタムバインディングがあります。

<div data-bind="autocomplete : { inputStyle : { marginRight : marginR }}"></div>

私のinit関数でこれを行います。スタイリングが必要な入力ボックスを追加します。

$element.append("<input type='text' data-bind='style='" + value.inputStyle + "' />");

私はこれがうまくいかないことを知っていますが、誰かが私がそれを正しく行うのを手伝ってくれませんか。

4

2 に答える 2

1

要求したことを実行するカスタムバインディングは次のとおりです。

function toStyleStr (obj) {
    var result = "";
    $.each(obj, function (k,v) {
        result += k.toString() + ": " + ko.utils.unwrapObservable(v).toString() + ";"; 
    });    
    return result;               
}

ko.bindingHandlers.autocomplete = {
    init: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            $element = $(element);
        $element.append("<input type='text' style='" + toStyleStr(value.inputStyle) + "' />");     
    }            
};

var model = {
    marginR: ko.observable("10px")
};
ko.applyBindings(model);

これが実用的なフィドルです：http：//jsfiddle.net/RYnbR/2/

于 2012-12-14T12:03:37.247 に答える
0

うーん、あなたが何をしたいのかよくわかりません。しかし、いくつかのコメント:

$element.append("<input type='text' data-bind='style='" + value.inputStyle + "' />

動作しません。スタイルバインディングは、スタイルと値を持つオブジェクトを受け取ります:

$element.append("<input type='text' data-bind='style:{color:#ff0000}' />");

あなたができるように

$element.append("<input type='text' data-bind='style:{color:"+value.inputStyle.marginRight +"}'/>");

これは、marginR の色が文字列であると仮定しています。

しかし、なぜそれをデータバインドするのでしょうか? あなたがすることができます：

$element.append("<input type='text' style='color:"+value.inputStyle.marginRight +"'/>")
于 2012-12-14T11:53:23.130 に答える