淘汰赛中的两种方式绑定答案

【问题标题】：Two way binding in knockoutjs淘汰赛中的两种方式绑定
【发布时间】：2015-01-20 08:30:29
【问题描述】：

我现在才开始使用 knockoutjs。在下面的代码中，我只是试图以两种方式绑定 DIV 的宽度。

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。我们可以在运行时调整 DIV 的大小。如果我在文本输入中输入一些数字，这将适用于 DIV 的宽度，那就可以正常工作。同时，如果我在运行时调整 DIV 的大小意味着它的宽度应该反映到文本输入中。有什么办法吗？

【问题讨论】：

你看到了吗？似乎相关：stackoverflow.com/questions/5610689/…

标签： knockout.js

【解决方案1】：

你可以使用样式绑定来改变宽度：

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

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

【讨论】：

检查此示例 jsfiddle.net/GHgX7/14 尝试调整该 DIV 的大小。调整大小时，DIV 的宽度应反映在文本框中。
检查这个：jsfiddle.net/gurkavcu/Hqv8r。我做了一个简单的可调整大小的绑定。在绑定调整大小事件中，我更新宽度值。