为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和模板

回答

相关问题