2

私は次のように隠されたdiv内のテキストエリアへの観察可能なバインディングを持っています：

<span title="sales comment" data-bind="attr: { id: 'sales-'+year() }" style="cursor :pointer;">
 <img src="information.png" alt="Add comment" />                                                  
</span>
<div data-bind="attr: { id: 'sales-'+year()+'_content'  }" style="display : none;">
 <textarea data-bind="value: salesComment, valueUpdate: 'keydown'"> </textarea>
</div>

およびviewModel

var FinancialYearViewModel = function(data, parent) {
    var self = this;
    self.year = ko.observable();
    self.salesComment = ko.observable();
};  

ko.applyBindings(new FinancialHistoryViewModel(data));

var data = {"year": "2012", "salesComment": "sales comment"}

非表示のdivは、次のようなqtipツールチップのコンテンツを入力するために使用されます。

$(document).ready(function()
{
$("span[title]").each(function(i) {         
    content = $("#" + this.id + "_content").html();
    $(this).qtip({  content: {
          text: content
         },                     
             show: {
              event: 'click'
             },
             hide: { event : 'unfocus'}                         
    });                      
  });
});

viewModelはokをバインドし、qtipは必要に応じて非表示のdivをコンテンツとして表示します。ただし、textarea値が変更されても、viewModelは更新されません。

インラインcssをdivから削除すると、機能します。つまり、次のようになります。

<div data-bind="attr: { id: 'sales-'+year()+'_content'  }">
 <textarea data-bind="value: salesComment, valueUpdate: 'keydown'"> </textarea>
</div>

ただし、ユーザーがqtipを表示した場合にのみ使用されるため、デフォルトでdivの内容を非表示にする必要があります。

このcssがobservableがviewModelを更新するのを妨げている理由はありますか？

4

1 に答える 1

1

問題は、対応するdivのinnerHTMLコンテンツをqtipコンテンツとして渡していることだと思います。これは、事実上、HTMLを複製し、すべてのビューモデルバインディングを失っていることを意味します。

問題の行は次のとおりです。

content = $("#" + this.id + "_content").html();

これが機能するためには、qtipのコンテンツが、ビューモデルをバインドしたノードとまったく同じ要素ノードである必要があります。

qtipが受け入れるコンテンツオプションについては調べていませんが、試してみましたか。

content = $("#" + this.id + "_content")[0];

[更新]-著者がこれについてコメントしているこのスレッドを見つけました。したがって、バージョン1のqtipのコンテンツに同じ要素ノードを使用することはできないようですが、qtipバージョン2ではこれを行うことができます。

于 2013-01-14T16:45:37.440 に答える