Load ViewModel and external template into the Knockout component

Question

Load ViewModel and external template into the Knockout component

Navigation

#1 by (0 votes)

1

I'm trying to load the template and the ViewModel into a knockout component using require.js, but so far unsuccessful.

index.html (view)

<!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 (Template)

<table class="table table- bordered table-hover">
    <thead>
        <tr>
            <th align=center width=60 style="display: none">Código</th>
            <th>Título</th>
            <th>Descrição</th>
            <th>Ordem</th>
            <th>Imagem url</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: {data: ListaUsuarios()}">
        <tr>
            <td style="display: none" data-bind="text: id"></td>
            <td data-bind="text: titulo"></td>
            <td data-bind="text: descricao"></td>
            <td data-bind="text: ordem"></td>
            <td data-bind="text: caminho_imagem"></td>
        </tr>
    </tbody>
</table>

menu.js (ViewModel)

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 (initializing knockout parameters)

(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 (Using jQuery as a module called in 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 (and finally initializing the component)

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();
});

And below the sad mistakes!

javascript knockoutjs requirejs

asked by anonymous 13.08.2017 / 00:35

1 answer

Add / Remove Inputs dynamically php How to install numpy and other modules?

score 0 · Accepted Answer

After seeing some examples of using require.js, I understood what I was doing wrong:

The index.html, menu.html (template) files are correct, but in menu.js (ViewModel) I changed the first line to include the ** Jquery library ** and looked like this:

Define (['jquery', 'knockout', 'knockoutMapping'], função ($, ko, komap) {

And at the end of the file after:

Self.User List (array);

I added the Knockout Applybinds:

Ko.applyBindings ();

Before the applybindings was in the start.js file, however, since I am querying a WebApi with ajax (which is asynchronous), it was activated before ajax received the response and this caused one of the errors. >

In the app.js file I added a javascript library named text.js in session Paths, this library can be found at download here . She is needed to load the template, because require.js by default loads only javascript files, this generated another error.

And I also added the path to the viewmodel.js menu The modified part of the file was thus

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

Remember that this must be added in session paths after 'knockoutMapping' and before 'start'.

The base.js file also has not changed.

And in the file start.js was removed, as I said earlier, the applybindings and also modified the first line. Now I called the Viewmodel and the template by the variables that were referenced in the 'define'. And the file looks like this:

** Start.js: **

Define (['knockout', 'knockoutMapping', 'menu', 'text!Assets/js/component/ templates/menu.html'], função (ko, komap, menu, menuhtml) {
    Ko.components.register ('table_n', {
        ViewModel: menu,
        Modelo: menuhtml
    });
});

And with that the table was loaded correctly.