How to split Javascript and HTML Files?

Question

im working at the moment with jQuery Mobile. Whats the best way to split the Javascript and the HTML Files? Its possible to create single Views, and load them with Ajax into the code?

Example:

view.html

<li>
    <img src="{$image}" alt="{$title}" /> {$title}
</li>

Javascript Code:

for(var i = 0; i < data.channels.length; i++)
{
    var url = data.channels[i].url,
    image = data.channels[i].image,
    title = data.channels[i].name;

    // load view.html and replace variables in each loop, than append view into an div
}

It could be also an MVC Framework that is working well with jQuery Mobile. Thank you!

Could you say me also how? The problem is that i have a lot Javascript code in the hole WebAPP, and some views are used in more pages. — Philip Giuliani
– Philip Giuliani, Commented Jun 18, 2013 at 9:57
The problem is not in the views, but how you will pass a server variables to them. You have to have a controller, that will manage this. As i see you use Smarty in your views. — bksi
– bksi, Commented Jun 18, 2013 at 9:58
Whats about loading the view into a variable, and replace the variables of the view with .replace()? Could you tell me a nice way to load the view into a variable? — Philip Giuliani
– Philip Giuliani, Commented Jun 18, 2013 at 11:09

Gregor Weber · Accepted Answer · 2013-06-18 09:58:55Z

1

I think AngularJS would allow such kind of data binding: http://angularjs.org/

Apparently you also need some kind of adapter: https://github.com/opitzconsulting/jquery-mobile-angular-adapter

For having multiple js files in general I would recommend RequireJS (I don't know if AngularJS has its own solution for the problem require solves.

answered Jun 18, 2013 at 9:58

Gregor Weber

6889 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Philip Giuliani · Accepted Answer · 2013-06-21 08:38:38Z

i found a very nice solution for Splitting HTML and Javascript files with jquery.tmpl!

It is an official supported Plugin: https://github.com/BorisMoore/jquery-tmpl

I have now the whole HTML in single files.

Example:

templates/channel_row.html

<li>
    <a href="somelink.html?id=${id}" data-transition="slide">
        <img src="#" data-src="${image}" alt="" class="ui-li-icon ui-corner-none" />
        ${name}
    </a>
</li>

And i am calling this file with:

// array with all channels
var channels = [];

for(var i = 0; i < data.channels.length; i++)
{
    // data
    var channel = {
        id: data.channels[i].id,
        name: data.channels[i].name,
        image: data.channels[i].image
    };

    // ad channel to array
    channels.push(channel);
}

$.get("templates/channel_row.html", function(template) {
        $.tmpl(template, channels).appendTo("#listview_channels");
});

I hope that I have helped you.

Collectives™ on Stack Overflow

How to split Javascript and HTML Files?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related