Backbone.js & Requisite.js: come posso trasformare i miei modelli, viste e collezioni da richiedere.

StackOverflow https://stackoverflow.com/questions/7353151

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.

È stato utile?

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:

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top