I'm trying to use Hammer.js with Backbone , Marionette and Require.js
When i initialize events , the event is not fired .
I use Hammer.js and jQuery.hammer extension
I would like to do something like that :
edit :
events: {
"tap .menu ": " handleTap "
},
handleTape: function(){
console.log("Hammer time!");
},
onRender: function () {
// Instantiate Hammer
$ This el.hammer().
}
To reach this goal , i include Hammer.js first , then jquery.hammer before Backbone and Marionette.js. There is no error in debug console, just my event is not detected
There is way to bind hammer's events without doing something like :
onRender: function () {
// Instantiate Hammer and bind tap event
this.$el.hammer().bind('tap .menu', function () {
console.log('Hammer Time!'
}).
}
Related
I need to show a ext lib Dialog after the user select a combobox (I use a Select2 of BootStrap for XPages).
The alert code function work well, but the XSP.openDialog not .
I've found a old stackoverflow question about this but I don't understand how can I solve my problem. Any ideas?
Tnx a lot
$(document).ready(
function() {
x$("#{id:comboBox1}").select2().on("change", function(e) {
XSP.allowSubmit();
XSP.partialRefreshPost("#{id:divView}",{
onStart: function () {
// do something when the partial update is finished
//alert("start...") -- this WORK
XSP.openDialog("#{id:dialog1}"); //this doesn't work
},
onComplete: function () {
// do something when the partial update is finished
//alert("stop...") -- THIS WORK
XSP.closeDialog("#{id:dialog1}"); //this doesn't work
}
});
} )
}
);
I've found a solution with XSP.allowSubmit();, magic Sven Hasselbach!:
$(document).ready(
function() {
x$("#{id:comboBox1}").select2().on("change", function(e) {
XSP.partialRefreshPost("#{id:divView}",{
onStart: function () {
// do something when the partial update is finished
//alert("start...") -- this WORK
XSP.allowSubmit();
XSP.openDialog("#{id:dialog1}");
},
onComplete: function () {
// do something when the partial update is finished
//alert("stop...") -- THIS WORK
XSP.allowSubmit();
XSP.closeDialog("#{id:dialog1}");
}
});
} )
}
);
Hello I have a problem with Select2 component because this code that capture onChange event:
$(document).ready(
function() {
x$("#{id:comboBox1}").select2().on("change", function(e) {
XSP.partialRefreshPost("#{id:divView}",{
onStart: function () {
// do something when the partial update is finished
alert("start...")
},
onComplete: function () {
// do something when the partial update is finished
alert("stop...")
}
});
} )
}
);
Generate in Google Chrome this error that doesn't resolve x$() function (If you reload the page work)
In Internet Explorer work well..I don't know how solve.
Uncaught TypeError: undefined is not a function home.xsp:129x$ home.xsp:129j jquery-1.11.0.min.js:2k.fireWith jquery-1.11.0.min.js:2n.extend.ready jquery-1.11.0.min.js:2K jquery-1.11.0.min.js:2
Have someone any suggest?
Tnx you
Try using XSP.addOnLoad() instead of $(document).ready() in order for your function to run when the document has been fully loaded by XPages.
A possible node.js/backbone.js/socket.io scoping issue I can't wrap my head around.
(snippet from) server.js
var app = express();
var server = http.createServer(app);
io = io.listen(server);
(snippet from) index.html
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect(window.location.origin);
</script>
(snippet from) js/views/map.js
(function() { // self invoking anonymous function so we are able to
// create the private variable "map" that can be shared here
var map;
var webSocket = window.socket;
window.MapView = Backbone.View.extend({
initialize: function() {
this.render();
webSocket.on("marker dropped", this.propNewMarker);
},
events: {
"click .dropmarker" : "dropMarker"
},
dropMarker: function(event) {
console.log("This fires!!!");
webSocket.emit('marker dropped', { my: 'data' });
},
propNewMarker: function() {
console.log("someone dropped a marker (im in map.js)");
},
(snippet from) MapView.html
Drop marker
Behavior I am going for
Clicking on the "dropmarker" button in MapView.html should instigate the webSocket.emit action in dropMarker. (it fires off the console.log without any problems)
Tested
When I add
io.sockets.emit('marker dropped', { 'message': 'ello wurldz' });
into server.js, the propNewMarker function in map.js is fired correctly.
Preliminary conclusion
It seems that I am struggling with a scoping issue at the level of the buttonclick.
I'm not able to fire a websocket event there.
Any thoughts ? or should I offer more insights in the code before this can be debugged? (tried to keep it as clean as possible)
This doesn't look like an issue with the scope but in fact how you are using the socket
In order for propNewMarker to be called the server must emit a message on marker dropped
On the server if you add
io.sockets.on('connection', function (socket) {
socket.on('marker dropped',function(msg){
socket.emit('marker dropped',msg);
});
});
Then the client should respond just fine to the event. I did some testing and it looks like your scoping is just fine.
I'm trying to load and render additional views async and append them to the ItemView.
Simplified code - why is $el not defined in the require() block in render() - what am I missing here? Am I not using RequireJS properly, or Marionette, or just my inexperience with javascript?
What is the recommended way of doing this? It needs to be dynamic as additional section views could be available at runtime that I don't know about yet as registered by plugins.
define(['require','marionette', 'App', 'swig', 'backbone.wreqr','text!./settings.html'],
function (require,Marionette, App,Swig, Wreqr, settingsHtml )
{
var sectionViews = ['./settingscontent/GeneralView'];
var SettingsView = Marionette.ItemView.extend(
{
template: Swig.compile(settingsHtml),
commands: new Wreqr.Commands(),
initialize: function ()
{
this.commands.addHandler('save', function (options, callback)
{
callback();
});
Marionette.ItemView.prototype.initialize.apply(this, arguments);
},
render: function()
{
Marionette.ItemView.prototype.render.call(this);
var $el = this.$el;
var self = this;
require(sectionViews, function (View)
{
$el.find('div.tab-content').append(new View(self.model).render().$el);
// $el is not defined
// self != outer this - $el is an empty div
});
return this;
}
}
return SettingsView;
})
Why are you trying to overload itemview.render?
Why not use the built in onrender event
https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.itemview.md#render--onrender-event
from that documentation :
Backbone.Marionette.ItemView.extend({
onRender: function(){
// manipulate the `el` here. it's already
// been rendered, and is full of the view's
// HTML, ready to go.
}
});
seems easier and more typical of marionette usage
You need to bind this inside the function to the SettingsView object. Something like:
render: function()
{
Marionette.ItemView.prototype.render.call(this);
var $el = this.$el;
var self = this;
require(sectionViews, _.bind(function (View)
{
...
}, this));
return this;
}
The local variables will not be visible inside the bound function. You can use this and this.$el safely however.
I made and initialized my model with the "change:status" event like this
Box = Backbone.Model.extend({
initialize: function() {
this.on('change:status', this.changed, this);
},
changed: function() {
$('.changed').text('I changed'); // Testing if the 'change:status' is fired
}
});
My Box collections is setup this way
BoxList = Backbone.Collection.extend({
model: Box,
initialize: function() {
this.on('add', this.addOne, this);
socket.on('box-status-change', this.boxStatusChanged, this);
},
boxStatusChanged: function(box) {
Boxes.each(function(model) {
if(model.get('changed') == box.changed) {
model.set({status: 'changed'});
}
});
},
addOne: function.... // Some code removed
});
Boxes = new BoxList();
Checking in Chromes web developer tools, the attribute status was set to changed properly but an error Uncaught TypeError: Object #<Object> has no method 'apply' occured. The change:title event of the model was not fired. Is there something I miss when adding the event to the model?
By the way, I'm using the backbone-iosync.js for the Backbone.sync method...
Backbone uses an internal attribute called changed on models:
http://backbonejs.org/#Model-changed
changed model.changed
The changed property is the internal hash containing all the
attributes that have changed since the last "change" event was
triggered. Please do not update changed directly. Its state is
maintained internally by set and change. A copy of changed can be
acquired from changedAttributes.
Rename your callback to something else and that works
Box = Backbone.Model.extend({
initialize: function() {
this.on('change:status', this.changedState, this);
},
changedState: function() {
console.log('changed');
}
});
A Fiddle to reproduce your problem http://jsfiddle.net/NrTPk/ and a modified version http://jsfiddle.net/NrTPk/1/