Knockoutjs 自定义绑定样式子答案

【问题标题】：Knockoutjs Custom Binding style childKnockoutjs 自定义绑定样式子
【发布时间】：2012-12-02 08:08:15
【问题描述】：

我有一个自定义绑定。

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

在我的初始化函数中，我这样做了。我添加了一个需要设置样式的输入框。

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

我知道这行不通，但请有人帮我做对。

【问题讨论】：

标签： knockout.js ko-custom-binding

【解决方案1】：

嗯，我真的不明白你想做什么。但是有些cmets：

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

【讨论】：

是的，正如我所说，我知道我的代码不起作用。但我想要的是将孔样式绑定转移到我的输入。所以我不必指定任何颜色左右。

【解决方案2】：

这是执行您要求的自定义绑定：

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/

【讨论】：