当 css 绑定更新时，Textarea 会失去价值

Question

我有一个使用 Razor 和 Knockout.js 的 ASP.NET MVC 3 视图，但其行为不符合我的预期。我有一对 标签，它们基本上是“同意”/“不同意”链接和一个用于评论的文本区域。如果用户点击“不同意”，我们会向文本区域添加一个 CSS 类，以突出显示当用户不同意时需要发表评论的事实。如果来自服务器的评论字段为 null 或 ""（这始终是用户第一次访问该页面），则会出现问题。如果用户输入评论，然后单击“同意”或“不同意”链接，评论就会消失。如果页面首次加载时注释字段有值，则当用户单击链接时注释将保留。如果我删除更新 CSS 的数据绑定，一切都会正常。

这是所涉及代码的稍微简化的版本（我删除了 viewModel 中与页面此部分无关的部分）：

<a href="#" onclick="viewModel.meetsCriteria('true'); return false;">
    Agree
</a>
<a href="#" onclick="viewModel.meetsCriteria('false'); return false;">
    Disagree
</a>

<textarea rows="6" 
    data-bind="value: comments(), css: { 'req': meetsCriteria() == 'false' }" 
    name="response.Comments">
</textarea>

...

var viewModel = {
meetsCriteria: ko.observable(''),
comments: ko.observable('')
};

viewModel.meetsCriteria('@Model.MeetsCriteria.ToString().ToLower()');
viewModel.comments('@Model.Comments');

对于正在发生的情况或如何修复它的任何想法，我们表示赞赏。

Answer 1

您需要从 value: comments() 中删除 ()。

对于像 value 这样的读/写绑定，重要的是您要绑定实际的可观察值而不是它的值。在您的情况下，绑定接收注释可观察值的值，并且无法读取/写入实际可观察​​值。