Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove the use of Jquery in Vue objects #422

Merged
merged 2 commits into from
May 9, 2017
Merged

Remove the use of Jquery in Vue objects #422

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
efd1c5b
We don't use jquery anymore for focus on the iframe
martinRenou May 4, 2017
925870a
Rename focus_iframe event to entry_clicked
martinRenou May 5, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion remoteappmanager/static/js/home/controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ require([
var model = new models.ApplicationListModel();

// Initialize views
new application_list_view.ApplicationListView({ // jshint ignore:line
var app_list_view = new application_list_view.ApplicationListView({
el: '#applist',
data: function() { return { model: model }; }
});
Expand All @@ -51,5 +51,7 @@ require([
ga_observer.trigger_application_starting(application.app_data.image.name);
});

app_list_view.$on('entry_clicked', function() { app_view.focus_iframe(); });
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

only clicked. You don't need another event. clicked is already an event.

Copy link
Member Author

@martinRenou martinRenou May 8, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can rename it clicked, but I will still need to emit the event with the $emit method. You want me to rename it ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As I said in the other comment, it sounds like "clicked" or "click" are not built-in events for the $on method of Vue. I think it's not really related to the javascript method addEventListener("click", myFunction). We can only use the $onmethod with custom events and trigger them with the $emit method.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As a design, it makes no sense, but we can't do otherwise. I'd say add a comment as a reminder if someone is confused for the same reason.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also tried app_list_view.$on('click.native', myFunction) according to the documentation but it sounds like the .native modifier doesn't work for $on, but only for v-on in templates.


model.update();
});
2 changes: 1 addition & 1 deletion remoteappmanager/static/js/home/views/application_list_view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ define([
' <!-- Application list -->' +
' <li v-for="(app, index) in model.app_list"' +
' :class="{ active: index === model.selected_index }"' +
' @click="model.selected_index = index; $(\'iframe\').focus();">' +
' @click="model.selected_index = index; $emit(\'entry_clicked\');">' +

' <span :class="app.status.toLowerCase() + \'-badge\'"></span>' +

Expand Down
11 changes: 8 additions & 3 deletions remoteappmanager/static/js/home/views/application_view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
define([
'jquery',
"urlutils",
"utils",
'../../components/vue/dist/vue.min'
], function ($, urlutils, utils, Vue) {
], function (urlutils, utils, Vue) {
"use strict";

var ApplicationView = Vue.extend({
Expand Down Expand Up @@ -94,10 +93,16 @@ define([
},
get_iframe_size: function() {
return utils.max_iframe_size();
},
focus_iframe: function() {
var iframe = this.$el.querySelector('iframe');
if(iframe !== null) {
iframe.focus();
}
}
},

updated: function() { $('iframe').focus(); }
updated: function() { this.focus_iframe(); }
});

return {
Expand Down