JSViews 2ウェイバインディングアップデート内側の配列のトップレベルの変数は、私がJSViewsに、このノックアウトコードを変換しようとしています

Question

を変更：hereは

私はそれが最初の反復のために働くことができますが、色が更新されませんをクリックしたがって、 'js-active'クラスは追加されません。理由はわかっています。なぜなら、私はその変化を観察していないからです。しかし、私はこれらの2つをどのように接続するのか分からないようです。

私は2つの別々の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の変更をどのように観察できますか？

Answer 1

私はCodePen hereをフォークし、JsViewsへの移植を完了しました。

不要なデータバインディングのコストを削減するために、データリンクマークアップの一部を簡略化しました。 2ウェイラジオボタンへの結合に関するご質問については

：

は

あなたが行うことができます

{^{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:}"> 

{{radiogroup}}およびData-linked radio buttonsを参照してください。