0
我想這個淘汰賽代碼轉換爲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的更改嗎?
非常感謝你。你的工作很棒,真的很感激。 – grayson
我喜歡你的顏色選擇器樣本。我可能會將jsViews版本作爲jsviews.com上的自定義標籤控件樣本(包括一些附加功能和改進)包含在Jsviews.com中,這對您很合適。順便說一句,你可能會標記上面的答案'接受'? – BorisMoore