I am trying to understand how jointJS works, specifically this example logic circuit simulation
There are few parts which I am not quite sure what is happening.
_.invoke(graph.getLinks(), 'set', 'signal', 0);
Looking at the invoke function, 'set' and 'signal' should be the methodNames, but how can we use two methods at the same time?
graph.on('change:signal', function(wire, signal)
Translating this would be.. when the signal is changed, function(wire,signal) is run. As i'm quite new with Javascript, I don't know what is being passed (wire, signal) into this function and how it is obtained?
Thanks in advance
For your first question _.invoke(graph.getLinks(), 'set', 'signal', 0);
It's using the underscore.js function of invoke. It will take a list (your graph.getLinks() list) and invoke a method on each item in that list. The arguments are taken after the function. So in this case, you're getting all of the links on the graph, and then setting the signal to 0 for each one of them.
For your second command graph.on('change:signal', function(wire, signal)
From what i've worked with on joint, this is a backbone.js event. Where the function passes in for the change event. http://backbonejs.org/#Events-catalog Usually it's one of two items there in that list. The change event, or the change:attribute event. So this looks like a change:signal which is an attribute, so it's probably (model, view, options) is what it's passing in. If you're really curious of the data available, use chrome and set a breakpoint to inspect the variables being passed in.
Hope that helps.
For reference :
http://underscorejs.org/
http://backbonejs.org/
Related
html base
<html>
<head>
</head>
<body>
<input type="text" class="abc"/>
</body>
</html>
So I have my prototype object
function AnArray(){
this.anArray=[];
}
AnArray.prototype.getAnArray=function(val){
return this.anArray[val];
}
AnArray.prototype.setData=function(index,val){
this.anArray[index].data=val;
}
var objAnArray=new AnArray();
the object ends up looking like this
id: 1, pid: "questions-worth-asking", num: 1, data: null
and I'm trying to change an attribute in it like so
objAnArray.setData(0,$(".abc").eq(0).val());
When I've rune console.log messages using getAnArray() before and after the above line, it returns the same value as it has not been changed.
My question is how do you change attributes of a prototype object?
edit: This link led me down the right path http://www.gpickin.com/index.cfm/blog/websql-when-is-a-javascript-object-not-a-javascript-object
You're missing a lot of information from your post that makes it difficult to debug.
From my understanding the problem is that:
You want your jQuery object's value property to be stored in an array that you wrapped in an object.
You want to store this property with the setData function you wrote.
You want to retrieve that object by using the getAnArray function you wrote.
I don't think this is an issue with prototypes, but with the lack of information given to us, it could be any number of things. I wouldn't be surprised if you came back and said "Oh, it was something else completely."
I've made a fiddle that successfully sets and gets data from the anArray objects that you can use as an example.
Here are some problems you want to look at that will help you debug:
You don't set the anArray[index] object in this snippet. So if we are to take this at face value, the setData function should throw a ReferenceError.
You haven't told us if you're calling the setData function inside an event or right when the page loads. If it's the latter, then according to the html you posted at the top, you won't have any data in the input field yet. You need to call the setData function only when there's data in the field.
You might be calling the jQuery object outside of the $(document).ready(function(){ ... }) call so the value you're obtaining with $(".abc") call is undefined.
Give those a try and hopefully those work.
To make your questions easier to debug going forward:
Write all your experimental code in an isolated environment so that all the confidential content content doesn't have to be removed before posting.
Run your code and make sure it runs as expected.
Show us all of that code so that we know where all the data comes from and how each element interacts with the other elements. For example, we currently don't know how the anArray array is populated so I've had to make assumptions. We also don't know how id, pid, or "questions-worth-asking" comes from so there might be side effects from how those are loaded in.
Write your code using some sort of style guide to make it easier to read. This will also help improve debug time for you and will help prevent errors from silly mistakes that you might make.
Edit:
I know you're calling console.log before and after the setData method. Consider putting console.log inside the setData method as well.
AnArray.prototype.setData = function (index, val) {
console.log("Entering setData with: ", index, val, this.anArray[index]);
this.anArray[index].data = val;
console.log("Exiting setData with: ", this.anArray[index]);
};
It seems to me that the problem isn't in your javascript. You're saying that you ran a console.log before and after your setData call on objAnArray. Perhaps it has something to do with your HTML input element not being updated, or the data not coming through in time.
Like Keane said, we need more info about your set up and logic flow.
I have search for some sort of way to do this, but i can't make it work. It may seem simple but i don't know much about javascript so I have found very little information on the problem and I don't know were is the error at so i'll just briefly explain what it's supposed to do. First here is my code:
function showI(a){
$("#show").fadeIn();
$("#show .load").fadeIn();
$("#show").load("ajax/showi.php?id="+a,$("#show .load").fadeOut("fast"))
}
$('.List-item').on('click touchstart',function(){
var id=$(this).attr("id").split("list-").join();
showI(id);
})
So there's like a button with the class list-item which when click should open a new window with the showI function, but it doesn't(I used before the attribute onClick, but it didn't work on mobile so I changed it to .on(click touchstart))
Any help would be appreciate. (Don't know if this is replicated because i can't find a word to describe the problem)
This line:
$("#show").load("ajax/showi.php?id="+a,$("#show .load").fadeOut("fast"))
calls $("#show .load").fadeOut("fast") and then passes its return value into load as a second argument, exactly the way foo(bar()) calls bar and then passes its return value into foo.
If you're looking for a completion callback, you need to wrap that in a function:
$("#show").load("ajax/showi.php?id="+a, function() {
$("#show .load").fadeOut("fast");
});
I am trying to bind a property of an object to a property that's bound in an ArrayController. I want all of this to occur after the object has already been created and added to the ArrayController.
Here is a fiddle with a simplified example of what I'm trying to achieve.
I am wondering if I'm having problems with scope - I've already tried to bind to the global path (i.e. 'App.objectTwoController.objectOne.param3') to set the binding to. I've also tried to bind directly to the objectOneController (which is not what I want to do, but tried it just to see if it worked) and that still didn't work.
Any ideas on what I'm doing incorrectly? Thanks in advance for taking the time to look at this post.
So in the example below (I simplified it a little bit, but same principles apply)... The method below ends up looking for "objectOne" on "objectTwo" instead of on the "objectTwoController".
var objectTwoController: Em.Object.create({
objectOneBinding: 'App.objectOne',
objectTwoBinding: 'App.objectTwo',
_onSomething: function() {
var objectTwo = this.get('objectTwo');
objectTwo.bind('param2', Em.Binding.from('objectOne.param3'));
}.observes('something')
});
The problem is that you can't bind between two none relative objects. If you look in the "connect" method in ember you will see that it only takes one reference object (this) in which to observe both paths (this is true for 9.8.1 from your example and the ember-pre-1.0 release).
You have few options (that I can think of at least).
First: You can tell the objects about each other and in turn the relative paths will start working. This will actually give "objectTwo" an object to reference when binding paths.
....
objectTwo.set('objectOne', this.get('objectOne');
....
Second: You could add your own observer/computed property that will just keep the two in sync (but it is a little more verbose). You might be able to pull off something really slick but it maybe difficult. Even go so far as writing your own binding (like Transforms) to allow you to bind two non-related objects as long as you have paths to both.
_param3: function(){
this.setPath('objectTwo.param2', this.getPath('objectOne.param3');
}.observes('objectOne.param3')
You can make these dynamically and not need to pre-define them...
Third: Simply make them global paths; "App.objectOneController.content.param3" should work as your binding "_from" path (but not sure how much this helps you in your real application, because with larger applications I personally don't like everything global).
EDIT: When setting the full paths. Make sure you wait until end of the current cycle before fetching the value because bindings don't always update until everything is flushed. Meaning, your alert message needs to be wrapped in Ember.run.next or you will not see the change.
So with the new ajax things we have to reinitialize our Javascript event handlers every time an ajax call is made, since an ajax call can result in pretty heavy redrawing of the whole page resulting in uninitialized objects.
Have a look at this jsfiddle:
Javascript eventhandler added multiple times to the same object
This is what I have and it seems to work, but since it is going to be used with everything we have: I wanna make sure that it is the right solution.
E.g. the global defined variable
MyCompany.field.bindedOnfocusSelector = MyCompany.field._focusEventHandler.bindAsEventListener(MyCompany.field);
just feels wrong. And it lacks the possibility to hand more function arguments.
As another poster suggested the prototype $(smth).on(event) I have problems to get it working - I remember problems crossbrowser wise (e.g. on IE 8 things didn't work which worked in Firefox) and even in this simpler example jsFiddle problem with on('focus'):
How about you register an ajax responder, and add the methods after a request has completed
Ajax.Responders.register({
onComplete: function(transport) {
MyCompany.field._initTextInputFields();
}
});
UPDATE
Ok, taking into consideration your comment, how about observing the whole page i.e. body and determining if a input event occurred, ex:
$("#body").on("focus", "input[type=text]:not([readonly])", function(event, element) {
// ....
});
I think this will help you as you only add one observer, and never need to remove it, all your logic can be contained.
PS: note that Event.on is only available in prototype 1.7
UPDATE
ok, what if you just check the click, keyboard won't work now though but i think this is a viable solution
Updated Fiddle
I have created a slideshow widget, using jQuery.UI widgets that works with window.setInterval.
I am trying to have more than one slideshow in the same page and i get the following results:
If I try invoking the same widget for both of my divs with images:
$('#div1').slideshow();
$('#div2').slideshow();
none of them work;
I have cloned the definition of my widget and named it slideshowsmall
$('#div1').slideshow();
$('#div2').slideshowsmall();
and only the second one works.
my widget code is in this pastebin, but i really think the problem, at least in the second try, has to do with setInterval
Thanks
Having multiple setInterval() by itself cannot be causing problems. It is more likely to have something to do with the code it's executing (and your widget code being non-english makes it very hard to analize and comprehend).
setInterval() returns and integer ID of the "interval", so that you can later clearInterval(...) by passing this ID. This scenario was implemented exactly for multi-interval uses. More details on MDC
As per your widget code when setInterval calls the ChangeLeft/Right.. method the slideshowdiv variable always points to the last element on which slideShow is called. the reason for this is the way you are invoking change methods which is not adviceable.
Please use the below code to call your change method it should solve your problem. You will notice I am passing the slideshowdiv object to change methods.
this.options.timer = window.setInterval(function () {
ChangeImageLeft(velocidade, slideshowdiv);
}, intervalo);
Let me know if you need more info.