如何在viewModel中将变量变为可覆盖的变量？ （昏死）

Question

如屏幕截图所示，我的页面中有一个名为applications的viewModel，它有一个名为“isShortlisted”的变量，用于指示应用程序是否列入候选名称。声明如下：

self.applications = ko.observableArray(@Html.Json(Model.ApplicationCompatibilities.Select(o => o.JsonForm)) || []);

我需要将isShortlisted设置为observable，因为我希望我的按钮具有此条件

<form id="shortlistForm" data-bind="style: { display: application.isShortlisted === false ? 'inline-block' : 'none'}>

<form id="unshortlistForm" data-bind="style: { display: application.isShortlisted === true ? 'inline-block' : 'none'}>

(the form above shows up when "isShortlisted" is false and the one below shows when it's true(when clicked) )

在“isShortlisted”值更改时立即显示更改（并且只有observable立即更新更改）

我试图做的是：

self.isShortlistedObservable = ko.observable(self.applications.application.isShortlisted);

并给我一个错误

Cannot read property 'isShortlisted' of undefined

总而言之，我可以将该变量设为observable，以便在更改值时更新状态？ Plz告诉我正确的语法

Answer 1

如果没有所有相关的代码块，很难给出正确的答案，但这里有一些可能对您有帮助的提示。

您的特定错误告诉您self.applications.application未定义。这是有道理的，因为self.applications是一个可观察的数组，所以你应该做的是：self.applications()[0].application.isShortlisted。

对于isShortlisted observable，您可以直接在self上声明新的observable，尽管我建议您使用observable来装饰您的应用程序VM。像这样：

var vm = self.applications()[0].application;
vm.isShortlistedObservable = ko.observable(vm.isShortlisted);

关于HTML绑定，我建议您使用visible绑定，因为它可以用更少的代码完成您想要的操作。请注意，我假设模板中的KO上下文为vm，如上所示，所以它应如下所示：

<form id="shortlistForm" data-bind="visible: !isShortlisted()">
<form id="unshortlistForm" data-bind="visible: isShortlisted">

请记住，只要您更新可观察值而不仅仅是本机JS属性，这将会起作用。