Knockoutjs Пользовательский стиль привязки ребенка

Question

У меня есть пользовательская привязка.

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

в моей функции инициализации я делаю это. Я добавляю поле ввода, которое мне нужно стилизовать.

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

Я знаю, что это не сработает, но, пожалуйста, может кто-нибудь помочь мне сделать это правильно.

Answer 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/

Answer 2

Ну, я не очень понимаю, что вы хотите сделать. Но некоторые комментарии:

$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 +"'/>")