爲Knockout組件加載外部ViewModel和模板

我正在嘗試將模板加載到使用require.js的挖空組件的viewmodel，但迄今爲止不成功。爲Knockout組件加載外部ViewModel和模板

的index.html（視圖）

<!doctype html> 
<head> 
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" /> 
    <script data-main="assets/js/app" src="assets/js/vendor/require.js"></script> 
</head> 
<body> 
    <table_n></table_n> 
</body>

menu.html（模板）

menu.js（視圖模型）

define(['knockout', 'knockoutMapping'], function (ko, komap) { 
    debugger; 
    var self = this; 
    debugger; 
    self.filter = ko.observable(''); 
    self.ListaUsuarios = ko.observableArray(); 

    $.ajax({ 
     type: "GET", 
     url: "http://192.168.15.3/api/menus", 
     contentType: "application/javascript", 
     dataType: "json", 
     success: function (result) { 
      var a = JSON.stringify(result); 
      var observableData = komap.fromJS(result); 
      var array = observableData(); 
      self.ListaUsuarios(array); 
     } 
    }); 
});

App.js（初始化淘汰賽參數）

(function (undefined) { 
    'use strict'; 
    requirejs.config({ 
     baseUrl: './', // Raiz 
     urlArgs: function (id, url) { 
      return (url.indexOf('?') === -1 ? '?' : '&') + 'v=23'; 
     }, // Debug Cache 
     deps: ['assets/js/base'], 
     map: { 
      '*': { 
       'jQuery': 'jquery' 
      } 
     }, 
     paths: { 
      // Módulos 
      'jquery': 'assets/js/vendor/jquery-3.1.1', 
      // Library jQuery 
      'knockout': 'assets/js/vendor/knockout-3.4.2', 
      'knockoutMapping': 'assets/js/vendor/knockout.mapping-latest', 
      // Config 
      'start': 'assets/js/start' 
     }, 
     shim: { 
      'knockoutMapping': { 
       deps: ['knockout'] 
      } 
     }, 
     waitSeconds: 15 
    }); 
    // Chamando módulo principal para iniciar a aplicação 
    require(['jquery'], function ($) { 
     require(['start']); 
    }); 
    requirejs.onError = function (err) { 
     console.log(err.requireType); 
     console.log('modules: ' + err.requireModules); 
     throw err; 
    }; 
}());

base.js（使用jQuery作爲在RequireJS名爲模塊）

(function() { 
    define(['jquery'], function() { 
     (function ($) { 
      console.info('Verificando Global jQuery...'); 
      if (typeof window === 'object' && typeof window.document === 'object') { 
       if (!!window && !(!!window.$)) { 
        window.jQuery = window.$ = jQuery; 
       } 
       console.log([$, jQuery]); 
      } 
      var version = $().jquery; 
      if (typeof define === "function" && define.amd && define.amd.jQuery) { 
       console.info('jQuery: ' + version + ' $.fn.jquery: ' + $.fn.jquery); 
       return window.jQuery; 
      } 
     }(jQuery)); 
    }); 
}());

start.js（最後初始化組件）

define(['knockout', 'knockoutMapping'], function (ko, komap) { 
    debugger; 
    ko.components.register('table_n', { 
     viewModel: { require: 'assets/js/component/viewmodel/menu' }, 
     template: { require: 'text!assets/js/component/templates/menu.html' } 
    }); 

    ko.applyBindings(); 
});

我也得到了很多的錯誤，當我在瀏覽器

Verificando Global jQuery... 
require.js:5 Array(2) 
require.js:5 jQuery: 3.1.1 $.fn.jquery: 3.1.1 
text.js Failed to load resource: the server responded with a status of 404 (Not Found) 
app.js:36 scripterror 
app.js:37 modules: text 
app.js:38 Uncaught Error: Script error for "text", needed by: text!assets/js/component/templates/menu.html_unnormalized2 
http://requirejs.org/docs/errors.html#scripterror 
    at makeError (require.js:5) 
    at HTMLScriptElement.onScriptError (require.js:5) 
