JSViews双向时,顶层变量变化
问题描述:
我想这个淘汰赛代码转换为JSViews绑定更新内部阵列数组,因此不会添加'js-active'类。我知道原因是因为我没有注意到这种变化,但我似乎不知道如何连接两者。JSViews双向时,顶层变量变化
我在一所采取的两个独立ko.observbles并加入了他们:
var colorPickerData = {
selectedColor: "Red",
materialColors: [
{
color: "Red",
variations: [
{
weight: 50,
hex: "#FFEBEE"
....
这里是模板:
<script id="color-picker-template" type="text/x-jsrender">
<div class="material-color-picker">
<div class="material-color-picker__left-panel">
<ol class="color-selector">
{^{for materialColors ~paletteColor=selectedColor }}
<li>
<input name="material-color" type="radio" data-link="id{:'materialColor' + #getIndex() } checked{:~paletteColor} value{:color}">
<label data-link="for{:'materialColor' + #getIndex()} title{:color} css-color{:variations[4].hex }"></label>
</li>
{{/for}}
</ol>
</div>
<div class="material-color-picker__right-panel">
{^{for materialColors ~paletteColor=selectedColor}}
<div data-link="class{:(color == ~paletteColor)? 'js-active color-palette-wrapper': 'color-palette-wrapper' }">
<h5 class="color-palette-header" data-link="text{:color}"></h5>
<ol class="color-palette">
{^{for variations}}
<li id="clipboardItem" class="color-palette__item" data-link="data-clipboard-text{:hex } css-background-color{:hex }">
<span data-link="text{:weight}"></span>
<span data-link="text{:hex}"></span>
</li>
{{/for}}
</ol>
</div>
{{/for}}
</div>
</div>
这里的链接代码:
$.templates("#color-picker-template").link("#color-wrapper", colorPickerData, true);
任何人都可以告诉我如何观察对selectedColor的更改吗?
答
我分叉你的CodePen here并完成了一个端口给JsViews。
我简化了一些数据链接标记以减少不必要的数据绑定的性能成本。
为了您的左右双向绑定单选按钮的问题:
你可以做
{^{radiogroup selectedColor}}
{{for materialColors}}
<li>
<input name="material-color" id="materialColor{{:#index}}" value="{{:color}}" type="radio" />
<label ...></label>
</li>
{{/for}}
{{/radiogroup}}
或
{{for materialColors ~paletteColor=selectedColor}}
<li>
<input name="material-color" id="materialColor{{:#index}}" value="{{:color}}" type="radio" data-link="~paletteColor"/>
<label ...></label>
</li>
{{/for}}
或 - 如果你把你的全数据链接的方法:
<input name="material-color" type="radio" data-link="id{:'materialColor' + #getIndex() } value{:color} {:~paletteColor:}">
非常感谢你。你的工作很棒,真的很感激。 – grayson
我喜欢你的颜色选择器样本。我可能会将jsViews版本作为jsviews.com上的自定义标签控件样本(包括一些附加功能和改进)包含在Jsviews.com中,这对您很合适。顺便说一句,你可能会标记上面的答案'接受'? – BorisMoore