Knockoutjs - 具有绑定和状态答案

【问题标题】：Knockoutjs - With bindings and stateKnockoutjs - 具有绑定和状态
【发布时间】：2020-07-28 19:14:31
【问题描述】：

我在组件绑定和状态方面遇到问题。

这是我的 html 模板：

<div class="ts-panel content">
<!--ko with: states.createState-->
<div data-bind="component: 'customer-create'">Testing CreateState</div>
<!--/ko-->
<!--ko with: states.lookupState-->
<div data-bind="component: 'customer-search'">Testing LookupState</div>
<!--/ko-->
</div>

这是我的javascript

var myDataModel = function () {
    var self = this;
    self.states = {};
    self.states.createState = ko.observable(true);
    self.states.lookupState = ko.observable(false);
    self.states.currentState = ko.observable(self.states.createState);
    self.states.changeState = function (state) {
    var currentState = self.states.currentState();
        currentState(false);
        self.states.currentState(state);
        state(true);
    }
};
return myDataModel;

我正在使用另一个脚本通过将点击事件绑定到某些按钮来控制我所处的状态。

我遇到的问题是，当我更改当前状态时，组件绑定会重置组件的状态。例如。在customer-create组件上，我填写了一个表格，然后改成lookupState，再改回createState，表格的值就没有了。

我认为这是因为组件每次都被清除并重新创建。

我还认为解决此问题的一种方法是将所有内容存储在根级别（即存储状态的组件），并在需要时将所有内容传递给各个组件。但是，我真的很想将特定于组件的信息保留在这些组件中。

有没有办法存储组件的状态，或者将组件存储在变量中并以这种方式绑定到它？

【问题讨论】：

您可以使用 <div data-bind="visible: states.createState"> 包装器，而不是无容器语法 (<!--ko)。这仅基于布尔值隐藏和显示div。您也可以尝试将其添加到 data-bind="component: 'customer-create', visible: states.createState" 本身。
@adiga 我不知道可见绑定。如果您想写一些简短而有趣的内容，我会将其标记为已接受的答案。这正是我想要的，非常感谢！
您能检查一下<div data-bind="component: 'customer-create' , visible: states.createState" 是否有效吗？它应该。这样您就不必添加包装器 div 并弄乱任何 CSS 选择器
是的，这似乎工作得很好

标签： javascript knockout.js

【解决方案1】：

来自documentations：

如果您提供的表达式涉及任何可观察值，则只要这些可观察值发生变化，就会重新评估该表达式。后代元素将被清除，标记的新副本将添加到您的文档中并绑定在新值的上下文中。

if 绑定的行为也相同。您可以为此使用visible 绑定。这只是隐藏和显示div，而实际上并未将其从 DOM 中删除。 visible 没有无容器控制流语法。因此，您必须将其添加到 div

<div data-bind="component:'customer-create', visible: states.createState">Testing CreateState</div>

【讨论】：