如何通过淘汰赛设置可见=假答案

【问题标题】：how to set visible = false by knockout如何通过淘汰赛设置可见=假
【发布时间】：2018-06-28 00:19:29
【问题描述】：

我已经发布了更详细的问题，这非常清晰明了 here

你好，我正在尝试使用敲除将列表元素的值设置为 false 这是我的 HTML

   <li>
     <a onclick="log(this)" data-bind="visible: true, text: $data"></a>
            </li>

有没有办法这样说：

               myViewModel.items()[i].setVisible(false);

【问题讨论】：

绑定到一个属性，而不是直接绑定true。

标签： javascript html dom knockout.js

【解决方案1】：

不要将可见绑定设置为 true，将其设置为您在 viewModel 中定义的变量。您还可以通过 foreach 绑定访问可观察数组的各个元素。最后，如果您想使用 $data，您可以使用“.”直接访问单个数组对象的属性。操作员。我在帖子末尾引用的文档有更多信息。见下文：

<div data-bind="foreach: shouldShowMessageArray">
    <div data-bind="visible: $data.shouldShowMessage">
        Message goes here.
    </div>
</div>


<script type="text/javascript">
var myViewModel;
$(document).ready(function(){
    myViewModel = new viewModel();
    function viewModel() {
        this.shouldShowMessage = ko.observable(false) // Message initially visible
        this.shouldShowMessageArray = ko.observableArray([
            {shouldShowMessage: ko.observable(true)},
            {shouldShowMessage: ko.observable(false)}
        ]);
    }
    ko.applyBindings(myViewModel);
});
</script>

Knockout foreach / $data documentation

【讨论】：

如果它不是数组，这将起作用，它是一个数组，那么你将如何隐藏数组的元素？
为了更清楚我正在使用 $data 获取数据，
知道了。更新了我的答案。基本上你可以直接从 $data 访问该属性。
如果我将元素推送到数组中，你会怎么做？我将如何为每个元素属性赋予默认情况下真正可见的可观察对象，非常感谢
如果你有时间看看这个stackoverflow.com/q/48327378/8072569

【解决方案2】：

如果您希望加载起始值为 visible:false 的页面，您可能会遇到“可见”绑定的一些问题。

当我希望某个元素在页面加载时隐藏，然后在用户采取一些操作后使其可见时，我遇到了“可见”绑定问题。如果您使用可见绑定，您将在您的 knockout.js 逻辑加载时看到隐藏元素的闪烁。如果您尝试使用内联 CSS 在元素上设置 display:none，那么即使 KO 逻辑导致可见：true 值，它也将永远变得可见。这是因为 KO 在处理 element.style.display 值的更改后应用了 CSS 规则。

我发现一个解决此问题的方法是设置一个 CSS 类，将 display 设置为 none，然后使用数据绑定基于 observable 有条件地应用该 CSS 规则。

CSS：

.hideMe { display: none; }

HTML：

<div class="hideContent" data-bind="css: { hideContent: !yourObservable() }">
     <p>Content</p>
</div>

【讨论】：