makeError @ require.js:5 
onScriptError @ require.js:5 
app.js:36 require 
app.js:37 modules: null 
app.js:38 Uncaught TypeError: Cannot read property 'createViewModel' of undefined 
    at c (knockout-3.4.2.js?v=23:80) 
    at Object.loadViewModel (knockout-3.4.2.js?v=23:82) 
    at Object.e [as Nb] (knockout-3.4.2.js?v=23:78) 
    at knockout-3.4.2.js?v=23:79 
    at Object.execCb (require.js:5) 
    at b.check (require.js:5) 
    at b.<anonymous> (require.js:5) 
    at require.js:5 
    at require.js:5 
    at each (require.js:5) 
c @ knockout-3.4.2.js?v=23:80 
loadViewModel @ knockout-3.4.2.js?v=23:82 
e @ knockout-3.4.2.js?v=23:78 
(anonymous) @ knockout-3.4.2.js?v=23:79 
execCb @ require.js:5 
check @ require.js:5 
(anonymous) @ require.js:5 
(anonymous) @ require.js:5 
(anonymous) @ require.js:5 
each @ require.js:5 
emit @ require.js:5 
check @ require.js:5 
enable @ require.js:5 
init @ require.js:5 
h @ require.js:5 
completeLoad @ require.js:5 
onScriptLoad @ require.js:5 
app.js:36 timeout 
app.js:37 modules: text!assets/js/component/templates/menu.html_unnormalized2 
app.js:38 Uncaught Error: Load timeout for modules: text!assets/js/component/templates/menu.html_unnormalized2 
http://requirejs.org/docs/errors.html#timeout 
    at makeError (require.js:5) 
    at l (require.js:5) 
    at require.js:5 
makeError @ require.js:5 
l @ require.js:5 
(anonymous) @ require.js:5 
(unknown) XHR Loaded (menus - 200 OK - 971.9319999858271ms - 525B)

來源

2017-08-12 Gleyson Silva

你能顯示你的文件結構嗎？ – Ray

@Ray，感謝您的幫助，但您可以看到我的錯誤，並將其作爲答案發布，以防某人遇到同樣的問題。 –

調試看到有關使用需要一些例子之後，我明白我在做什麼錯：

中的index.html文件，menu.html （模板）是正確的，但在文件menu.js（視圖模型），我改變了第一行包含jQuery庫，看起來像這樣：

Define (['jquery', 'knockout', 'knockoutMapping'], function ($, ko, komap) {

而且一t時的文件結束後：

Self.User List (array);

我加了淘汰賽Applybinds：

Ko.applyBindings();

它是在start.js文件之前，但是因爲我詢問與AJAX技術的WebAPI（其是異步的），它在ajax完成查詢之前被激活，導致錯誤。

在app.js文件我增加了一個叫路會話text.js lib中，這libreary可以在download here 該庫需要加載的模板中找到，因爲默認情況下加載.js文件要求。

而且還增加了路徑視圖模型menu.js

的文件的修改的部分是由此

'text': 'assets/js/vendor/text', 
    'menu': 'assets/js/component/viewmodel/menu',

記住，這是在會話路徑前後「knockoutMapping」和添加'開始'。

base.js文件也沒有改變。

而在文件中，start.js被刪除，正如我之前所說的，applybindings和修改了第一行。現在我被稱爲視圖模型和模板，在「定義」被引用和文件看起來像這樣的變量：

Start.js：

define(['knockout', 'knockoutMapping', 'menu', 'text!assets/js/component/templates/menu.html'], function (ko, komap, menu, menuhtml) { 
    ko.components.register('table_n', { 
     viewModel: menu, 
     template: menuhtml 
    }); 
});

並與該表是正確加載。

來源

2017-08-13 19:30:15

爲Knockout組件加載外部ViewModel和模板

回答

相關問題