Knockout自定義綁定到對象

Question

我目前正在設計一個瀏覽器內計算器，我想要的功能是創建一個輸入框，並將其綁定到視圖模型中的對象。

此對象將具有一個名為value的屬性，該屬性將是輸入框顯示的屬性，但我還希望它具有最小和最大限制，如果超過這些限制，則會將框的背景顏色更改為紅色。

我得到了基本的輸入綁定工作，但我無法為輸入綁定創建自己的自定義綁定包裝，也會改變背景顏色。

我的HTML：

<td><input data-bind="calcVar: resistance" type="text" size="16" /></td>

我的Javascript：

保存所有數據的“類”

var calcVar = function(value, lowerBound, upperBound) {
        this.value = ko.observable(value);
        this.lowerBound = ko.observable(lowerBound);
        this.upperBound = ko.observable(upperBound);
};

在視圖模型中創建變量：

this.fSwAct = ko.observable(new calcVar(200, 100, 100, 0, 1000));

啟動功能

// Start-up function
j(document).ready(
    function StartUp()
    {           
        // Create custom binding
        ko.bindingHandlers.calcVar = {
             init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
                  ko.bindingHandlers.value.init(element, valueAccessor()().value, allBindings, viewModel, bindingContext);
             },
             update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
                  // Call value binding (child binding)
                  ko.bindingHandlers.value.update(element, valueAccessor()().value, allBindings, viewModel, bindingContext);
             }
        };
        // Activates knockout.js
        var app = new AppViewModel();
        ko.applyBindings(app);  
    }
);

雖然正在調用自定義綁定函數，但輸入綁定似乎不起作用，並且在更改值時其他計算字段不會更新。 我覺得這與我創建calcVar“類”或將其傳遞給輸入綁定的方式有關。

Answer 1

你實際上並不需要自定義綁定來使背景變紅，你可以只使用樣式內置綁定。 但是，進行自定義綁定會產生更清晰的標記。 這里有兩個示例實現，一個是自定義綁定，一個沒有（小提琴： http ： //jsfiddle.net/EWdmV/5/ ）：

HTML：

<span>--------- no custom binding ---------</span><br />
<td><input data-bind="value:value, valueUpdate:'afterkeydown', style:{ 'background-color' : isOutsideBounds() ? 'red':'white'}" type="text" size="16" /></td>


<span>--------- with custom binding ---------</span><br />
<td><input data-bind="value:value, valueUpdate:'afterkeydown', calcVar: isOutsideBounds" type="text" size="16" /></td>

JS：

var CalcVar = function(value, lowerBound, upperBound) {
        var self = this;
        self.value = ko.observable(value);
        self.lowerBound = ko.observable(lowerBound);
        self.upperBound = ko.observable(upperBound);
        self.isOutsideBounds = ko.computed(function(){
            var val = parseFloat(self.value(),10);
            console.log(val);
            console.log(val > self.upperBound() || val < self.lowerBound());
        return val > self.upperBound() || val < self.lowerBound();
    }, self);

};

ko.bindingHandlers.calcVar = {
    init:function(element, valueAccessor){        
    },
    update:function(element, valueAccessor){        
        if(valueAccessor()()){
            $(element).css("backgroundColor", "red");
        } else {
            $(element).css("backgroundColor", "white");
        }
    }
}

ko.applyBindings(new CalcVar(100, 10,1000));

編輯：如果你真的想要更短的標記，這里有另外兩個選擇，使用模板，並使用調用renderTemplate的自定義綁定（可能這是你需要的）（更新的小提琴： http ： //jsfiddle.net/EWdmV/14 / ）：

HTML：

<span>--------- with custom binding tempalate ---------</span><br />
<div data-bind="template:{name:'superCalcTemplate', data:resistor1}" ></div>
<br />
<span>--------- with super custom binding ---------</span><br />
<div data-bind="superCalcVar:resistor1"></div>
<div data-bind="superCalcVar:resistor2"></div>

<script type="text/html" id="superCalcTemplate">
    <input data-bind="value:value, valueUpdate:'afterkeydown', calcVar: isOutsideBounds" type="text" size="16" />    
</script>

JS：

ko.bindingHandlers.calcVar = {
    init:function(element, valueAccessor, allBindings, viewModel, bindingContext){        
    },
    update:function(element, valueAccessor, allBindings, viewModel, bindingContext){        
        if(valueAccessor()()){
            $(element).css("backgroundColor", "red");
        } else {
            $(element).css("backgroundColor", "white");
        }
    }
}

ko.bindingHandlers.superCalcVar = {
    init:function(element, valueAccessor, allBindings, viewModel, bindingContext){   

        ko.renderTemplate("superCalcTemplate", valueAccessor(), {}, element, "replaceChildren");
         return { controlsDescendantBindings: true };              

    },
    update:function(element, valueAccessor, allBindings, viewModel, bindingContext){                               
    }
}