註冊淘汰賽組件之前viewModel

Question

問題我嘗試註冊我的登錄模式淘汰賽組件，但頂部視圖beeing創建之前，我的組件已註冊。

我使用requireJs來組織我的js文件。

本所認爲

<div data-bind='component: componentModal'></div> 

這是我註冊

require(['modals/login']); - 這裏面，有：

require(['jquery', 'knockout', 'text!modals/login.html', 'bootstrap'], function ($, ko, htmlString) { 

    ko.components.register('login-modal', { 
     viewModel: function (params) { 
      console.log(params); 
      this.text = ko.observable(params && params.initialText || ''); 
     }, 
     template: htmlString 
    }); 
}); 

然後在我的主要js文件，我有：

<script data-main="scripts/main" src="~/Scripts/require.js"></script> 
<script> 

    require(['main'], function() { 

     require(['modals/login']); 

     require(['knockout'], function (ko) { 

      var ViewModel = function() { 
       var self = this; 
       self.componentModal = ko.observable('login-modal'); 

       return self; 
      }; 

      ko.applyBindings(new ViewModel()); 


     }); 

    }); 
</script> 

有人可以幫我嗎？

Answer 1

我無法理解這行：

self.componentModal = ko.observable('login-modal'); 

創建觀察到帶有字符串「登錄模態」什麼都不做。它只是字符串登錄模式的可觀察對象。它不會神奇地包含你的模態組件。

你的HTML需要有您的自定義<login-modal></login-modal> html元素，甚至<div data-bind="component: {name: 'login-modal', params: {your: params}"></div>應該工作

你requirejs代碼在你<腳本>標籤是錯誤的。我認爲它應該是：

require(['main', 'modals/login', 'knockout'], function(main, login, ko) { 
// ... your code here 
});