Backbone.js & Requisite.js: come posso trasformare i miei modelli, viste e collezioni da richiedere.
-
28-10-2019 - |
Domanda
Sto lavorando a un'app JavaScript con BackBone.js, che diceva, per facilitare lo sviluppo strutturo i miei file in questo modo
app
|
+ views
| L movieRow.js
| L movieDetail.js
|
+ models
| L movie.js
| L tvshow.js
|
+ collections
| L movies.js
| L tvshows.js
|
+ templates
| L movieList.tpl
| L movieDetail.tpl
| L applicationUI.tpl
|
L application.js
Ora, che sono molti file JavaScript sul server per l'utente, vedo un po 'di ronzio sui labjs o richiedono.js e ho deciso di testare con esso. Ma non ho idea di come riscriverei tutti i miei modelli di spina dorsale o viste in questi moduli di requisiti.
Qualsiasi aiuto nella giusta direzione sarebbe bello.
Soluzione
La chiave per comprendere la richiesta (almeno nel mio piccolo cervello) è ricordare che ciò che torni dalla funzione sarà disponibile per altri moduli che attirano (o richiedono) questo modulo. Quindi, nel codice seguente, ho bisogno di jQuery e backbone (JQuery è un caso speciale gestito da "Requisito-JQuery"). Quando sono disponibili quelli 2, chiamerà la mia funzione e quella funzione restituirà il costruttore di vista che ho creato.
define([
'jquery'
'libraries/backbone'
], function ($) {
var MovieRow = Backbone.View.extend({
render: function () {
return this;
}
});
return MovieRow;
});
Quindi potresti scrivere qualcosa del genere sulla tua pagina. Si noti che jQuery è il primo elemento richiesto nell'array. Ciò corrisponde al primo parametro nella mia funzione. La vista è 2a e il modello è 3 °. Quindi posso usare il valore di ritorno dal mio codice "Defini" sopra che è il costruttore.
require({
baseUrl: '/'
},[
'jquery',
'app/views/movieRow',
'app/models/movie',
'libraries/backbone'
],
function ($, MovieRowView, Movie) {
var view = new MovieRowView({model : new Movie());
$('body').append(view.render().el);
});
Spero che questo sia utile ... abbiamo amato la spina dorsale e richiesto :)
Altri suggerimenti
Ho finito lo spazio nei commenti e volevo includere un po 'di codice, quindi sto producendo una seconda risposta:
Ciò che @timdunham ha pubblicato è per la maggior parte abbastanza buono, anche se ho alcuni extra che qualcuno potrebbe affrontare per ulteriori comprensione.
Nel codice:
define([
'jquery'
'libraries/backbone'
]
Credo che manchi di sottolineatura. Innanzitutto, la spina dorsale ha bisogno di sottolineare per operare e senza di essa penso che si spezzerebbe. In secondo luogo, a meno che tu non stia usando l'AMDJS FORK di Undercore e Backbone, non sono di supporto. Sottolinearsi il supporto AMD rimosso con v1.3.0. Se supponiamo che stiamo usando undercore e una spina dorsale non AMD, probabilmente non appartengono al define[]
e dovrebbe essere require[]
invece.
Quindi la definizione corretta sembrerebbe qualcosa del genere se stai usando correttamente le versioni AMDJS:
define([
'jquery',
'underscore',
'Backbone'
], function($, _, Backbone) { ... });
Ciò presuppone che io abbia creato i percorsi nella configurazione richiesta:
require.config({
paths : {
jquery : 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min',
underscore : '../../libs/js/underscore/underscore.min',
Backbone : '../../libs/js/backbone/backbone',
}
});
Ho visto alcune implementazioni che non usano le versioni AMDJS e la cosa con quelle è che poiché non sono moduli asincroni, devi assicurarti che siano caricate nell'ordine corretto.
Credo che ciò non garantisca l'ordine corretto di caricamento delle dipendenze:
require({
baseUrl: '/'
},[
'jquery',
'app/views/movieRow',
'app/models/movie',
'libraries/backbone'
],
Poiché qualcosa è elencato come dipendenza, non significa che caricherà quando necessario. Con i moduli asincroni non è un problema, ma in questo esempio non l'ho visto menzionato, quindi supponiamo che non siano AMD. Questo modulo dipende da jQuery, movierow, film e spina dorsale. Ma se la spina dorsale cerca di caricare prima di jQuery ... (x_x) perché il mondo perché?
Ecco perché credo che Recome.js abbia un plugin chiamato Order! Al salvataggio. Con l'ordine! Puoi impostare le tue dipendenze e carica gli script in ... beh ... ordina. Qualcosa come questo:
require({
baseUrl: '/'
},[
'order!jquery',
'app/views/movieRow',
'app/models/movie',
'order!libraries/underscore', // <- Don't forget me!
'order!libraries/backbone'
]
Credo che in questo, il tuo modulo valuterà e garantirà che JQuery venga caricato prima, quindi sottolinea, quindi la spina dorsale. Nessuna garanzia per movierow o film sebbene in questo caso, chi se ne frega? :-)
Uso le forche AMDJS-Backbone e Amdjs-Undercore per il mio progetto, quindi di solito le metto nel define[]
E funziona senza intoppi. Requisitijs è davvero fantastico e ha ripulito il mio codice in modo significativo. Ovunque vado a Jrburke, lo scrittore di Requisitejs viene visualizzato ovunque ed è sempre un Super Duper disponibile con i suoi commenti su tutto ciò che riguarda Requisito.js. E intendo tutto. La mia teoria è che è telepaticamente connesso per richiedere e ogni volta che si verifica una nuova istanza di Requisitijs sul Web, ha un accesso immediato a tale conoscenza. Scommetto che se questa discussione thread continuerà, sarebbe apparso anche per salutare.
Il mio disclaimer è che sono anche nuovo da richiedere e potrei essere fraintendendo le cose. Ma da quello che so, ho pensato che questi puntatori e informazioni extra potessero aiutare le persone a mettere insieme un codice migliore usando i requisiti.
RIFERIMENTI: