I need to use RESTful API for a codeigniter project and looking to use backbone.js I want to know is it possible to use backbone.js for multi page web application. Does that meet good coding practices?
Yes, of course you can build non single page application using backbone js. This library is all about keeping your code in order. It does not enforce any architecture.
In that case you do not need backbone router and you can simply render given view related to given page.
For example, whenever user is on /about page you can attach about.js with content similar to following:
const view = new (Backbone.View.extend({
render() {
return 'My about page';
}
}));
view.render({
el: $('.contact-page__content')
});
Related
I'm trying out ReactJS.NET in a .NET Core MVC project where I've got an ASP.NET View (cshtml) with a React component in it, which I initialize with:
<script src="#Url.Content("~/Scripts/myComponent.jsx")"></script>
Now I want to pass data from the ASP.NET View to the React component. For example, calling a React function when I click a button on the ASP.NET View. Is this possible? I know it's a basic question but I couldn't find any help since in all examples the data is only passed between React components and not from outside (ASP.NET View).
I couldn't find a way to do what I described in this question. So I ended up coding the whole page in ReactJS, which took some time to get into but it worked out well and I didn't have to mix technologies.
Declare a JS variable in a script and assign a property value from the Model:
<script type="text/javascript">let modelProperty= '#Model.ModelProperty';</script>
<script src="#Url.Content("~/Scripts/myComponent.jsx")"></script>
Then use that modelProperty in your ReactJS script:
ReactDOM.render(<MyComponent prop0={modelProperty} />, document.getElementById("yourTargetElementId"))
Maybe there are more neat solutions...
I want to implement react js to different pages of my website,
e.g
in home page, registration, login, etc.
all tutorial i have seen it only uses 1 app.js how can i achieve this
to multi page app.
P.S i am using laravel elixir and i combine them into 1 main.js.
Add a mounting point in the pages that you want your React App to be mounted.
e.g.
// main.js
ReactDOM.render(<App props={/* props from somewhere */}/>, document.getElementById('mountingPoint') );
// rendered HTML from pages should have
<div id="mountingPoint"></div>
I found this https://github.com/christianalfoni/react-webpack-cookbook/wiki/Multiple-entry-points
I think this is more appropriate on what i need and then i will just map the file
name in my laravel app.
this way i dont need to load the js code for contact_us.php to login.php
You could also use something like React Habitat to make this architecture easier.
With it, you could just define a container of your components so they resolve in your DOM.
For example, in your javascript you would do
import MyComponent from './Components/MyComponent';
...
container.register(MyComponent).as(myComponent);
Then in any of your HTML pages
<div data-component="myComponent"></div>
It also supports multiple containers and async code splitting.
I have a requirement of having the same URL throughout the application navigations. Like below
http://www.[Site Name]:com. (Here User should not have the idea of chaning the URL from one page to another page)
I am using ASP.NET MVC3 with latest Razor View Engine,
Can some body give suggestions on this?
Advanced Thanks,
Satish Kotha
This may make it very difficult for users to access your site - they won't be able to bookmark a specific page, for example.
It sounds like you want a single-page-app (e.g. like Google Mail or Reader). In this case, you have one page and make heavy use of AJAX. You can query the server via javascript, and send back Partial Views, or raw data in JSON format which can be rendered on the client, possibly via some kind of templating engine.
As Graham Clark has already mentioned, this functionality will most likely be frustrating for the user; however, achieving it depends on the complexity of your project. You may want to look into using jquery to load partial views into the main content area of your site.
When you click on your navigation you can use jquery's load() to replace the main content on the page. Jquery-load-with-mvc-2-partialviews is an interesting blog post that may give you more insight into what you would want to do. Your code to load content could look something like this:
$("#mainContent").load("/Controller/Action",
{parameter}, function () {
// perform javascript actions on load complete
});
I have 100 different url's each pointing to plain html pages, I have to convert these plain html pages to extjs pages. Footer and Header is same for all the pages but center section is different for different plain html pages.
In order to leverage maximum code I thought to create an EXTJS4.1.0 application which will have model, view, store and controller but separate index.html, app.js and viewport.js. The reason for separate index.html, app.js and viewport.js is that if I don't keep single index.html, app.js and viewport.js then I will not be able to bookmark the pages (Since users and using 100 different urls for 100 different pages) so basically I will have 100 different app.js and corresponding viewport.js (viewport.js will have common components for footer/header etc and specific components for screen) but at one point of time only one index.html, app.js and viewport.js will be active/run.
My first question is, is the solution I just mentioned a correct solution.
Is it true that in Extjs MVC pattern you can only have one Viewport.js file per application if you use autoCreateViewport: true.
Secondly if you use autoCreateViewport: false in Ext.Application (in app.js ) and create instance of different Viweport in launch method as follows:
Ext.application({
name: 'Panda',
autoCreateViewport: false,
launch: function() {
Ext.create('Panda.viewport.ViewportOne')
}
});
Notice that I have created instance of ViewportOne which is one of 100 viewports. With this solution also I ran into glitches while running the application (some navigation will not work etc). Is it because extjs does not allow viewport with name such as Panda.viewport.ViewportOne, Panda.viewport.ViewportTwo etc.
How in Extjs I can create fully MVC style application with bookmarkable pages such that each page is part of same extjs application (ie it leverages same model view, store, controller and dynamic loading).
The company I work for has lots of customers who are using an application which was build on plain html and javascript. Each uses works on only one page of that application which he has bookmarked on his browser.
The task I am given is to upgrade those plain html/javascript pages to Extjs one such that uses dont have to update their bookmarks.
At my end I am thinking to create single application in Extjs 4.1.0 which will have 100 pages (index.html, indexOne.html etc which user will bookmark) each if which can use common Model/view/store and controller.
So basically my entry point to application will be different but all pages will be using same model/view/store/controller.
Its more of an architectural question.
Hope this help.
I'm working on a project converting older .aspx pages to newer MVC pages. I'm currently using the routing function to map the existing legacy pages to use the newer MVC pages behind the scenes. This is working great because it is preserving the existing URL, however, whenever the controller needs to redirect the user OR an MVC Url.Action link is used, the URL it sends the user to is the MVC url and not the routed legacy page url. I realize that this is how its suppose to be functioning out of the box but I was wondering if MVC has "reverse routing" functionality of some sort. By reverse routing I am looking for something that allows the Url.Action("action") to return the routed .aspx associated url with the specified action instead of the default /controller/action link.
So for instance,
here is a sample route
context.MapRoute("AboutUs", "pages/aboutus.aspx", new { controller = "default", action = "aboutus" });
This enables domain.com/pages/aboutus.aspx to run the new MVC action "aboutus" from the DefaultController behind the scenes perfectly.
However, if on another MVC page I have a link created by
Url.Action("aboutus")
it points them to domain.com/mvc/aboutus. I would like it to point them to domain.com/pages/aboutus.aspx to keep uniformity across the site.
Thanks for any insights that you can provide. I might end up having to override the Url.Action method to look up the route and return the mapped url but I just wanted to check for existing functionality so I don't reinvent the wheel.
Try using the RouteUrl extension method, which matches the route by route name rather than route parameters, like so:
Url.RouteUrl("aboutus") // route name
MSDN: http://msdn.microsoft.com/en-us/library/dd460347