使用Knockout同步外部模板加載和數據綁定並且需要

Question

我想發送對視圖和數據的請求，然後當視圖和數據請求響應時，它們需要綁定。我爲此使用setInterval。但我不知道這是否正確。

有時我需要更新大部分ViewModel數據。我無法弄清楚如何更新這些海量數據。

使用此代碼，我同時獲得視圖和數據。但我無法在viewModel中使用數據。因爲如果我嘗試在綁定後更新數據，我不知道該怎麼做。

有什麼建議嗎？

在app.js

crossroads.addRoute('/cart', function() { 
    require(['cart'], function() { 
     cart.init(); 
    }); 
}); 

在cart.js

define(['jquery', 'knockout'], function($, ko) { 
    var cart = { 
     viewLoaded: false, 
     dataLoaded: false, 
     template: '', 
     cartData: {}, 

     container: '#container', 

     // Gets external template 
     getView: function() { 
      $.ajax({ 
       ... 
       success: function (response) { 
        cart.viewLoaded = true; 
        $(cart.container).html(response); 
       } 
      }); 
     }, 

     // Gets data 
     getCart: function() { 
      $.ajax({ 
       ... 
       success: function (response) { 
        cart.dataLoaded = true; 
        cart.cartData = response; 
       } 
      }); 
     }, 

     ViewModel: function() { 
      var self = this; 

      self.cartId = ko.observable(); 
      self.products = ko.observableArray([]); 
      . 
      . 
      . 
     }, 

     // Checks both template and data are loaded 
     bindings: function() { 

      var loadControl = setInterval(function() { 
       if (cart.viewLoaded && cart.dataLoaded) { 
        ko.applyBindings(new cart.ViewModel(), $(cart.container)[0]); 
        clearInterval(loadControl); 
       } 
      }, 100); 
     }, 

     init: function() { 
      this.getView(); 
      this.getCart(); 
      this.bindings(); 
     } 
    }; 

    return cart; 
}); 

Answer 1

我使用的回調函數，而不是時間間隔。而當用戶改變URL我刪除DOM元素和綁定是這樣的：在app.js

var stepCart = crossroads.addRoute('/cart', function() { 
    require(['cart'], function() { 
     cart.init(); 
    }); 
}); 

stepCart.switched.add(function() { 
    cart.stopEvents(); 
}); 

在cart.js

define(['jquery', 'knockout'], function($, ko) { 
    var cart = { 
      . 
      . 
      . 

     // Gets external template 
     getView: function (callback) { 
      $.ajax({ 
       ... 
       success: function (response) { 
        cart.viewLoaded = true; 
        $(cart.container).html(response); 

        if (typeof callback === 'function') { 
         callback(); 
        } 
       } 
      }); 
     }, 

     // Gets data 
     getCart: function (callback) { 
      $.ajax({ 
       ... 
       success: function (response) { 
        cart.dataLoaded = true; 
        cart.cartData = response; 

        if (typeof callback === 'function') { 
         callback(); 
        } 
       } 
      }); 
     }, 

      . 
      . 
      . 

     // Removes DOM elements and bindings 
     stopEvents: function() { 
      ko.cleanNode($(cart.container).get(0)); 
      $(cart.container).empty(); 
      this.viewLoaded = false; 
      this.dataLoaded = false; 
     }, 

     // Checks both template and data are loaded 
     bindings: function() { 

      if (cart.viewLoaded && cart.dataLoaded) { 
       ko.applyBindings(new cart.ViewModel(cart.cartData), $(cart.container)[0]); 
      } 
     }, 

     init: function() { 
      this.getCart(cart.bindings); 
      this.getView(cart.bindings); 
     } 
    }; 

    return cart; 
});