the Javascript MVC microframework that does just enough
Home Page: http://hay.github.io/stapes
License: MIT License
This library is deprecated and will not be updated anymore
Archived documentation available here: http://hay.github.io/stapes/
Hey,
I've come across some times where I'm pushing an array of objects, but some of these objects have already been added to my Stapes model. (eg: JSON response from server). This means create events get fired for objects that are already added, and the model piles up with duplicates.
What would be great is to be able to specify a property name to use for the key. For example,
var model = Stapes.create();
var todos = [
{ id: 'uid1', details: "Do dishes" },
{ id: 'uid2', details: "Get milk" },
{ id: 'uid3', details: "Wash car" }
];
model.push( todos, 'id' );
model.getAll(); // { "uid1": { id: 'uid1', details: "Do dishes" }, "uid2": {...What would also be great is some kind of flag to set if you want objects that aren't in the pushed array to be removed.
eg:
// ... continuing from above
todos.shift(); // first todo removed
model.push( todos, 'id', true );
// remove event fired for todo with id = "uid1"
model.getAll(); // { "uid2": { id: 'uid2', details: "Get milk" }, "uid3": {...Firefox 25.0.1 is in use.
Hi, first of all, here is a simple test case:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script src="stapes.js"></script>
<script>
var A = Stapes.subclass({
constructor: function () {
A.parent.constructor.call(this);
}
});
var B = A.subclass({
constructor: function () {
B.parent.constructor.call(this);
}
});
var C = B.subclass({
constructor: function () {
C.parent.constructor.call(this);
}
});
var o1 = new A(); // _guid === 1
var o2 = new B(); // _guid === 3
var o3 = new C(); // _guid === 6
</script>
</body>
</html>Due to the mechanism of Stapes, when instantiating a subclass that calls its parent's constructor, it adds unnecessary empty objects to _.attributes and _.eventHandlers. As far as we understood this issue is due to calls to _.addGuid( this, true ) that are triggered through the dynamically generated constructor of subclasses.
In the example above, we can see that the deeper our subclasses are, the more we leak (and that's understandable).
At first I thought of using
// If this class has events add a GUID as well
if (this.on) {
_.addGuid( this, true );
}As default constructor of _.Module (the default Stapes superclass) and use the following as realConstructor:
var realConstructor = props.hasOwnProperty('constructor') ? props.constructor : superclass.constructor;The thing with this solution is that it break "events on subclasses" unit test because Parent class' constructor does not call its superclass (Stapes) constructor.
Adding
Parent.parent.constructor.call(this);Fixes this test.
To end this ticket, it would be great if you can check that yourselves because we might not understand all inherent mechanism of Stapes and there might be a better solution to this.
Thanks.
(And great piece of work anyway!)
Hi!
I'm trying to make a parent/child link with Stapes.js.
Here is my code:
var Parent = Stapes.subclass({
constructor: function () {
this.name = 'syl';
}
});
var Child = Parent.subclass({
constructor: function (value) {
this.value = value;
console.log(this.name); // undefined
}
});
var child = new Child('a value');
How to access to the parent's name property from the child class? fiddle here.
Any ideas guys?
Thanks, regards.
Hey, cool project. I noticed that documentation site's nav menu is broken on smaller screen.
var Module = Stapes.subclass({
constructor : function(name) {
this.name = name;
}
// missing comma here ,
sayName : function() {
console.log('My name is: ' + this.name);
}
});
Hi
I love Stapes, but its submodule behaviour is really getting me down. I'm pretty sure this is a bug, and I'm pretty sure I know what's causing it.
Here's the test case
http://jsfiddle.net/wellcaffeinated/4RhTq/
I expect sub-modules to store their_own values (attributes) using .set(). But this is not the case.
I think what's going on is that when module.create() is called, the instance._guid (line: 243) is defined... it's inherited, so the sub-module doesn't get its own guid.
I'm trying to use Stapes in a few projects... I'd appreciate an official fix for this soon.
Cheers!
The minified version of stapes is missing a semicolon at the end of the file. This is causing problems in my concatenated file.
Do you have any reccomendations on how to implement collections that bubble up events from their items? If I have a Todos collection with a bunch of Todo objects pushed into it right now I'm just doing
add: function(todo){
// bubble up change events
todo.on('change', function(){
this.emit('change');
}, this);
this.push(todo);
}
for more complex cases though this is going to cause a lot of issues.
Test case:
var Module = Stapes.subclass();
var module = new Module();
module.on({
'change:fruit': function (value) {
console.log('fruit changed: ' + value);
}
});
module.set('fruit', 'ORANGE');
module.remove();
generic change and remove events are triggered as documented, but namespaced events not.
First of all, hats off to you guys, I moved my jquery project in 3 days flat, I love the flexibility that Stapes gives me, and how easily it gets out of the way.
To me, Stapes seems as powerful as jquery, so I really feel that a plugin framework would do wonders for Stapes.
here's how I use stapes
myapp.Stapes contains all Stapes objects
myapp itself contains instantiated Stapes objects. So for example, myapp.conf is an instantiated myapp.Stapes.Config object.
Maybe we can use this pattern for the plugin framework?
This may be a matter of opinion, but when I call module.set({foo: 'bar', hello: 'world'}), I would expect all the attributes to get set before firing the 'change:foo' event. Otherwise if my handler for that event depends on hello, the object will be in a weird state where hello hasn't been updated yet.
For some reason e.scope is always the same no matter which module is emitting the event. It seems like after the first emit of the event the scope gets locked and used for all future events
I recently started to use stapes.js with rivets.js (data-binding) on a small project, one of the common tasks is to append an array of objects (from json response) to an existing array of objects (say for infinite scroll).
In order for rivets to update data-binding automatically and keep objects in order (so we can iteration it using input order), I copy the existing array and concat it with new array.
var old = self.get('items');
var append;
if(old)
append = old.concat(items);
else
append = items;
self.set('items', append);
Is there a better way using push (that guarantee orders)? any performance impact when setting large array?
the first example at http://hay.github.io/stapes/#m-extend
is:
Module.extend({
"names" : ['claire', 'alice']
"sayName" : function(i) {
console.log( "Hello " + this.names[i] + "!" );
}
});
var module = new Module();
module.sayName(1); // 'alice'
apart from that there is missing a comma after the names value, this example cant run because you let call the instance the class method.
Thats exactly what extend is not made for, isnt´t it ?
Thats also the reason this example will not run.
I am so picky, because the documentation is the first thing you have a look at.
I want use stapes for a quite large project, but if documentation lacks in these basics ...
best, felix
I have a small web app where both the view and the controller subscribes to two events (structure copied from the todos example).
This code has no effect: this.on(.... Nothing is printed in the console.
But this does work:this.settingsView.on(.... Logging to console works as expected.
The controller:
// The Controller object which creates a View and Model
var FortnoxSettingsController = Stapes.subclass({
'constructor' : function() {
this.settingsView = new FortnoxSettingsView();
this.settingsStore = new FortnoxSettingsStore();
this.settingsModel = new FortnoxSettingsModel( this.settingsStore.load() );
this.bindEventHandlers();
},
'bindEventHandlers': function() {
// settingsController subscribes to `database_id_update`
this.on({
'database_id_update': function(value) {
logDebug('Controller received database_id_update: '+ value);
logDebug('Saving model to store: ' + JSON.stringify(this.settingsModel.getAll()) );
this.settingsStore.save( this.settingsModel.getAll() );
}
});
// settingsController subscribes to `api_token_update`
this.on({
'api_token_update': function(value) {
logDebug('Controller received api_token_update: '+ value);
logDebug('Saving model to store: ' + JSON.stringify(this.settingsModel.getAll()) );
this.settingsStore.save( this.settingsModel.getAll() );
}
});
// settingsView subscribes to `database_id_update`
this.settingsView.on({
'database_id_update': function(value) {
logDebug('View received database_id_update:' + value);
}
}, this);
// settingsView subscribes to `api_token_update`
this.settingsView.on({
'api_token_update': function(value) {
logDebug('View received api_token_update:' + value);
}
}, this);
}
});
The full app is available here: https://github.com/colmsjo/wip/tree/master/JavaScript/Fortnox_API_test
Any help is greatly appreciated.
Is it by design that push and set add data to the same place? coll.set('something', 'something') after doing coll.push causes all of the data to be mixed together which causes issues when trying to do data binding on collections. Is there a recommended way to do collections without having to reimplement a lot of the core stapes stuff?
No problem here, just wanted to say thank you giving us this library, it's really given me everything I need to create clean, beautiful JS code. Keep up the great work!
The codes below won't trigger an update or change event on dog as expected.
var Dog = Stapes.subclass();
var dog = new Dog();
dog.set('cat', []);
var cat = dog.get('cat').push('Tom');
dog.set('cat', cat);
As I go through the Stapes code, I find that the cat in dog has already changed when I did the push action.
Follow up to #25
Here's an example of inline documentation using CSS Tooltips:
http://josher19.github.com/stapes/#m-mixinEvents
Let me know what you think.
I think your app.js code might have some 'issues' regarding dom traversal on older versions of IE:
nodes = Array.prototype.slice.call(nodes, 0);*** Edit ***
Should've RTM, I see now that .extend() returns the extended object, not the result of .create(). Works as expected if I don't chain the two methods.
Love the minimal approach Stapes takes to MVC, but I'm struggling with events. Seems to me that module.create() should copy event handlers that have been set on the template object. E.G.
module = Stapes.create().extend();
module.on("change:name", function() {console.log(this.get('name'));});
module.set("name", "foo"); // console reads "foo"
new_module = module.create();
new_module.set("name", "bar"); // to my mind, this should trigger the "change:name" event set aboveWithout a proper constructor, it's a bit onerous to add the events manually after an object is generated using .create()
It would seem that if you extend a class then subclass it, the static method which you added with extend do not appear;
var cls = Stapes.subclass({
});
cls.extend({
hello: function() {
return 'world';
}
});
var cls2 = cls.subclass({
})
var a = cls2();
console.log(a.hello());
TypeError: Object function constructor() {
// Be kind to people forgetting new
if (!(this instanceof constructor)) {
throw new Error("Please use 'new' when initializing Stapes classes");
}
// If this class has events add a GUID as well
if (this.on) {
_.addGuid( this, true );
}
realConstructor.apply(this, arguments);
} has no method 'hello'
https://github.com/hay/stapes/blob/master/index.html#L778
an module => a module
Under History heading (0.4) the link to "utility methods" is broken. Apparently you forgot to put the hash in the URL
Excerpt from the documentation: "Note that these events are also triggered on the main Stapes object, so you can use Stapes.on to catch events from these mixed-in objects as well."
However, the code doesn't work:
Stapes.on('sing', function(data, e) {
console.log("Singing from " + e.scope.name);
});Error message (Chrome 20.0/WinXP/32): "TypeError: Cannot read property 'sing' of undefined"
I'm talking of the link visible on: http://hay.github.com/stapes/
Hey!
All in the title! :)
> bower info stapes
bower not-cached git://github.com/hay/stapes.git#*
bower resolve git://github.com/hay/stapes.git#*
bower download https://github.com/hay/stapes/archive/v0.8.1.tar.gz
bower extract stapes#* archive.tar.gz
bower deprecated Package stapes is using the deprecated component.json
bower resolved git://github.com/hay/stapes.git#0.8.1
{
name: 'stapes',
version: '0.8.1',
main: './stapes.js',
homepage: 'https://github.com/hay/stapes'
}
Available versions:
- 0.8.1
- 0.8.0
- 0.7.1
- 0.7.0
- 0.5.1
- 0.2.1
There is a lot of pipework missing that makes project contribution difficult. I'm going to send a PR with the following fixes;
For now I'll configure each service on my own personal open source account, and then transfer ownership to you once the PR is merged (perhaps we can coordinate this on IRC/Skype, should only take 5-10 minutes). I'm foxx@freenode and cal.leeming@Skype.
I'm working on this now and will have a PR ready within the next few hours, if you have some spare time today to get this merged that'd be really helpful.
setting it on the prototype would enable a class-instance to walk up the dependency chain by just doing: .parent.parent.parent...
Try this:
var ClassA = (function() {
/**
* Private Variables
*/
var _a;
var ClassA = Stapes.subclass({
constructor : function(argA) {
_a = argA;
},
getA: function() {
return (_a);
}
});
return ClassA;
})();
var a1 = new ClassA("foo");
var a2 = new ClassA("bar");
console.log(a1.getA()); //bar
console.log(a2.getA()); //bar
Remove event handling is inconsistent with the other events. No key name is provided to the event handler for remove actions... making the idea of remove event handling unfortunately useless.
Module.set('key', 'value'); // fires (create, create:key, mutate, mutate:key, change, change:key) events with parameters
Module.set('key', 'othervalue'); // fires (update, update:key, mutate, mutate:key, change, change:key) events with parameters
Module.remove('key'); // fires (remove, change) events without any parameters!Request that this is changed to:
Module.remove('key'); // to fire (remove, remove:key, mutate, mutate:key, change, change:key) events with appropriate parameters
// such that
Module.on({
'change': function( v ){
// v === 'key'
},
'change:key': function( v ){
// v === LAST VALUE
},
'mutate': function( v ){
// v.oldValue === LAST VALUE
// v.newValue === undefined
// v.key === 'key'
},
'mutate:key': function( v ){
// v.oldValue === LAST VALUE
// v.newValue === undefined
// v.key === 'key'
},
'remove': function( v ){
// v === 'key'
},
'remove:key': function( v ){
// v === LAST VALUE
}
});When pushing an array, the silent flag is ignored. That means that the loop setting each element of the array is firing the create/change events.
var Foo = Stapes.create().extend({
...
}).set({
...
});Looks useful, doesn't it? Well, right now Foo would end up being undefined instead of being something useful.
Other methods which don't return anything else, could do the same. jQuery works like that, too. If the function doesn't return something in particular, it returns this jQuery collection.
[Speaking of which, is there a reason why I can't get those things from the extend block?]
Is the latest version (0.8.1) backwards compatible with 0.7.1?
Do I need to do any changes when upgrading?
Hey,
In my node code:
var Stapes = require('stapes');
var Module = Stapes.subclass({
constructor : function(name) {
this.name = name;
},
sayName : function() {
console.log('My name is: ' + name);
}
});
var module = new Module('Emmylou');
"module stapes not found"
I made before a npm install stapes
Can you give an example with Node.js please?
Regards
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.