Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

diegohamaz1

Ajuda com KnockoutJS + RequireJS + Magento

Recommended Posts

Pessoal tudo bem?

 

Tenho um arquivo em knckoutJS do meu site em magento

 

 

define(
    [
        'jquery',
        'ko',
        'uiComponent',
        'mage/url',
        'mage/storage',
        'Teste_AdvancedGrid/js/view/price',
        'Magento_Customer/js/customer-data'
    ],

    function ($, ko, component, urlBuilder, storage , priceRender, customerData) {

        "use strict";

        return component.extend({

            // CLASS Product 
            Product : function(id, sku , name , urlThumb ) {
                this.id    = ko.observable(id);
                this.sku    = ko.observable(sku);
                this.name  = ko.observable(name);
                this.urlThumb = ko.observable(urlThumb);
         
            },
             
            // CLASS CartItem 
            CartItem : function(product, quantity) {

              var self      = this; // Scope Trick
             
              self.product  = ko.observable(product);
              self.quantity = ko.observable(quantity || 1);
             
              self.cost     = ko.computed(function(){                
                return self.product().price() * self.quantity();
              });

              self.increaseQuantity = function() {
                self.quantity(self.quantity() + 1);
              };
           
              self.formatMoney = function() {
                return "R$ " + self.cost().toFixed(2);
              };
            },
             
            // CLASS ViewModel 
            ViewModel : function() {
              
              /**
               * Scope Trick 
               * @type {[type]}
               */
              var self = this;             
          

            getModel: function(data, event) {
                var brand = $("#marca").val();
                var self = this;
                var serviceUrl = urlBuilder.build('/grid/index/product?type=model&brand='+brand);               
                return storage.get(serviceUrl,'').done(
                   function (response) {
                        var dados = JSON.parse(response);
                        self.model(dados);
                   }
                ).fail(
                   function (response) {
                       console.log(response);
                   }
                );
            },

     
 

            initialize: function () {

                this._super();
              

            },
            _render:function(){
    
         
            },
            defaults: {
                template: 'Teste_AdvancedGrid/grid',
            },
        });

    }
);


      

E tenho um JS que é invocado na mesma pagina com RequireJS

 

requirejs(['algoliaBundle', 'knockout'], function(algoliaBundle , ko) {
    algoliaBundle.$(function ($ ,ko ) {

        if (!this.ko) {
            this.ko = ko;
        };
		//AQUI QUE QUERO INVOCAR A FUNÇÂO DO KNOCKOUT
      
      this.getModel(parametro);
    });
});

Eu gostaria de chamar a função do Knockout "getModel" no arquivo acima passando um parametro como this.getModel(parametro) , mas não sei como invocar a view model no arquivo acima, alguem pode me ajudar ? Não sei como instaciar a View Model do magento no requireJS

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por luc.oliveira1984
      Olá pessoal, sou novo por aqui e estou precisando da ajuda de vcs!
       
      Tenho um modulo de marketplace (webkul) e preciso alterar a quantidade de exibição de anunciantes de 4 para 20 por página.
       
      Alguem poderia me ajuda? :)
       
      Minha página de anuncinates é: https://lenda360.com.br/marketplace/seller/sellerlist/

      Meu arquivo sellerlist contem:
       
      <?php
      /**
      * Webkul Software.
      *
      * @category Webkul
      * @package Webkul_Marketplace
      * @author Webkul
      * @copyright Copyright (c) Webkul Software Private Limited (https://webkul.com)
      * @license https://store.webkul.com/license.html
      */
      $helper = $this->helper(\Webkul\Marketplace\Helper\Data::class);
      $banner_display = $helper->getDisplayBanner();
      $banner_image = $helper->getBannerImage();
      $banner_content = $helper->getBannerContent();
      $marketplacebutton = $helper->getMarketplacebutton();
      $sellerlist_top_label = $helper->getSellerlisttopLabel();
      $sellerlist_bottom_label = ($helper->getSellerlistbottomLabel());
      $paramData = $this->getRequest()->getParams();
      if (!isset($paramData['shop'])) {
      $paramData['shop'] = '';
      }
      $sellerAccountUrl = $block->getUrl(
      'marketplace/account/becomeseller',
      ["_secure" => $this->getRequest()->isSecure()]
      );
      if (!$helper->isCustomerLoggedIn()) {
      $sellerAccountUrl = $block->getUrl(
      'customer/account/create',
      ["_secure" => $this->getRequest()->isSecure()]
      );
      }
      ?>
      <div class="wk-mp-design wk-mp-landingpage">
      <?php
      if ($banner_display) {?>
      <div class="wk-mp-banner-container">
      <div class="wk-mp-banner">
      <div class="wk-mp-header">
      <h1><?= $block->escapeHtml($marketplacebutton); ?></h1>
      <h2>
      <?= /* @noEscape */ $block->getCmsFilterContent($banner_content)?>
      </h2>
      <p>
      <a href="<?= $block->escapeUrl($block->getUrl('marketplace/account/becomeseller/', ['_secure' => $this->getRequest()->isSecure()])); ?>">
      <button class="button wk-mp-landing-button">
      <span>
      <span>
      <strong><?= $block->escapeHtml($marketplacebutton); ?></strong>
      </span>
      </span>
      </button>
      </a>
      </p>
      </div>
      </div>
      </div>
      <?php
      } ?>
      <h1 class="wk-marketplace-label"><?= $block->escapeHtml($sellerlist_top_label) ?></h1>
      <style>

      </style>
      <div clas="wk-srach-wrapper">
      <form method="get" action="<?= $block->escapeUrl($block->getUrl('marketplace/seller/sellerlist', ['_secure' => $this->getRequest()->isSecure()]))?>" id="search_mini_form" class="wk-search no-p" style="">
      <div class="control">
      <input id="sellersearch" type="search" name="shop" value="<?= $block->escapeHtml($paramData['shop'])?>" class="input-text required-entry" maxlength="128" placeholder="<?= $block->escapeHtml(__('Search sellers by shop name from here'))?>..." autocomplete="off" style="width:100%;border:1px solid #ccc;float:left;">
      <button type="submit" title="Search" class="button"><span class="span"><span><?= $block->escapeHtml(__('Search')) ?></span></span></button>
      </div>
      </form>
      </div>
      <div class="wk-mp-sellerlist-container" style="display:inline-block;padding: 0;padding-top: 20px;width: 100%;">
      <?php
      if (count($block->getSellerCollection())==0) { ?>
      <div class="wk-emptymsg">
      <?= $block->escapeHtml(__('No Seller Available')) ?>
      </div>
      <?php
      } else {?>
      <ul>
      <?php
      foreach ($block->getSellerCollection() as $seller_coll) {
      $seller_id = $seller_coll->getSellerId();
      $seller_product_count = 0;
      $profileurl = $seller_coll->getShopUrl();
      $shoptitle = '';
      $logo="noimage.png";
      $seller_product_count = $helper->getSellerProCount($seller_id);
      $shoptitle = $seller_coll->getShopTitle();
      $logo=$seller_coll->getLogoPic()==''?"noimage.png":$seller_coll->getLogoPic();
      if (!$shoptitle) {
      $shoptitle = $profileurl;
      }
      $logo=$helper->getMediaUrl().'avatar/'.$logo;
      ?>
      <li>
      <div class="wk-mp-sellerlist-wrap">
      <div class="wk-sellerlist-divide1">
      <a href="<?= $block->escapeUrl($helper->getRewriteUrl('marketplace/seller/profile/shop/'.$profileurl));?>" title="<?= $block->escapeHtml(__("View Seller's Shop")) ?>"><img src="<?= $block->escapeUrl($logo) ?>"></a>
      </div>
      <div class="wk-sellerlist-divide2">
      <div>
      <a href="<?= $block->escapeUrl($helper->getRewriteUrl('marketplace/seller/profile/shop/'.$profileurl));?>" title="<?= $block->escapeHtml(__("View Seller's Shop")) ?>">
      <strong><?= $block->escapeHtml($shoptitle) ?></strong>
      </a>
      </div>
      <div><?= $block->escapeHtml(__('%1 Total Products', $seller_product_count)) ?></div>
      <a href="<?= $block->escapeUrl($helper->getRewriteUrl('marketplace/seller/collection/shop/'.$profileurl));?>">
      <button class="button" title="<?= $block->escapeHtml(__("View Seller's Collection")) ?>">
      <span>
      <span>
      <?= $block->escapeHtml(__('View All')); ?>
      </span>
      </span>
      </button>
      </a>
      </div>
      </div>
      </li>
      <?php
      }?>
      </ul>
      <?php
      }?>
      </div>
      <?php if ($block->getPagerHtml()): ?>
      <div class="order-products-toolbar toolbar bottom"><?= $block->getPagerHtml(); ?></div>
      <?php endif ?>
      <h1 class="wk-marketplace-label"><?= /* @noEscape */ $sellerlist_bottom_label ?></h1>
      <a href="<?= $block->escapeUrl($sellerAccountUrl)?>">
      <button class="button wk-mp-landing-button">
      <span>
      <span>
      <strong><?= $block->escapeHtml($marketplacebutton); ?></strong>
      </span>
      </span>
      </button>
      </a>
      </div>
      <script>
      require([
      "jquery",
      "mage/mage",
      ], function($){
      $('.page-title-wrapper').hide();
      $('.wk-mp-banner').css('background-image','url("<?= $block->escapeUrl($banner_image) ?>")');
      });
      </script>
       
    • Por Johnny Saymon
      Boa tarde.
       
      Estou tentando modularizar meu código Javascript, e iniciei tentando trabalhar com o RequireJS mas ainda não consegui compreender a lógica, acredito que com um exemplo será melhor para explicar meu problema, abaixo colocarei o mínimo de código possível para ilustrar o problema, segue:
       
      // arquivo ClasseY.js define(["require", "exports", "pacote-x"], function (require, exports, pacote-x) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var ClasseY = (function () { function ClasseY { // código }; return ClasseY; })(); exports.ClasseY = ClasseY; }); Tenho outras "classes" que compõe esse pacote seguindo essa mesma estrutura do código acima.
      Rodei o RequireJs Optimizer para unir todos os arquivos em um só que chamei de "main.js", com isso tive uma concatenação e minificação do código que resultou em algo assim:
       
      define("ClasseY",["require","exports","pacote-x"],function(t,e,o){"use strict"; // e todo o restante do código segue... Por fim, parti para o html utilizando essas tags
       
      <script type="text/javascript" src="require.js"></script> <script type="text/javascript"> require(["main"], function(m){ var y = new m.ClasseY; }); </script> Mas meu código não funcionou, o Require JS até vai buscar o arquivo "main.js" mas o parâmetro "m" é "undefined".
       
      Onde está o erro? Esse é um bom fluxo de trabalho?
    • Por DanielAndrade
      Olá Pessoal.... seguinte...
       
      estou iniciando os trabalhos com Angular e estou construindo uma app com PHP puro no back-end. Só falei para ilustrar minha estrutura de diretórios, que é esta:
       
      app/
      ---control/ [only PHPs]
      ---model/
      ---view/
      ---view/js/ng
      ---view/pages/
       
       
      Então, eu andei estudando e uma fiz uma SPA (Single Page Aplication) e em app.js tenho uma config router, somelike that:

      /* app.js */ (function(){ 'use strict'; angular.module('app', ['ngRoute']) .config(['$routeProvider', function($routeProvider){ $routeProvider .when('/', { templateUrl : 'app/view/pages/inicio.html', controller : 'inicioCtrl' }) .when('/Pessoas/index', { templateUrl : 'app/view/pages/Pessoas/index.html', controller : 'pessoaCtrl' }) .when('/Pessoas/add', { templateUrl : 'app/view/pages/Pessoas/formAddPessoa.html', controller : 'inserirPessoaCtrl' }) .otherwise ({ redirectTo: '/' } }]) })(); Agora notem que o arquivo app.js não possui as controllers relacionadas no config. Porque?
      Visando o crescimento responsável da aplicação, não posso inserir toda nova controller no arquivo geral do app, confere? Continuando...
       
      Nos templates, a seguinte estrutura de codigo:

      <!-- Arquivo formAddPessoa.html --> <div ng-controller="inserirPessoaCtrl"> {{ algumAtributoDoScope }} </div> <!-- Arquivo de Controller apenas deste arquivo --> <script src="app/view/js/ng/Pessoas/inserirPessoaCtrl.js"></script> É aqui, no arquivo html do template, que penso em inserir o código js referente a controller que foi carregada e definida lá no config. Penso que assim posso implementar de forma saudável e visualmente compreensível para todos os devs.
       
      Por fim, o arquivo da Controller específica
      (function(){ 'use strict'; angular.module('app') .controller('inserirPessoaCtrl', ['$scope', function($scope) { $scope.algumAtributoDoScope= ' valor do atrib '; }]); })(); Bom, isso não funciona.
       


      ...Então fui pesquisar sobre e achei discussões - e soluções - muitos interessantes. O requirejs (http://weblogs.asp.net/dwahlin/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs) parece ser o mais interessante para essa situação.
       
      Mas eu devo ser muito tapado mesmo, pois não consegui fazer funcionar... Então, voltei ao início e mantive a estrutura de diretórios da forma como postei aqui.
       
      Alguem pode me dar um norte? Uma saída, uma luz?? Outra ideia, de repente...
       
      Agradeço desde já a todos.. Abraços!
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.