2

我有一个可观察到的绑定到隐藏 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>

和视图模型

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？

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 回答