I'm trying to get namespacing to work with the revealing module pattern. I have code that looks similar to the following:
/**
* #namespace bigpage
*/
var bigpage = {};
/**
* #namespace bigpage.data.methods
* #memberOf bigpage.data
*/
bigpage.data.methods = bigpage.data.methods || (function() {
/**
* #function
* #memberOf bigpage.data.methods
* #param {string}
*/
function getDataSeller(method) {
}
return { getDataSeller : getDataSeller };
})();
However, JSdoc doesn't seeing to pick up the getDataSeller documentation. If someone could give me a way of doing this as well as a reason why the above isn't working, that'd be great.
I found this link to be very helpful:
http://devnull.absolventa.de/2014/03/25/jsdoc-and-the-revealing-module-pattern/
// In file: namespace.js
(function() {
window.Absolventa = window.Absolventa || {};
}());
// In file: modules/urlify.js
(function() {
"use strict";
Absolventa.Urlify = (function() {
var init;
/**
* #param {string} foo
*/
init = function(foo) {
// Magick!
};
return {
init : init
};
}());
}());
So far, we've see some preliminary success. I have yet to fully implement it across all of our code, but I've used it on our most nested code and it seems to be working (using JSDoc3)
Related
Hello i using Laravel 9 and Vue.js 3, with Axio and i am trying to fecht some data from my data base, to appear inside a select list options, however i am not getting anything (neither any error, just blank data...)
I created my model Produto
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Produto extends Model
{
use HasFactory;
protected $table = "produto";
protected $guarded = [];
}
created the correct migration
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* #return void
*/
public function up()
{
Schema::create('produto', function (Blueprint $table) {
$table->id();
$table->string("nome");
$table->double("preco");
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* #return void
*/
public function down()
{
Schema::dropIfExists('produto');
}
};
Created my controller ProdutoController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Produto;
class ProdutoController extends Controller
{
/**
*Retorna os dados dos Produtos
*
* #return void
*/
public function getProdutos()
{
$data = Produto::get();
return response()->json($data);
}
}
Defined my route
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProdutoController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::get('get_produtos', [ProdutoController::class, 'getProdutos']);
//Route::post('produtos', [ProdutoController::class, 'setProdutos']);
For testing i tried localhost:8000/get_produtos and it appeared my data as expected, so i think this part is correct
[{"id":1,"nome":"Telemovel","preco":124.55,"created_at":null,"updated_at":null},{"id":2,"nome":"Tablet","preco":600.99,"created_at":null,"updated_at":null},{"id":3,"nome":"Portatil","preco":501,"created_at":null,"updated_at":null},{"id":4,"nome":"Caneta","preco":2.55,"created_at":null,"updated_at":null}]
In my template i used this Select
<div :id="selectProdutoID" class="row">
<div :id="optionId" class="col-sm-6" >
<select :id="selectId" class=' form-select form-control-md' v-model='prod' #change="onchange($event)">
<option v-for='data in produto' :value='data.id'>{{ data.nome }} </option>
</select>
</div>
And finally here is my script
<script>
export default{
name:"app",
components: {
},
data() {
return{
blankID:"blank",
tituloID:"titulo",
ClienteID:"nomeCliente",
selectId:"selectID",
dropID:"drop",
adicionarID:"adicionarId",
selectProdutoID:"selectProduto",
optionId:"optionId",
qtdID:"qtdId",
boxId:"boxId",
produto: [],
onchange(e){
console.log(e.target.value);
}
}
},
methods:{
getProdutos: function(){
axios.get('get_produtos')
.then(function (response) {
this.produtos = response.data;
}.bind(this));
}
},
created: function(){
this.getProdutos()
}
}
</script>
It doesn't even get me an error, just a select with empty content , and i tried to check other solutions i found here, but nothing worked for now. I believe the error is happening somewhere in the the template/script part, but i´ve been trying everything i found and still with no luck
Thank you in advance
EDIT:
Found out this tutorial https://www.tutsmake.com/laravel-9-vue-js-axios-get-request-tutorial/
and then changed my script methods to
methods: {
getProdutos(){
axios.get('/get_produtos')
.then((response)=>{
this.produtos = response.data.produtos
})
}
},
created() {
this.getProdutos()
}
However data continues to not appear on my select
Found a solution to my problem. For some reason if i use «this» directly Axios doesn't work, so i had to create a variable, and it worked
methods: {
getProdutos(){
var vm = this
axios.get('/get_produtos')
.then((response)=>{
vm.produtos = response.data
})
}
},
created() {
this.getProdutos()
}
I tried many solutions but no one works for me
I've installed Laravel echo and pusher js and Pusher/Pusher
#bootstrap.js
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
encrypted: true,
});
#.env
BROADCAST_DRIVER=pusher
PUSHER_APP_ID=my_id
PUSHER_APP_KEY=my_key
PUSHER_APP_SECRET=my_secret
PUSHER_APP_CLUSTER=eu
my event file NewMessage
class NewMessage implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $message;
/**
* Create a new event instance.
*
* #return void
*/
public function __construct(Message $message)
{
$this->message = $message;
}
/**
* Get the channels the event should broadcast on.
*
* #return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
return new PrivateChannel('messages.'. $this->message->to);
}
public function broadcastWith()
{
return ["message" => $this->message];
}
}
channel.php
Broadcast::channel('messages.{id}', function ($user, $id) {
return $user->id === (int) $id;
});
Vue App JS code
mounted(){
Echo.private(`messages${this.user.id}`)
.listen('NewMessage', (e) => {
this.handleIncoming(e.message)
});
},
methods:{
saveNewMessage(msg){
this.messages.push(msg);
},
handleIncoming(message){
if(this.selectedContact && message.from == this.selectedContact.id ){
this.saveNewMessage(message);
return;
}
alert(message.text);
}
}
Api.php
Route::post('/conversation/send', 'Api\ContactController#sendNewMessage');
Contact Controller
public function sendNewMessage(Request $request)
{
$message = Message::create([
'from' => $request->sender_id,
'to' => $request->receiver_id,
'text' => $request->text
]);
broadcast(new NewMessage($message));
return response()->json($message);
}
I also read the official documentation everything is going good but I didn't figure out why, it's a throwing error. Have any idea?
I figure out why it is every time shows auth forbidden or doesn't display auth
Solution:
you need to double-check your PUSHER_APP_KEY because if it is not set correctly, it will through error because our stream not connected with pusher
PUSHER_APP_KEY="PUT KEY HERE"
If you are very sure that your app key is correct then go to the Network tab and click on your pusher app key which like e70ewesdsdssew0
If it is displaying the result like this
{"event":"pusher:connection_established","data":"{\"socket_id\":\"131139.31305364\",\"activity_timeout\":120}"}
your API key is good
if it not correct it will display an error like this
{"event":"pusher:error","data":{"code":4001,"message":"App key 3fdsfdfsdfsd not in this cluster. Did you forget to specify the cluster?"}}
Also, don't forget to put the cluster key
PUSHER_APP_CLUSTER=eu
I am trying to figure out how to use a custom view location strategy, I have read the documentation at this page http://durandaljs.com/documentation/Using-Composition/ but I don't exactly understand what the strategy function should look like.
Can anybody give me a quick example of what the implementation of this function would be like and the promise that returns (even a simple one) etc?
Thanks in advance,
Gary
p.s. This is the code in my html:
<div>
<div data-bind="compose: {model: 'viewmodels/childRouter/first/simpleModel', strategy:
'viewmodels/childRouter/first/myCustomViewStrategy'}"></div> </div>
and this is the code in my myCustomViewStrategy:
define(function () {
var myCustomViewStrategy = function () {
var deferred = $.Deferred();
deferred.done(function () { console.log('done'); return 'simpleModelView'; });
deferred.fail(function () { console.log('error'); });
setTimeout(function () { deferred.resolve('done'); }, 5000);
return deferred.promise();
};
return myCustomViewStrategy;
});
but I get the error:
Uncaught TypeError: Cannot read property 'display' of undefined - this is after done has been logged in the console window.
Okay I solved this by creating my custom view strategy by the following:
define(['durandal/system', 'durandal/viewEngine'], function (system, viewEngine) {
var myCustomViewStrategy = function () {
return viewEngine.createView('views/childRouter/first/sModelView');
}
return myCustomViewStrategy;
});
As I found the documentation a bit lacking on compose binding's strategy setting I checked the source code how it works. To summ it up:
The module specified by the compose binding's strategy setting by its moduleId
must return a function named 'strategy'
which returns a promise which results in the view to be bound
as a HTML element object.
As a parameter the strategy method receives the compose binding's settings object
with the model object already resolved.
A working example:
define(['durandal/system', 'durandal/viewEngine'], function (system, viewEngine) {
var strategy = function(settings){
var viewid = null;
if(settings.model){
// replaces model's module id's last segment ('/viewmodel') with '/view'
viewid = settings.model.__moduleId__.replace(/\/[^\/]*$/, '/view');
}
return viewEngine.createView(viewid);
};
return strategy;
});
Durandal's source:
// composition.js:485
for (var attrName in settings) {
if (ko.utils.arrayIndexOf(bindableSettings, attrName) != -1) {
/*
* strategy is unwrapped
*/
settings[attrName] = ko.utils.unwrapObservable(settings[attrName]);
} else {
settings[attrName] = settings[attrName];
}
}
// composition.js:523
if (system.isString(context.strategy)) {
/*
* strategy is loaded
*/
system.acquire(context.strategy).then(function (strategy) {
context.strategy = strategy;
composition.executeStrategy(context);
}).fail(function(err){
system.error('Failed to load view strategy (' + context.strategy + '). Details: ' + err.message);
});
} else {
this.executeStrategy(context);
}
// composition.js:501
executeStrategy: function (context) {
/*
* strategy is executed
* expected to be a promise
* which returns the view to be bound and inserted to the DOM
*/
context.strategy(context).then(function (child) {
composition.bindAndShow(child, context);
});
}
I am trying to use AngularJS with RequireJS currently, but I do not know how to make the test work with injection.
Without RequireJS we could,
Impl
PhoneListCtrl.$inject = ['$scope', '$http'];
var PhoneListCtrl = ['$scope', '$http', function($scope, $http) {
/* constructor body */
}];
Test
beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
$httpBackend = _$httpBackend_;
$httpBackend.expectGET('phones/phones.json').
respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
scope = $rootScope.$new();
ctrl = $controller(PhoneListCtrl, {$scope: scope});
}));
However, when we use RequireJS we may define the controller as following,
demoController.js
define(["dependency"], function() {
/* constructor body */
});
When using this controller, we add it as one of the dependencies and do not have a variable declaration.(Let me just use "Controller" as an example since we'd better call it "Service")
someJS.js
define(["demoController"], function(controller) {
controller.method();
});
My Question
How can we inject the $http, $scope(or something else) to the target controller or service for testing when using RequireJS(AMD)?
Any help would be highly appreciated.
I've done something similar:
/*global define, document */
define(['angular', 'jquery'], function (angular, $) {
'use strict';
return function () {
var $injector = angular.bootstrap(document, ['myApp']);
var $controller = $injector.get('$controller');
var myController = $controller('myController');
};
});
The idea is that angular.bootstrap returns an injector, which allows you to fetch a service.
I finally made it work by following.
angular.module('app').controller('MyController', ['$scope', 'dep2', function ($scope, dep2) {
$scope.method = function () {//do something};
}]);
We can use this controller in test cases like this:
inject(function($controller, $rootScope, dep2) {
scope = $rootScope.$new();
myController = $controller("MyController",
{
$scope : scope,
dep2: dep2
});
);
Is there a way to have a static variable in a dojo (1.8) module so that I can retain state?
Example, say I set some value in some/module
require([
'some/module'
], function (module) {
module.setSomeValue(3);
});
.. and then want to retrieve it later
define([
'some/module'
], function(module) {
return {
start: function() {
var x = module.getSomeValue();
}
};
});
A solution that works but seems like a hack,
acompany = window.acompany || {};
acompany.project = acompany.project || {
};
require([
], function() {
var debug = false;
acompany.project.module = {
/* static variables and functions here */
};
});
define([
], function () {
return acompany.project.module;
});
Actually there is always only single instance of AMD module, because (source):
define has two additional important characteristics that may not be immediately obvious:
Module creation is lazy and asynchronous, and does not occur immediately when define is called. This means that factory is not executed, and any dependencies of the module will not be resolved, until some running code actually requires the module.
Once a module value has been entered into the module namespace, it is not recomputed each time it is demanded. On a practical level, this means that factory is only invoked once, and the returned value is cached and shared among all code that uses a given module. (Note: the dojo loader includes the nonstandard function require.undef, which undefines a module value.)
In addition you do not have to provide just factory function, you can provide an object literal as well:
define("some/module", {
someValue: "some",
otherValue: "other"
});
Then somewhere else in your code:
require(["some/module"], function(module) {
console.log("module.someValue", module.someValue); // some
module.someValue = "some changed";
});
require(["some/module"], function(module) {
console.log("module.someValue", module.someValue); // some changed
});
More robust solution includes an instance of dojo/Stateful, so you can watch for changes and define custom setters and getters:
define("some/stateful-module", ["dojo/Stateful"], function(Stateful){
var stateful = new Stateful({
someValue: "some",
otherValue: "other"
});
return stateful;
});
Then somewhere else in your code:
require(["some/stateful-module"], function(module) {
console.log("stateful-module.someValue:", module.get("someValue"));
module.watch(function(name, oldValue, newValue) {
console.log("stateful-module: property"
, name
, "changed from"
, "'" + oldValue + "'"
, "to"
, "'" + newValue + "'"
);
});
});
require(["some/stateful-module"], function(module) {
module.set("someValue", "some changed");
});
See how it works at jsFiddle: http://jsfiddle.net/phusick/fHvZf/. It's in a single file there, but it will work the same way across the whole application unless you require.undef(mid) the module.
There are multiple files in Dojo like dojo/date/locale that define static variables and functions and not widgets/classes using dojo.declare.
Define the module
define([
'dojo/_base/lang/',
'some/module'
], function(lang, module) {
var m = lang.getObject('some.module', true);
m.x = 0;
m.doSomething = function(){
// doSomething
};
return m;
});
Use the module
require([
'some/module'
], function(someModule) {
var debug = false;
/* someModule - static variables and functions here */
if(someModule.x == 0){
}
});