使用knockoutjs将属性从html元素绑定到另一个html元素

时间:2013-07-02 09:53:16

标签: knockout.js

当我想将控件的属性绑定到另一个控件属性时,我称之为WPF元素绑定。

使用knockoutjs我需要绑定什么?

我如何将元素用于元素绑定?

我希望时间和总数中的两个div具有相同的宽度。

总宽度已经是一个可观察的可能我只需要参考总宽度但我想这会发生在“元素绑定”中?

或者只有敲门才能将html元素绑定到上下文中viewmodel的任何属性?因为那意味着我的viewmodel必须有2个属性time和s,并且在视图中枚举/绑定它们时我只引用了这个viewmodel的公共width属性。

<div id="times">
    <div>
        <div style="width:OfTotalDiv"></div>        
    </div>
    <div id="title"></div>
</div>
<div id="total">
    <div>
        <div style="width:100px"></div>     
    </div>
    <div id="title"></div>
</div>

1 个答案:

答案 0 :(得分:0)

您确定需要数据绑定吗?你可以用css类来做这件事。

<style type="text/css">
    .small-boxes .this-box { width: 100px; }
    .large-boxes .this-box { width: 200px; }
</style>

<body class="small-boxes">
    <div id="times">
        <div>
            <div class="this-box"></div>
        </div>
    </div>
    <div id="total">
        <div>
            <div class="this-box"></div>
        </div>
    </div>
</body>
$('body').toggleClass('small-boxes large-boxes');

如果你真的需要绑定,你可以这样做:

<div id="times">
    <div>
        <div data-bind="style: { width: widthOfTotal }"></div>
    </div>
</div>
<div id="total">
    <div>
        <div data-bind="style: { width: widthOfTotal }"></div>
    </div>
</div>

在视图模型中:

self.widthOfTotal = ko.observable('100px');