javascriptmvc
Develop with direction! With CanJS, jQuery++, FuncUnit, Steal, DocumentJS.
JavaScriptMVC
I have asked this quesion few days before here and no one answered it.
I had asked it in forum.javascriptMVC.com too and now I have a answer, however I need a a bit more idea.
Question:
I read javascriptMVC's documents and I loved it.
But I don't know how to use it in a large scale project.
I think on the server-side a MVC framework is needed or can help so much. And I've worked with server side PHP frameworks.
I am confused, my understanding of JavascriptMVC projects is that they handle client side events on the browser capture events, execute AJAX requests, manage the responses/data from the server and also show them to user in a graphical interface.
I know that in PHP MVC projects we also have controllers (and actions) that any of them is a separate page with a single entry point, my point is that these pages are whole HTTP requests.
I think the combination of these two frameworks would be in a form of a single or few heavy files (including js , css , imgs etc) that loads and managed by another Javascript libary such as steal.js.
Now user can work with site and its actions (as events) that result in running js functions that may change something in the UI or cause a AJAX request, as in Yahoo Mail where most things happens in one page.
So how will this affect the design of controllers and actions in PHP ? I mean normally in PHP MVC frameworks a lot of controllers and actions means a lot of pages. I think because of AJAX the number of controllers and actions should be actually less. I also think because of JMVC most controllers (and actions) should turn to AJAX responders, however how are layouts and views to be handled in this context?
Finally
- I want to know about different aspects of using this method(JMVC+MVC). (I am using Yii as my server-side MVC framework and JavascriptMVC as my client-side MVC).
- I also want to know about management of data on the client-side.
- I would like to understand how AJAX and web-sockets could be used, where we can use AJAX and where we can use websockets?.
- I want to understand about local-storage how we can use it for simulated page data management and maybe caching, how we can cache data coming from server as JSON in a form of a page? I am working on a very large project and I want to build its foundation very strong.
Source: (StackOverflow)
Does anyone know of a MVC framework in JavaScript that is free of other library dependencies?
I'm thinking along the lines of backbone.s or spine.js both of which CLAIM to have no dependancies but then their code clearly uses jQuery or Zepto functions.
I'm after one that uses native JavaScript only and therefore can be used with any framework (jQuery, MooTools, Dojo OR NO FRAMEWORK)
Source: (StackOverflow)
We use an event driven JavaScript MVC framework in our application, but have performance problems with larger data sets. We've implemented many of the same techniques used in React to alleviate our issues (render on intervals, compare data state and only update what changed), but I'm worried we are going down the road of implementing our own, less complete, framework. Before we adopt React for our data heavy UIs, what are the alternatives?
Source: (StackOverflow)
JavaScript MVC frameworks like Backbone.js, Angular, Ember.js, etc. are all the rage these days. I understand that they are great for preventing spaghetti code and all, but I really don't understand why they've taken off like they have.
After all of these years making sure sites are accessible using stuff like progressive enhancement, this sort of thing doesn't work whatsoever when JavaScript is disabled. Take a look at https://app.getblimp.com/. It's a great app, but the entire thing is useless if JS is disabled. Remember years ago when Target was sued over a million dollars because their site was inaccessible?
Another thing is how HTML is so integrated in the JS. Whatever happened to keeping HTML separate for markup, CSS separate for presentation and JS separate for behavior? Why is all this stuff that should be handled by a server being done by JavaScript??
Can someone please point out why a JavaScript MVC framework would be used over a traditional server-side MVC framework like PHP's Zend, Ruby on Rails, or Python?
I just don't get it!
Source: (StackOverflow)
I plan to write a rather large-scale web application using JavaScript. I believe I will be developing the webapp using CanJS to organize my client-side pieces.
I am strongly considering using Node.js for my server-side component, but I was wondering what the best way to set up Node to accept and handle REST requests. I did some Googling and came across something called Express. Any comments on this?
Any help/suggestions would be greatly appreciated.
Source: (StackOverflow)
I have been reading through the documentation on the JavaScriptMVC framework and it looks interesting. I am wondering if anybody here has used the framework, and with what success.
So please share your experience with JavaScriptMVC, if you have any. If you can suggest another MVC javascript framework that is fine to.
Best regards, Egil.
Source: (StackOverflow)
I have a main app view, with a filter menu in the header. When it's clicked, I want to filter content in a seperate news-feed view. But I don't know how to bind events (and pass class data) from clicks in one view to a function in another.
How can I accomplish this?
Source: (StackOverflow)
I'm interested in learning JavaScriptMVC. I've gone through Getting Started and a bunch of the official docs, but I learn best by looking at other people's code. I'm not finding much else in the way of tutorials or sample/open source apps using it.
Anyone know of good tutorials or open source apps I can look at to see how it's used in a more complex app?
PS: I'm aware of the Srchr tutorial, but the proxy at work is blocking me from getting the code with getjs. Is there someplace to download it from the web? If not, I'll grab it at home this weekend.
Source: (StackOverflow)
I'm working with Backbone.js for the first time, and trying to get my head around how it works. I have a search form that pulls in results via Ajax and writes them out to the page dynamically.
I'm now trying to figure out how best to structure this in Backbone - I read this SO question, but I don't completely understand how to wire the form and the results together.
Here's my HTML:
<form id="flight-options"> <!-- options for user to choose-->
<input type="radio" name="journey" value="single">Single<br/><input type="radio" name="journey" value="return">Return
<input type="checkbox" name="airline" value="aa">AA<br><input type="checkbox" name="airline" value="united">United
</form>
<div id="results"> <!-- results, written by Ajax -->
<h3>Results</h3>
<ul id="results-list">
</div>
Here's how I'm thinking of structuring the Backbone code:
var SearchModel = Backbone.Model.extend({
performSearch: function(str) {
// fire the ajax request. provide a bound
// _searchComplete as the callback
},
_searchComplete: function(results) {
this.set("searchResults", results);
}
});
var SearchFormView = Backbone.View.extend({
tagName: "form",
id: "flight-options",
events: {
"click input": "getResults"
},
getResults: function() {
// Get values of selected options, use them to construct Ajax query.
// Also toggle 'selected' CSS classes on selected inputs here?
this.model.performSearch(options);
}
});
var SearchResultsView = Backbone.View.extend({
tagName: "ul",
id: "results-list",
initialize: function() {
this.model.on("change:searchResults", this.displayResults, this);
},
displayResults: function(model, results) {
//append results to results-list here.
//update contents of blurb here?
}
});
var searchModel = new SearchModel();
var searchFormView = new SearchFormView({ model: searchModel });
var searchResultsView = new SearchResultsView({ model: searchModel });
My questions:
- Is this basically a sensible structure to use, with one view for the form and one for the results - the first view updating the model, the second view watching the model?
- I also want to update the contents of the
<h3> results header when there are new results - where is the most sensible place to do this, in the above code?
- I want to toggle the
selected class on an input when the user clicks on a form input - where is the logical place to do this, within the above code?
Thanks for your help.
Source: (StackOverflow)
I'm currently developing a community (like a lightweight "social network") for a limited (local) target.
This is the first project where SEO doesn't matter and where I can happily exclude no-js users. That's why I'm thinking to start the project over and write my first site that is completely build with Javascript and my first Node application for educational reasons.
Details so far:
Browser: jQuery, maybe JavaScriptMVC (there are some things I don't like about JavaScriptMVC (like the routes), maybe I write my own little MVC or do you know a better suited framework?)
Server: Node.JS, Express framework, (maybe socket.io or nowjs for further features)
I got a few questions so far. I know it's better to ask a single question but there are more or less connected:
Express looks really nice but I'm missing MVC. I couldn't find any project that implements mvc and is build on Express. Is there a reason for that? Routing is nice in Express but I need a way to spread code across multiple files (controllers would be the best way I guess, the application won't be small and I need it maintainable)
The application will be more or less completely based on AJAX (json) requests. Is Express the right framework for such applications, anyway? I think the best way to write this project is to expose a json REST api which can then be queried by the web application over AJAX and by a mobile device app (which I'm also going to write). In my opinion Express' route system is quite suited for REST. But feel free to recommend other frameworks.
Source: (StackOverflow)
I'm new to AngularJS, and - since it is quite complex and the approach is new for me, I'm a bit confused.
I'm from "classic" background (server-side template languages [like Yii, django, Smarty] + some jQuery to make things a bit dynamic).
Let's say I have a menu bar (Bootstrap NavBar, or anything else) - an element which lives outside of the main page content, like this:
<body>
<div id="menubar">
... <!-- menu content -->
</div>
<div class="container">
<div ng-view></div>
</div>
</body>
Now I'd like to make the menu a bit dynamic, i.e add or remove some menu items inside of the controller.
Using the server side frameworks & their templating systems, for example Yii - I'd simply have a BaseController class with $menuItems variable, and render it each time in the menuBar, while all the controllers would inherit from BaseController so they could modify items.
Also, I need a function which handles the searchForm located inside menu bar. Where should it live?
What is Angular way for something like this? So far I've been thinking of creating custom service or extending $rootScope.
Source: (StackOverflow)
I'm trying to set up routing in Backbone 0.9.10. I'd like to match routes of the following kind:
/england/
/england/birmingham
/france
/france/paris
...
etc. This is what I have in my router at the moment:
var AppRouter = Backbone.Router.extend({
routes: {
"": "index",
"(/:country)": "index",
"(/:country)(/:city)": "index"
},
index: function(country, city) {
console.log('index', country, city);
}
});
var StateApp = new AppRouter();
Backbone.history.start({ pushState: true });
I have two problems:
- The 'index' function isn't firing at all at the moment, whatever URL I go to =
/, /england or anything else.
- I'm also not clear if the optional parameters will work the way I have set them up - is it OK to have two optional parameters in a row like this? I don't know how many countries I need to support yet, so I do want the
country parameter to be a parameter, rather than specifying individual countries.
I'd much rather use proper URL routing than regex parsing if possible.
Source: (StackOverflow)
A few of my views need their textareas converted to rich text editors.
I'm using jwysiwyg as the editor. It requires that the element it is being attached to is in the page when the editor is initialized i.e. when I call $(this.el).wysiwyg(), this.el is already in the document.
Most of my views do not actually attach themselves to the dom - their render methods simply set their elements html content using the apps templating engine e.g. $(this.el).html(this.template(content)
Views/Controllers further up the chain look after actually inserting these child views into the page. At the same time, views do re-render themselves when their models change.
How do I ensure that the editor is attached to the element every time its rendered and still ensure that the editor is not attached until the element is already in the page?
Obviously I could hack something together that would work in this particular case but I would like an elegant solution that will work for all cases.
Any help would be much appreciated.
Edit: The main point here is that the solution must scale gracefully to cover multiple elements that must be styled after rendering and must not be styled until they are in the DOM
Edit: This is not an issue if I do top-down rendering but this is slow, I'd like a solution whereby I can render from the bottom up and then insert the complete view in one go at the top
Edit:
Using a combination of some of the techniques suggested below I'm thinking of doing something like the following. Any comments/critique would be appreciated.
app/views/base_view.js:
initialize: function() {
// wrap the render function to trigger 'render' events
this.render = _.wrap(this.render, function() {
this.trigger('render')
});
// bind this view to 'attach' events.
// 'attach' events must be triggered manually on any view being inserted into the dom
this.bind('attach', function() {
this.attached();
// the refreshed event is only attached to the render event after the view has been attached
this.bind('render', this.refreshed())
// each view must keep a record of its child views and propagate the 'attach' events
_.each(this.childViews, function(view) {
view.trigger('attach')
})
})
}
// called when the view is first inserted to the dom
attached: function() {
this.style();
}
// called if the view renders after it has been inserted
refreshed: function() {
this.style();
}
style: function() {
// default styling here, override or extend for custom
}
Source: (StackOverflow)
I'm learning JavascriptMVC and I'm running the following command in the Terminal, which I got from here:
./js jquery/generate/app cookbook
I'm new to the command line. All of my Googling is coming up with nothing. I imagine I'm missing some kind of configuration or something?
Source: (StackOverflow)