Some extremely simple problem for those experienced with backbone,
but still, an answer here would very helpeful. Not looking for an functional answer, but more about what's really happening on this specific example.
With the following code (some simple add/remove from favorite)
render: function() {
$(this.el).html(this.model.get('name'));
$(this.el).append("<span class='unfav'>remove</span>");
$(this.el).append("<span class='fav'>add</span>");
if( this.model.get("selected") == true ){
$(this.el).addClass("selected");
} // Should we really need to have an 'else' conditions here that removes the clas :( ? sound weird to me.
return this;
}
Full code here http://jsfiddle.net/eHAfY/3/
(thanks to #cymen for the codebase)
After adding an element,
Don't get why the item gets changed when I click on 'Add', and does not when I click on remove : if there is a condition that have effect when true, why it is the class' still here when false ?
Your render method wipes its inner HTML with $(this.el).html(...); which is what render methods are usually expected to do.
With $(this.el).addClass("selected"); you modify the external container only when model.selected is true, and your view has no way to know that it should remove this class when the condition is false.
Related
So I'm in a bit over my head, even after as much research as I can I'm not sure that my question will even make that much sense.
I'm making a card game with Meteor and have a deck that is collected, shuffled, and dealt into the players hand arrays, then the database is updated. Then, in order to give animation to each card so that it looks smooth, each card is given a 'top' and 'left' property using template helpers modifying the CSS (as opposed to using templates to make things just appear and disappear).
My issue is - When I call the 'deal' function, only about half the cards go where they are supposed to. HOWEVER, if I refresh the page everything is right where it should be.
So the variables are correct, but the reactive-ness isn't quite working right? Like it seems like the reactive variable is triggering too early, before all the parameters are loaded?
Any suggestions for how to either clean up the animation system, or just trigger a manual refresh after all the dealing is done?
Again, I apologize for the uncertainty about everything.
There are 45 cards in the deck all trying to execute at once. The template is set up overall like this:
<template name = 'card'>
<div class = 'card' style = '
top:{{positionTop}}px;
left:{{positionLeft}}px'>
</div>
</template>
With helpers like this:
Template.card.helpers({
'positionLeft':function(){
if ('partner' === this.location){
return this.position*50
} else if ('hand' === this.location){
return this.position*25
}
},
'positionTop':function(){
if ('player' === this.owner){
return 200
} else if ('opponent' === this.owner){
return 400
}
}
});
I have the following code snippet (just to illustrate the question, it is not full production code) for the CkEditor plugin:
onOk: function() {
var dialog = this,
element = dialog.element;
.........
element.setStyle('width', width+'%');
element.setStyle('text-align', align)
dialog.commitContent(element);
}
In this small code snippet a modification of one dialog element occurs using setStyle() method, after which commitContent is triggered.
So, the questions are:
Do I understand correctly, that each setStyle call here triggers
element rerender (repaint) since this element already exists in
DOM?
What is the purpose of commitContent() ckEditor method? Just an event for dialog elements to store some data?
setStyle
I belive that setStyle repaints the components already existing in the DOM, have a look at this example (that I have taken from the official documentation):
var element = CKEDITOR.document.getById( 'myElement' );
element.setStyle( 'background-color', '#ff0000' );
element.setStyle( 'margin-top', '10px' );
element.setStyle( 'float', 'right' );
It first gets the element from the doc and Then sets the style, so basically it is repaiting it triggering events.
commitContent
From the official documentation:
Calls the CKEDITOR.dialog.definition.uiElement.commit method of each
of the UI elements, with the arguments passed through it. It is
usually being called when the user confirms the dialog, to process the
values.
Hope this helped you!
I'm building a proof of concept test with CasperJS and I'm trying to wrap my head around when things are available and when they are not.
I'm a bit fuzzy on why evaluate() is required and why one cannot just get a page and go to town with document.querySelectorAll(), but that ends up giving me a nodeList with a length of zero... even after casper.echoing out the HTML and SEEING plenty of matching selectors.
Right now, I'm trying this:
var tile;
var pid;
casper.waitForSelector('.m-product-tile', function() {
tile = this.evaluate(function() {
return __utils__.findOne('.m-product-tile');
});
pid = this.evaluate(function()
return __utils__.findOne('.m-product-tile').getAttribute('data-pid');
});
//do cools stuff like click() on tile and make sure the URL has the pid in it
});
But this feels wrong as I am not sure __utils__.findOne() will always return the same element.
I'd love to be able to do this instead:
pid = tile.getAttribute('data-pid');
But when I attempt that, I get an error:
uncaughtError: TypeError: 'undefined' is not a function (evaluating 'tile.getAttribute('data-pid')')
Did tile somehow cease to be a DOMNode with a getAttributes method? Using typeof tile, it still thinks it's an object. I echoed out the DOMNode and it has a getAttributes key.
The code in the first example DOES work with getAttribute... so why does tile morph into something that no longer has a getAttributes method?
http://casperjs.readthedocs.org/en/latest/modules/casper.html#evaluate provides a pretty good answer... but still, I'd like to know why, if what the page is passing back, is a DOMNode, why can't I treat it like one?
I am trying to remove an element on AJAX success which was loaded and attached to the document during a previous AJAX call.
My code looks something like this:
$("#jobs-table-body").on("click", ".one-rc-button", function() {
var ctx = $.parseJSON($(this).siblings(".context").html());
$("#one-rc-candidate-id").val(ctx.candidateId);
$("#one-rc-job-id").val(ctx.jobId);
var loader = $("#wrapper").loader();
$.post($("#one-rc-form").attr("action"), $("#one-rc-form").serialize(), function(result) {
loader.remove();
if(result.success) {
// This works and returns 1
alert($("#candidate-row-" + result.rejectedCandidateId).length);
// This doesn't seem to be doing anything
$("#candidate-row-" + result.rejectedCandidateId).remove();
} else {
//$("#one-jc-messages").html(result.error);
}
});
});
The elements .one-rc-button and #candidate-row-<candidateId> were loaded by a previous AJAX call and they are attached to the document as I can very well see them on my page.
Now, on click of the previously generated .one-rc-button, I trigger a second AJAX call (which works fine) and on result.success, I want to delete the #candidate-row-<candidateId> (which is within the previously generated parent element).
The alert works and returns 1. So I know for sure that the selector is fine and it is matching one unique element.
What I don't understand is why it is unable to remove the element from the page.
Observations
I use Firefox 10.0.2 where this problem is reproducible.
On IE 8, it works (element gets removed)
On debugging the script on Firebug, I can verify that I have got a handle to the right eleemnt.
Try using FireBug to set a breakpoint on that line so you can see exactly what it's getting from that selector. Ideally break up the statement first, like this:
var unwantedDiv = $("#candidate-row-" + result.rejectedCandidateId);
unwantedDiv.remove(); // <-- Set a breakpoint on this line
You can then look at the unwantedDiv variable in the watch pane on the right of the firebug debugger and see what it is, what methods it has/has not got etc. I would assume that you are not getting back exactly what you think you are, possibly because of how you attached the div after the previous AJAX call. More information about JavaScript debugging with FireBug here.
Another option is to turn on strict warnings in the firebug console and see if you get any 'undefined method' errors, which don't stop the show on FireFox, but just bounce you out of that function. Do you get an error in IE?
Solved it by a really ugly workaround. I am still not sure what causes this behaviour.
if(result.success) {
var removeThis = $("#candidate-row-" + result.rejectedCandidateId);
removeThis.remove();
removeThis = $("#candidate-row-" + result.rejectedCandidateId);
if(removeThis.length != 0) {
removeThis.remove();
}
}
Now it works on both Firefox and IE.
I was wondering if anyone has found a solution or example to actually populating the input box of a slider and having it slide to the appropriate position onBlur() .. Currently, as we all know, it just updates this value with the position you are at. So in some regards, I am trying to reverse the functionality of this amazing slider.
One link I found: http://www.webdeveloper.com/forum/archive/index.php/t-177578.html is a bit outdated, but looks like they made an attempt. However, the links to the results do not exist. I am hoping that there may be a solution out there.
I know Filament has re-engineered the slider to handle select (drop down) values, and it works flawlessly.. So the goal would be to do the same, but with an input text box.
Will this do what you want?
$("#slider-text-box").blur(function() {
$("#slider").slider('option', 'value', parseInt($(this).val()));
});
Each option on the slider has a setter as well as a getter, so you can set the value with that, as in the example above. From the documentation:
//getter
var value = $('.selector').slider('option', 'value');
//setter
$('.selector').slider('option', 'value', 37);
UPDATE:
For dual sliders you'll need to use:
$("#amount").blur(function () {
$("#slider-range").slider("values", 0, parseInt($(this).val()));
});
$("#amount2").blur(function () {
$("#slider-range").slider("values", 1, parseInt($(this).val()));
});
You'll need to use Math.min/max to make sure that one value doesn't pass the other, as the setter doesn't seem to prevent this.
You were almost there when you were using the $("#slider-range").slider("values", 0) to get each value. A lot of jQuery has that kind of get/set convention in which the extra parameter is used to set the value.
I've done some work around the jQuery UI slider to make it accept values from a textbox, it may not be exactly what you were after but could help:
http://chowamigo.blogspot.com/2009/10/jquery-ui-slider-that-uses-text-box-for.html
$slider = $("#slider");
$("#amountMin").blur(function () {
$slider.slider("values", 0,Math.min($slider.slider("values", 1),parseInt($(this).val()) ) );
$(this).val(Math.min($slider.slider("values", 1),parseInt($(this).val())));
});
$("#amountMax").blur(function () {
$slider.slider("values",1,Math.max($slider.slider("values", 0),parseInt($(this).val()) ) );
$(this).val(Math.max($slider.slider("values", 0),parseInt($(this).val())));
});
I just used martin's code and updated the id to #slider also added the math.max as he suggested so the sliders won't overlap.