Bootstrap Modal 重置 Knockout JS 嵌套的 ViewModels 变量

Question

我是 Knockout JS 的新手，在将它与 bootstrap 模态一起使用时遇到了一个问题，尽管经过数小时的研究我仍无法解决。

这是我的问题：我正在使用嵌套视图模型，我注意到如果我在设置模态到可见，这些变量将被重置为它们的初始值。这是一个示例代码，可以提供一个想法：

  ###########Javascript########################
  function ViewModelA() {
      self = this;
      self.B = ko.observable(new ViewModelB(self));

      self.ShowB(){
         self.B.Show();
      };
  };

  function ViewModelB(parent){
      self = this;
      self.varOne = ko.observable();
      var varTwo = null;

      self.Show = function(){
         self.GetData();
         $("#modalB").modal('show');
      };

      self.GetData = function(){
         //Ajax call that sets varOne and varTwo
      };

  };

  var A = new ViewModelA();
  ko.applyBindings(A,document.getElementById('modalA'));

 ##############HTML###############################
 <div id="modalA" class="modal fade" tabindex="-1" role="dialog" aria-   labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Modal header</h3>
             </div>
             <div class="modal-body">
             ...

modalB 的 HTML 代码与在第一个 div 中添加 data-bind="B" 标签非常相似.

想法是，用户单击 ModalA 中的按钮将触发 ModalA 的 Show() 函数，该函数反过来从 AJAX 调用填充 ModalB 的可观察对象并显示 ModalB。

在上面的示例中，如果我从 Show() 函数中调用 GetData()，那么一旦模态加载完成，varOne 和 varTwo 将被重置为它们的初始值。相反，如果我在实例化 ViewModelB 时调用 GetData()（即在用户调用 ModalA 的 Show 函数之前），那么新值将被保留。

过去几天我一直在摸不着头脑，试图理解为什么会发生这种情况以及如何最好地解决它。我研究了自定义绑定处理程序、呈现模板并调用了 bootstrap 模态 "load" 事件。

有人遇到过这种情况吗？提前致谢！

Answer 1

在我提出建议之前，有几点需要提出：

模态B 在模态A里面吗？如果不是，那么它不会被 Knockout 数据绑定，因为您只将数据绑定应用于 #modalA.
应该不会吧
self.B = ko.observable(ViewModelB(self));
实际上是
self.B = ko.observable(new ViewModelB(self));
即、new ViewModelB?
ViewModelB.ShowB 应该就是 ViewModelB.Show 吧？还是调用 self.B.Show 错误？另外，我的 JavaScript 是错误的还是 self.ShowB() 和 self.GetData() 缺少 function 关键字？

现在，在您的示例中，JavaScript ViewModelB.varOne 是可观察的，而 ViewModelB.varTwo 不是可观察的。

当您调用 ViewModelB.Show 时，它首先会调用 ajax 来获取这两个变量的值。一旦进行了此异步调用，您的浏览器就会跳出 ViewModelB.GetData() 并返回到 ViewModelB.Show，然后它将显示 modalB.

当您的 ajax 调用 returns 和您的处理程序函数（您没有显示 - 这是非常相关的）使用响应来设置值时，只有那些 可观察的 变量将在 DOM 中更新。在您的示例 JavaScript 的情况下，这意味着 ViewModelB.varTwo 将永远不会在 DOM.

中更新

我建议您改为确保 ViewModelB.varOne 和 ViewModelB.varTwo 都是可观察的。

另一种方法是将 $("#modalB").modal('show'); 放入回调函数中，仅当 ajax 调用返回时才调用该回调函数，但这会导致显示 modalB 时出现不希望的延迟。

Bootstrap Modal 重置 Knockout JS 嵌套的 ViewModels 变量

Boostrap Modal resetting KnockoutJS nested ViewModels variables

javascript

jquery

twitter-bootstrap

knockout.js

knockout-viewmodel-plugin