0

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

这是我的问题：我正在使用嵌套视图模型，并且我注意到，如果我在将模式设置为可见之前或之后尝试更新嵌套 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 的 observables。

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

在过去的几天里，我一直在摸不着头脑，试图了解为什么会发生这种情况以及如何最好地解决它。我研究了自定义绑定处理程序、渲染模板和调用引导模式“加载”事件。

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

4

1 回答 1

0

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

  • 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？

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

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

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

我建议你做的是确保两者ViewModelB.varOne都是ViewModelB.varTwo可观察的。

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

于 2015-07-28T08:39:00.030 回答