Kan jQuery-UI-functie niet aanroepen in de weergave Backbone.js

Ik heb een webapp en ik gebruik Backbone.js.

In de Login-weergave gebruik ik jQuery UI-knop. In de sjablooncode roep ik $ (". Btn"). Button (); zonder probleem.

Maar als ik wil handelen nadat de gebruiker op de knop klikt en belt:

$('#btnSubmit').button({
   disabled : true,
   label : "Logging in..."
});

Ik krijg de foutmelding: " Uncaught TypeError: Object [object Object] heeft geen methode 'knop' " (gekopieerd van chrome devTools console).

The weird thing is that if I run this code lines in chromeDevtools console, it works perfectly! I think it is related to the DOM and the state I'm in when the even is firing. Any idea what is the problem?

Enkele details:

Including the jQuery UI library:
define([
   'jQuery',
   'jQueryui',
/*...*/
], function($, jQueryui,...) {
var loginView = Backbone.View
   .extend({
/*...*/
   events : {
      "click #btnSubmit" : "login"
      },
/*...*/
   login : function() {
      $('#btnSubmit').button({
         disabled : true,
         label : "Logging in..."
         });
   },
}
});

   return new loginView;
});

Bewerken

Ik probeerde Stephen-oplossing en probeerde te gebruiken:

this.$el.find('#btnSubmit').button({
     disabled : true,
     label : "Logging in..."
});

Werkt nog steeds niet. Ik denk dat dit betekent dat ik geen toegang heb tot alle gebruikersfunctionaliteit van jQuery.

0

2 antwoord

Een ding om te proberen is om het element als volgt op te zoeken:

this.$el.find('#btnSubmit').button({
     disabled : true,
     label : "Logging in..."
});

Zelfs als het document niet is gekoppeld aan de DOM, kun je het opzoeken. Dat is mijn enige gok, omdat ik ervan uitga dat alle jQuery-exports correct zijn ingesteld.

0
toegevoegd
Wel, het lijkt erop dat u requirejs gebruikt. jQuery "werkt niet" (tenminste de laatste keer dat ik het controleerde) met requirejs, er is een beetje werk nodig om ervoor te zorgen dat requirejs weet wat te retourneren wanneer u jQuery opneemt. Hetzelfde met jQuery ui. Dus de veronderstelling is dat je dat al hebt doorgewerkt.
toegevoegd de auteur Stephen, de bron
Probeer als een gedachte "console.log ($. Browser)" voordat u uw weergave definieert. Je zou een heleboel informatie over je browser moeten krijgen. Als u een ongedefinieerd/leeg/leeg antwoord krijgt in uw console, weet u dat jQuery niet correct is gekoppeld.
toegevoegd de auteur Stephen, de bron
Nou, helaas dan ben ik net zo stumped. Ik zou meer code moeten zien, hoe het jQuery-ui-spul is aangesloten, hoe je config voor requirejs eruit ziet, enz. De laatste gedachte die ik heb is die over mijn project dat jQuery ui gebruikt, we hebben een 'shim 'gespecificeerd in de config: {shim: {' lib/jquery-ui ': {deps: [' jQuery ']}}} Weet niet zeker of dat zou helpen ... maar het is het proberen waard.
toegevoegd de auteur Stephen, de bron
bedanken. wat bedoel je met "jQuery-exports zijn goed ingesteld"?
toegevoegd de auteur Roy Tsabari, de bron
Ik denk dat het probleem niet bij jQuery zit, omdat het aanroepen van $ ('. Loading'). Show (); werkt. Het probleem is alleen met jQueryUI
toegevoegd de auteur Roy Tsabari, de bron

Ik vond de fout: Ik zou de jQueryUI-referentie moeten gebruiken die ik op deze manier aan de functie geef:

jQueryui('#btnSubmit').button({
    disabled : true,
    label : "Logging in..."
});
0
toegevoegd