sammy
Sammy is a tiny javascript framework built on top of jQuery, It's RESTful Evented Javascript.
Sammy.js / A Small Web Framework with Class / RESTFul Evented JavaScript
On my website, which is a one-page JS site using Sammy.js and jQuery, when I middle-click a link with a mouse, the link opens in a new tab. But when I command-click on a Mac, it doesn't. This happens in both Firefox and Chrome, so I assume it must be according to spec in some way.
This happens on a Macbook Air (so trackpad + command button). Most sites work just fine though, with command-click being identical to normal middle-click.
Try it out yourself: https://circleci.com. Command-click between "about", "home" and "contact" and you should experience the problem - they don't open in new tabs.
Source: (StackOverflow)
Is there any small framework that provides hash / url handling similar to sammy.js? I need to bind callbacks to routes - not only for "normal" get requests but also for post/put/delete submissions (both triggered by links / forms or manually from my code).
That's pretty much it and since I'm already using some other frameworks / libraries such as jQuery and knockout.js, I don't want to include a framework like Sammy (that provides too much functionality that I'm not going to use).
Source: (StackOverflow)
I'm trying to define some routes with sammy.js here is my code:
$.sammy("#main_content", function()
{
this.get("#!/about", function()
{
// Code
});
this.get("#!/", function()
{
// Code
});
}).run();
If I goto www.mywebsite.com I always get a 404 error. I've tried putting a blank route in like this.get("", function() {}); and that seems to work for preventing the 404 error but then none of my normal links on the page work. How do I go about fixing this?
Source: (StackOverflow)
Im just wondering if anyone has setup SammyJS with requireJS to route creation of modules depending on the provided hash address?
Is it possible? Advice?
Thanks
Source: (StackOverflow)
Does anyone have an example of making the product details of the SammyJS json store demo show up in a modal plugin like FancyBox?
Here's the block of code from json store - what do I need to do to present it in a model FancyBox?
this.get('#/item/:id', function(context) {
this.item = this.items[this.params['id']];
if (!this.item) { return this.notFound(); }
this.partial('templates/item_detail.template');
});
Source: (StackOverflow)
In my current project we are using the Sammy.js framework for navigation. For a requirement I need to know whether a given route was run as a response of pressing the Back/Forward button or not.
Is there a way to identify that?
Source: (StackOverflow)
I am fairly new to the concept of javascript client side development. I am running into an issue, though it may be I just don't understand how to accomplish something with the mash of frameworks.
I know I want to use Knockout for it's rich client side goodies. I also wanna use Sammy.js to allow for routing and passing data to the knockout views (I come from an MVC background where I stuff a model with data, then return view(model), and MVC binds it nice and good for me).
So now I am trying to do something similar client side...
Here is my Index.html :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>The EClassifieds Mobile</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<!-- <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>-->
<script type="text/javascript" charset="utf-8" src="./scripts/cordova-1.8.1.js"></script>
<script type="text/javascript" charset="utf-8" src="./scripts/knockout.js"></script>
<script type="text/javascript" charset="utf-8" src="./scripts/templ.js"></script>
<script type="text/javascript" charset="utf-8" src="./scripts/sammy.js"></script>
<script type="text/javascript" charset="utf-8" src="./scripts/sammy.tmpl.js"></script>
<script type="text/javascript" charset="utf-8" src="./services/RouteManager.js"></script>
<script type="text/javascript" charset="utf-8" src="./services/ApplicationManager.js"></script>
<link rel="stylesheet" rel='nofollow' href="./style/site.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
<!-- <link rel="stylesheet" rel='nofollow' href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />-->
</head>
<body>
<div id="main">
<h1>HELLO WORLD!</h1>
<!--Sammy should update the content of this div dynamically, creating a SPA (single page application)-->
</div>
</body>
</html>
Here is my Sammy Configuration.
(function ($) {
alert('Building Routes');
var app = $.sammy('#main', function () {
this.use('Tmpl', 'html');
this.get('#/', function (context) {
alert('Rendering Partial for Login page');
context.app.swap('Loading...');
this.render("/views/Login.html");
});
});
$(function () {
app.run('#/');
});
})(jQuery);
Here is my Login.html
<!--Model File Goes Here -->
<script type="text/javascript" charset="utf-8" src="../models/Login.js"></script>
<fieldset title="Please Login to Begin :">
<div data-role="content" style="padding: 15px">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="txtUsername">
Username
</label>
<input id="txtUsername" data-bind="value: username" placeholder="Stevie" value="" type="text" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="txtPassword">
Password
</label>
<input id="txtPassword" data-bind="value: password" placeholder="yep!" value="" type="password" />
</fieldset>
</div>
<a id="btnLogin" data-role="button" data-transition="fade" rel='nofollow' href="#page1" >
Login
</a>
</div>
<div id="errorText">
<h1></h1>
</div>
<p id="deviceProperties">Loading device properties...</p>
</fieldset>
<script type="text/javascript">
$(document).ready(function () {
ko.applyBindings(new LoginDataModel(0, "Stevie", "theTV", true));
});
</script>
I also need some way to pass the data from the sammy get handler, to the knockout page. Is there a way to do this, or am I attempting the impossible?
UPDATE 1 :
I would really love to be able to do something like :
var app = $.sammy('#main', function () {
this.use('Tmpl', 'html');
this.get('#/', function (context) {
alert('Rendering Partial for Login page');
context.app.swap('Loading...');
var data = getLoginData();
this.render("/views/Login.html", data);
});
Sammy does this same exact thing using other template frameworks, however, I don't see how I would bind the $data in the Knockout view to the data passed from Sammy.
Source: (StackOverflow)
Is it possible to define a catch-all route or an error route in Sammy.js? I know I can bind to 'error' but if no route matches that does not seem to be triggered.
Thanks!
Source: (StackOverflow)
Just wondering if there is anyway to specify a parameter as optional in a sammy js route.
I've seen somewhere that you can use
route/:foo/?:bar
and that will trick sammy into thinking that bar is optional. However if you query your params without bar supplied you that it will equal the last character of the url for example
'#/route/test' => {foo: 'test', bar: 't'}
and
'/route/test/chicken' => {foo: 'test', bar: 'chicken' }
but with bar getting populated in both cases there is no way to check if its been supplied.
Any tips on this?
Source: (StackOverflow)
This is just the weirdest thing. I've got a Sammy.js app, and I want to set focus on a text field right after the HTML loads. I've got this CoffeeScript here:
this.partial('templates/my-template.jqt').then ->
i = $('#item')
debugger
i.focus()
While I'm in the debugger, right on that line, I can inspect "i" and see that it's a JQuery object. I can even call i.val("HI THERE!") and see my text field update. But, calling i.focus() does absolutely nothing. Is there some security feature I'm missing that doesn't let you focus on a text element that was dynamically loaded?
Source: (StackOverflow)
I've started playing with the Single Page Application template for MVC 5 that comes with Visual Studio 2013. I'm more than familiar with Knockout.js, and although I wasn't with Sammy.js I've been reading up on it and it doesn't seem all that complicated.
What I can't seem to wrap my head around is how the MVC 5 SPA Template combines these technologies, or what the Visual Studio team had in mind for the template as an example; the template provides, amongst other things, a home.viewModel.js file that's supposed to serve as a starting point, but I can't seem to understand how I can add more views with Sammy.js routes. If only they wad provided a second partial view and viewmodel.
My Question
So, short story long, my real questions are,
- how do I go about displaying a partial view linked to the route
#users in a way that mimics the provided home.viewmodel.js, so that I can navigate back a forth from #home to #users? What would the Sammy.js route definition look like in users.viewModel.js?
- Do I need to do anything special to enable the browsers back button or will it just work as soon as I have defined my routes properly?
- It it me or does this template feel as a half-baked example?
The following code is just for extra reference/context, but it probably not necessary in order for the question to be answered.
Some context
Let's assume I have created a partial view, _Users.cshtml, served by a UserController, which is an MVC controller and not a WebAPI controller, and that I want to display that partial view by means of a Sammy.js route, to which end I've created a users.viewModel.js. Now...
The provided Index.cshtml view looks like this:
@section SPAViews {
@Html.Partial("_Home")
}
@section Scripts{
@Scripts.Render("~/bundles/knockout")
@Scripts.Render("~/bundles/app")
}
Which I presume is meant as the application "shell" page, where the rest of partial views will be loaded to substitute the contents of the _Home partial.
The problem is that on the home.viewmodel.js the Sammy route is initialized without passing in a selector for the element that will hold the content, like this
Sammy(function () {
this.get('#home', function () {
// more code here
}
instead of, for example
Sammy("#content", function () {
this.get('#home', function () {
// more code here
}
Am I supposed to place the _Users partial alongside _Home from the very beginning so that the Index view looks like this?
@section SPAViews {
@Html.Partial("_Home")
@Html.Partial("_Users")
}
@section Scripts{
@Scripts.Render("~/bundles/knockout")
@Scripts.Render("~/bundles/app")
}
This will, of course, display both views at the same time, which is not what we want.
My users.viewmodel.js looks like this:
function UsersViewModel(app, dataModel) {
var self = this;
Sammy(function () {
this.get('#users', function () {
// the following line only makes sense if _Users is not
// called from Index.cshtml
//this.load(app.dataModel.shoppingCart).swap();
});
});
return self;
}
app.addViewModel({
name: "Users",
bindingMemberName: "users",
factory: UsersViewModel
});
I've tried using the Sammy.js swap method, but since my _Users view is a partial and Sammy is not set up to act on a specific element the whole page is replaced... and the browser's back button doesn't seem to work.
Sorry for the massive amount of text, and if this is a very trivial question. It bothers me that I can't seem to figure it out on my own, even after going through the docs.
Source: (StackOverflow)
I have a form like this on my page:
<form data-bind="submit: AddFolder"></form>
If I have this code in my JS script (of course I've removed all of the unrelated code and tested to make sure I can still recreate with only this code, normally you'll have more code inside here like .get and .post functions):
Sammy(function() {
}).run();
When the form is submitted, the page redirects to a weird URL like ?ko_unique=1
If I remove the Sammy part from my script, this doesn't happen. I think it has something to do with event bubbling and Sammy and Knockout both hooking the onSubmit, and the browser only respecting the return value from the last function called.
Source: (StackOverflow)
I have a single page application that uses Knockout.js for data binding and Sammy.js for routing client-side (hash-based) URLs.
I'm seeing a weird problem in Internet Explorer, however: sometimes links, when clicked, will change the URL in the browser's address bar, but the corresponding Sammy route will not execute.
It doesn't happen every time (but I can consistently reproduce the error), and it only happens in IE10 (Chrome works fine every time). It appears to be related to Knockout as well, since a set of hard-coded links don't exhibit the same problem.
To illustrate, I've stripped away everything but the bare minimum to recreate the problem and created two jsbin examples:
Example 1 (with Knockout): http://jsbin.com/aretis/2/
To see the problem, open the link above and click "Record #1", then "Baz", then "Record #1" again. The URL for record 1 will appear in the address bar, but the route for that record will not be appended to the list.
Example 2 (without Knockout): http://jsbin.com/amivoq/1/
In this example, I have a static list of record links instead of a data-bound list. Clicking on any of the links (in any order) will result in that route being appended to the list (as it should).
A reminder that these must be run in IE to reproduce the problem.
Any ideas?
Source: (StackOverflow)
I'm developing a single page application using knockout.js and sammy.js.
I know how I can remove one item by attaching a button with a click event to each item like so:
self.deleteItem = function(item) {
self.array.remove(item);
}
I'm trying to figure out how I can use checkboxes to remove multiple items at the same time.
Can someone point me in the right direction?
Thanks!
Source: (StackOverflow)
I am working on a SPA that I would like to use multiple master views. Here is my use case:
I have a user that has a profile page. Within that profile page I would like to be able to display a couple of different views, ie. details, works, contact info, etc. I need to be able to deep link to each of these views. Each of these views must display the basic user data from the master layout view.
It is my understanding that I should be using compose for this and I have a bit of code that seems to work, however, I want to be able to pass data from the "secondary shell" down to the actual sub view. It seems that the splat data is not passed along to the activate method of the sub viewmodel.
In my "master" viewmodel I have created an observable called activeView that contains a string corresponding to a sub viewmodel (viewmodels/user/details). I then have a knockout statement that is as follows:
<!-- ko compose: {
model: activeView(),
activate: true
} --><!-- /ko -->
How can I pass data to the sub view? Or is there a better way to do this?
Thanks in advance!
Source: (StackOverflow)