Question

我对隐藏div中的textarea有一个可观察的绑定，如下所示：

<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不会更新。

当我从div中删除内联css时，它确实有效，即：

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

但是我需要默认隐藏div的内容，因为它仅在用户查看qtip时使用。

为什么这个css阻止了observable更新viewModel的任何想法？

Answer 1

我认为问题在于您将相应div的innerHTML内容作为qtip内容传递，这实际上意味着您复制HTML并丢失所有viewmodel绑定。

问题在于：

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

为此，qtip的内容必须与您绑定视图模型的节点完全相同。

我没有查看qtip接受的内容选项，但您尝试过：

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

[更新] - 我发现this thread作者就此发表了评论。因此，对于版本1的qtip内容，您似乎无法使用相同的元素节点，但是您可以为qtip版本2执行此操作。

在隐藏的div中，observable不会更新

1 个答案: