Question

我有一个使用Razor和Knockout.js的ASP.NET MVC 3视图，它的行为不符合我的预期。我有一对<a>标签基本上是“同意”/“不同意”的链接和一个用于评论的文本区域。如果用户点击“不同意”，我们会向textarea添加一个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这样的读/写绑定，重要的是你绑定实际的observable而不是它的值。在您的情况下，绑定接收可观察的注释的值，并且将无法读取/写入实际的observable。

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

1 个答案: