在knockoutjs中的雙向綁定

我剛纔開始使用knockoutjs。在下面的代碼中，我試圖以雙向方式綁定DIV的寬度。在knockoutjs中的雙向綁定

var ViewModel = function() { 
    this.width = ko.observable(7); 
}; 

ko.bindingHandlers.widthBinding = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var div = $(element); 
     var value = valueAccessor(); 
     var Width = ko.utils.unwrapObservable(value); 
     div[0].style['width'] = Width + "px"; 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var value = valueAccessor(); 
     var Width = ko.utils.unwrapObservable(value); 
     div[0].style['width'] = Width + "px"; 
    } 
}; 
$("#contentDiv").enableResize(); 
ko.applyBindings(new ViewModel()); 

<input data-bind="value: width" /> 
<div id="contentDiv" data-bind="widthBinding : width" >

在上面的代碼中，我有兩個UI元素，一個是文字輸入，另一種是DIV.And我們能夠在運行時調整其大小DIV。如果我在文本輸入中輸入一些數字，將適用於DIV的寬度，這是工作正常。同時，如果我在運行時調整DIV的大小，則意味着它的寬度應該反映到文本輸入中。有沒有辦法做到這一點？

來源

2012-01-26 Amar

有你見過嗎？似乎相關：http://stackoverflow.com/questions/5610689/knockout-js-how-to-bind-a-div-width-height-to-form-fields –

您可以使用樣式的綁定來改變寬度：

<input data-bind="value:width ,style : { width : width()+'px' }" />

http://jsfiddle.net/gurkavcu/GHgX7/

來源

2012-01-26 12:12:08 Luffy

檢查此示例 http：// jsfiddle。 net/GHgX7/14/ 嘗試調整DIV的大小。在調整大小時，DIV的寬度應該反映到文本框中。 – Amar

選中此項：http://jsfiddle.net/gurkavcu/Hqv8r/。我做了一個簡單的可調整的綁定。在綁定調整大小事件我更新寬度值。 – Luffy

這工作正常。謝謝：） – Amar

在knockoutjs中的雙向綁定

回答

相關問題