agility
Javascript MVC for the "write less, do more" programmer
Agility.js Javascript MVC library
agility.js is an mvc library for javascript that lets you write maintainable and reusable browser code without the verbose or infrastructural overhead found in other mvc libraries.
I'm trying to learn agility.js and what I thought should be a simple exmaple, I can't get to work and I'm not sure why. Clicking the button should change the text of the span to "Goodbye World" but clicking does nothing. Any ideas?
var message =
$$(
{txt:'Hello World'},
{format:'<span data-bind="txt" /><button id="btn">Click Me</button>'},
{'click #btn' : function(){ this.model.set({txt:"Goodbye World"}) }}
);
$$.document.append(message);
Source: (StackOverflow)
I am new to MVC-style javascript libraries, so pardon me if this question is too basic. I'm trying to write a Single-Page Application entirely in jQuery and agility.js. The examples given in the agility.js documentation consist entirely of adding html elements to the document root. Question: Is there a 'Best-Practices' way to assemble a page by components.
Here is a rough outline of my html app:
<html>
<head> ... </head>
<body>
<header> ... </header>
<div id=PageHolder>
<div id=AppPane_1></div>
<div id=AppPand_2></div>
</div>
<footer> ... </footer>
</body>
</html>
Within the 'AppPane' divs will be the content of the application.
Okay, given all of this, I'm not asking what can I do, but I'm asking what should I do.
I see from the documentation and my research that I have 3 choices:
- create my page composition from atomic agility objects and assemble them in a
jQuery document ready block. $$.document.append(Foo) works for the root element, but I could not figure out how to add Foo's children to foo.
- Use one (very large) agility object which lays out the basic static html from above and append controls and whatnot to that using the
controller functions (which I havn't been able to get to work either)
- Use one root agility object and append all the children onto it using view (somehow, I havn't been able to get that to work either.)
Which of these is best, and what is the syntax involved? Thanks in advance, any guidance in assembling html components into a cogent agility app would be much appreciated.
http://jsbin.com/ojenon/1/
Source: (StackOverflow)
I recently finished one of my first AgilityJS projects, which is a web-based file browser that lets you create and manage folders and files, and navigate around the folder tree. I followed the various AgilityJS recommendations regarding the design and ended up with all my HTML and Javascript in a single Javascript file.
Now, I would like to provide a "read-only" version of this app which does not have the ability to add/edit/remove files and folders. I'd like to have 2 user types on the website, one type which can only read the files and folders, and another user type who can administer.
My question is, how do I proliferate these permission differences to my AgilityJS app? I know how to secure my endpoints and operations on the server side, but I'm wonder about the best way to do this on the client side. Should I create a separate version of the app with a limited set of functionality? Should I simply hide certain buttons/features? Are there theories, frameworks, etc.? which deal with this issue? Any point in the right direction would be helpful.
Source: (StackOverflow)
I am using agilityjs as a client side mvc framework. I have a situation where I have a div element that is supposed to show a list of merchants that is retrieved from the server side and put as a model on the client side.
var merchants = //retrieve merchants from server as json array;
var merchantsWrapper = $$({'merchants':merchants},'<div id="merchants-wrapper"></div>');
Now I need a way to bind the merchants model property to be bound to the merchants-wrapper div where this div should display all the merchants. Each merchant is displayed in a particular layout defined in another prototype merchant agility object as:
var merchantProto = $$({//model props}, '<div>rendering layout</div>');
I want a mechanism by which the merchants array should get two way bound to the merchants-wrapper div and each merchant should render according to the merchant prootype, and in case the merchants property gets changed by sorting or filtering the view should get updated accordingly.
I have an idea that I can render it once on create event and do the same on change:merchants event, but I dont want to create new merchant objects, so either there should be a way to clear the contents of the merchants-wrapper div and then append the new merchants.
Source: (StackOverflow)
The Agility.js documentation seems to say pretty clearly that Agility objects can accept any valid jQuery event type:
Usual DOM events such as click, dblclick, mouseenter, etc are supported through
jQuery's event API. Please consult jQuery's API for a list of events supported.
But in the docs and in all other examples I've seen, all the controller functions bound to events take no parameters. For example, the following snippet is taken straight out of the online docs:
var button = $$({msg:'Click me'}, '<button data-bind="msg"/>', {
'click &': function() {
this.model.set({msg:"I've been clicked!"});
}
});
$$.document.append(button);
Here the lambda attached to the click event obviously is parameterless. This works OK for ordinary jQuery events, but to use jQueryUI events, each event function has associated data. For example, if I want to use Draggable and Droppable widgets, the drop() function is called on the Droppable to indicate that a Draggable has been dropped onto it, and I need the parameters to drop(event, ui) to figure out which Draggable it was.
Is there any way to declare my controller event handlers so that I can get access to those parameters? Alternatively, is there some other way to do what I'm trying to do? Not getting any information about an event on a controller other than "it fired" seems like a real shortcoming here. I'm not even sure it is possible to extend Agility so that it can handle events other than the standard DOM ones, although I don't see any reason why it shouldn't be, from my reading of the code.
Agility does provide a trigger() function for client code to fire events, which allows for parameters other than the event type. I thought of wiring that up to the jQueryUI event somehow, but I don't see quite how. More to the point, why can you even pass parameters to trigger() if controllers can't see them?
Source: (StackOverflow)
I am using a AgilityJS in my project and I have the following scenario:
var obj = $$({some_model_prop: val_from_server},'<div></div>'});
body.append(obj);
Here body is another agility object containing the main page's body view.
The problem is if the value of val_from server happens to be 0(zero number) it is not displayed inside the div although the div is rendered.
If I convert the val_from_server to string by appending quotes("") to it it shows up but then I have to convert the string to number while fetching it later from the model.
Is there something that I am doing wrrong.. or is it a bug in agility itself.
Source: (StackOverflow)
I created a database called agilityjs that has a table called todolist. I created a file in /api/todolist.php which will act as a web service. I want to make it so when the user clicks "New Item," it will add a new item to my database by calling the PHP file (todolist.php). My next goal is to edit the item when they click to edit and delete when they click to delete.
Can anyone help me in the right direction? I have seen the persistence documentation at http://agilityjs.com/docs/docs.html#persist but I'm not sure how to apply it.
The following code is simply taken from http://agilityjs.com/ (at the bottom, you can see it and it's live demo).
Here is another good resource for learning https://gist.github.com/3166678, but I can't seem to apply it either.
//
// Item prototype
//
var item = $$({}, '<li><span data-bind="content"/> <button>x</button></li>', '& span { cursor:pointer; }', {
'click span': function(){
var input = prompt('Edit to-do item:', this.model.get('content'));
if (!input) return;
this.model.set({content:input});
},
'click button': function(){
this.destroy();
}
});
//
// List of items
//
var list = $$({}, '<div> <button id="new">New item</button> <ul></ul> </div>', {
'click #new': function(){
var newItem = $$(item, {content:'Click to edit'});
this.append(newItem, 'ul'); // add to container, appending at <ul>
}
});
$$.document.append(list);
Thank you.
Source: (StackOverflow)
I have this code which I have found from google. It's a adapter for agility.js restful model for saving data. Now the DELETE function works perfectly except on the _params.id === 0 where it would say
Uncaught TypeError: Cannot set property 'id' of undefined
The code
$$.adapter.localStorage = function(_params) {
var key = (this._data.persist.baseUrl || '') + this._data.persist.collection;
var value = localStorage[key];
var items = (value && value.length > 0 ? JSON.parse(value) : []);
switch (_params.type) {
case 'GET':
if (_params.id) { // normal get
if (items[_params.id]) {
_params.success(items[_params.id]);
} else {
_params.error();
}
} else { // gather call
console.log(items);
items = $.map(items, function(item) {
return item;
});
console.log(items);
_params.success(items);
}
break;
case 'DELETE':
_params.data = undefined; // continue into POST case
case 'PUT':
// continue into POST case
case 'POST':
if (!_params.id) {
_params.id = items.length;
_params.data.id = _params.id;
}
items[_params.id] = _params.data;
//_params.success({id:_params.id});
localStorage[key] = JSON.stringify(items);
break;
}
_params.complete();
};
Source: (StackOverflow)