Question

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

这是我的问题：我正在使用嵌套视图模型，我注意到如果我尝试更新嵌套vm中的任何变量（无论是否是可观察的），就在我将模态设置为之前或之后不久可见，这些变量将重置为其初始值。这是一个提供想法的示例代码：

  ###########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时（即在用户调用ModalA的Show函数之前）调用GetData（），则保留新值。

过去几天我一直在试图理解为什么会这样，以及如何最好地解决这个问题。我查看了自定义绑定处理程序，渲染模板并调用bootstrap模态“加载”事件。

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

Answer 1

在我提出建议之前，有一些问题需要提出：

modalB 在 modalA中吗？如果没有，则它不会被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调用返回并且你的处理函数（你没有显示 - 这非常相关）使用响应来设置值时，只有那些 observable 变量将在DOM中更新。对于您的示例JavaScript，这意味着永远不会在DOM中更新ViewModelB.varTwo。

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

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

Boostrap Modal重置KnockoutJS嵌套的ViewModels变量

1 个答案: