Please anyone suggest me, it's good idea to use Durandal and JuqueryMobile for mobile based application (Browser). I am planning to develop an application using Durandal, Jquerymobile, MVC4, KnockoutJs, and BreezeJs.
Thanks
I wouldn't recommend using jQuery mobile because it has a lot of overlapping features w/ durandal. Unless you want to just use jQuery mobile for the controls.
I asked on the google group forums and ratchet was suggested instead.
Not exactly the answer your looking for but.. it might be good to consider other options too.
Yes I believe this is a sound approach. We're using jquery UI (not the mobile version) with the durandal framework with success on a large web app.
If you include the jquery ui widget bindings by Steve Saunderson (https://github.com/SteveSanderson/knockout/wiki/Bindings---jqueryui-widgets) you can achieve a fully declarative UI approach.
It will allow you to declare something like the jquery ui autocomplete control within the HTML like this:
<input type="text" data-bind="
css: { 'song-valid': isValid, 'song-invalid': isInvalid },
value: songSearchText,
valueUpdate: 'afterkeydown',
attr: { placeholder: placeholderText },
jqueryui: {
widget: 'autocomplete',
options: {
source: function(request, response) { return $data.songAutoCompleteSource(request, response); },
minLength: 2,
select: function (event, ui) {
$data.songSelected(ui.item.id, ui.item.value);
$parent.songSelected();
}
}
}" />
Simply include the jquery ui widget bindings found in this gist: https://github.com/SteveSanderson/knockout/wiki/Bindings---jqueryui-widgets
Make sure you include the above javascript after you have already loaded jquery and knockout.
I would say no. I made a simple PhoneGap app with 3 pages with JQuery Mobile. It looked good. I then tried to implement Durandal and it broke all my JQuery mobile styling. I came to the conclusion that the 2 do not play well together as Jquery Mobile tries to implement it's own page navigation model. I am now going to try Bootstrap instead or possibly handcode the css for the UI.
If anyone can prove otherwise, please let me know!
Related
first of all I try to use proper "language" but I am not a programmer. That said...
I don't seem to be able to get jquery mobile to work properly.
When I try to change document.ready(function() { ... })
to
document.on('pagecreate', function(){ ... })
I do not get the same result; in fact I cannot even alert a simple message.
Furthermore I would like to use mousedown and mousedown events. The documentation of jquery mobile tells me that I could use vmousedown and vmouseup. Does not work either. Can someone enlighten me please. the jquery mobile.js is added lastly in my script structure of the dom.
Maybe relevant for others with a similar problem.
Linking to the jquery CDN instead of hosting the files myself solved my problem.
I just tried it and it doesn't work.
jQuery Mobile seems to get rid of the ?golfer=arnoldpalmer part of the link (you can see this via view source).
Any workarounds or solutions?
Is this because the standards are that we cannot put parameters behind page hash links?
As #zyrex pointed out, there are "pure" jQuery mobile solution.
Another popular solution is to rely on Backbone Routers which provide out of the box parsing of parameters in URLs.
Should you use this, you must deactivate hashtag interception in JQuery Mobile using
$( document ).on( "mobileinit",
// Set up the "mobileinit" handler before requiring jQuery Mobile's module
function() {
// Prevents all anchor click handling including the addition of active button state and alternate link bluring.
$.mobile.linkBindingEnabled = false;
// Disabling this will prevent jQuery Mobile from handling hash changes
$.mobile.hashListeningEnabled = false;
}
)
Create Routes in the Router
routes: {
"": "start",
"page2/:golfer": "gotopage2"
}
And do JQM navigation in your handler
gotopage2: function( golfer ) {
//do something with golfer
//show JQM page
$.mobile.pageContainer.pagecontainer( "change", "#page2")
}
this should solve your problem :) there are three ways to pass parameters.
Value Passing In Jquery from one html class to other html class in PhoneGap
i was asking how to integrate jquery ui components inside backbonejs. and also other jquery libraries like 'chosen'.
as i add for example the datepicker as default and its not working, in a rendered view from backbone.
how to integerate jqueryui in backbonejs.
thanks for the provided comments.
based on the below comments, i add the jqueryui components code to backbone.js view and its working fine now also the timepicker addon.
the library based on jquery "chosen http://harvesthq.github.com/chosen/" which still didn't work with backbone.js views.
I use a trigger at the end of the render method to fire the jqueryui methods. Something like this perhaps.
initialize: function () {
this.on('postRender', this.postRender, this);
}
render: function () {
this.setElement(document.createElement('div'));
this.$el.text('click me');
$('body').append(this.$el);
this.trigger('postRender');
}
postRender: function() {
this.$el.button();
}
You can trigger 'postRender' when you know that the element is has been added to the dom and is visible, you shouldn't have any problems using it in this way.
Are there helpers for jquery ui?
#Html.DatePicker(m=>m.Date)
or
#JQueryUI.DatePicker('DateFieldId');
I think it can be more conveniently...
No, are not any builtin Jquery UI helpers in framework. But there're many blog posts about implementation of datepicker (on of the most needed widgets, indeed). Take a look at Stuart Leek's blog post for example
You can add custom attributes/classes to your standard Html controls and then write Jquery selectors to wire them up:
Build this HTML (you could write a helper method extension to do this):
<input class="ui-datepicker" data-min="1/1/2000" type="text" />
Then in your javascript:
(function($) {
$(".ui-datepicker").datepicker({
minDate: Date.parse($(this).attr("data-min"))
});
})(jQuery);
I know this is an old post, but for anyone looking for the answer to this question:
Try this:
http://jqueryuihelpers.apphb.com/Docmo/GettingStarted
I've been using it for quite some time now.. very, very nice
I'm just not getting event delegation with jquery ui tabs, or at all!
I got the code for jquery ui tabs and loading the pages with ajax working perfectly. However I'm having trouble understanding event-delegation. I load 4 tabs with external content, depending on the tab which is opened. Inside those tabs I would like to attach the same widgets to the input buttons and links. So far my code looks like this
JS for rest of page already loaded
$("button, input:submit, a", ".create_button").button();
$("a.edit_button").button({
icons: {primary: 'ui-icon-pencil'}
});
$("a.delete_button").button({
icons: {primary: 'ui-icon-circle-close'}
});
$("a.active_button").button({
icons: {primary: 'ui-icon-lightbulb'}
});
JS For Tabs:
<script type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs({
ajaxOptions: {error: function(xhr, status, index, anchor)
{$(anchor.hash).html("Could not load");}},
selected: 0})
});
</script>
HTML
<div id="tabs">
<ul>
<li>Pass Information</li>
<li>Entries</li>
<li>Event Administration</li>
<li>Profile</li>
</ul>
</div>
I've learned here on stack overflow that I have to attach a click event to my #tabs div with live(). Best guess anyway.
however I cannot find any examples that work for me and my limited understanding of event delegation.
Any help is appreciated.
Rick
Right now, you have "error" being handled, but nothing else. You need to handle "success" or "complete"... actually, why are you using AJAX at all? You don't appear to be requesting any data from off of the page?
It seems like the key to your question is this:
Inside those tabs I would like to attach the same widgets to the input buttons and links.
Sounds like you want to use the "show" method of the tabs widget:
$(document).ready(function() {
$("#tabs").tabs({
ajaxOptions: {error: function(xhr, status, index, anchor)
{$(anchor.hash).html("Could not load");}},
selected: 0,
show: function() {
$([selectors for buttons or jQuery UI widgets in your tabs]).button();
}
})
});
FWIW, this question is not really about event delegation. That article is useful in understanding the concept.
Turns out that .live() only works on events. So though I could bind something to the links, it would not actually take affect until the link has an event take place, i.e. click or hover.
A workaround would be to dynamically add events to the links with the loaded content, but that is quite tricky and adds a lot of overhead to the application. Instead I chose to style things within loaded content in a different way. In the process of learning about this, I did end up using live() for form submission and a reload of the content after the submission takes place.
Thanks guys for your help. RwL. You ended up not actually answering the question, but your prodding sent me in the right direction and I learned a lot. I was ultimately able to solve the problem myself. You know, give a man fish or teach him to fish, yadi yadi yadi...
Thanks!