2017-05-31 14 views
0

Iは各行のforeachデータ$parentを使用して、外部からのデータをバインドしようとしているが、それは以下のコードのエラーUnable to parse bindingsをスロー:(KnockoutJS)

HTML:

<table> 
    <thead> 
     <tr> 
      <th class="col_name">Name</th> 
      <th class="col_dob">DOB</th> 
      <th class="col_address">Address</th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: rows"> 
     <tr data-bind="attr: { id: resource.id}, style: { background-color: $parent.isSel}, event:{click: $parent.selectRow} "> 
      <td class="col_name" data-bind="text: resource.name"></td> 
      <td class="col_dob" data-bind="text: resource.birthDate"></td> 
      <td class="col_address" data-bind="text: resource.address"></td> 
     </tr> 
    </tbody> 
</table> 

style: { background-color: $parent.isSel}, event:{click: $parent.selectRow}を削除すると問題なく動作します。その上

this.isSel = ko.observable("#fff"); 

this.selectRow = function() { 
    var self = this; 
    self.isSel("#ccc"); 
    console.log("Row selected"); 
} 

任意のヒント:両方のための

KnockoutJSの一部は、上記のこれまでのように見えますか?

答えて

3

$parentの使用には問題ありませんが、プロパティ名はbackground-colorです。

ダッシュは、JSオブジェクトのプロパティ名では無効なです。だから、引用符でbackground-colorをラップする必要があります。

<tr data-bind="attr: { id: resource.id}, 
       style: { 'background-color': $parent.isSel}, 
       event:{click: $parent.selectRow} "> 

documentationでも参照してください。

+0

ほとんどありません - なぜ私は 'TypeError:self.isSelは関数ではありません.'というエラーがクリックイベントで発生しています。その関数にも '$ parent'を向けるべきですか? – JackTheKnife

+1

'$ parent'を使用しているとき、' this'はあなたの実際の親を指していないので、 'bind:' event:{parent:$ parent.selectRow.bind($ parent)} 'あなたのメインのviewModel関数オブジェクトに対する 'selectRow'の外側の' var self = this; ' – nemesv