I'm pretty new to BackboneJs and I'm trully lost there, an all day lost facing this maybe simple problem.
I try to create an app which runs offline. So i don't use any model or collection, and strange things like .save, .fetch.
I only use Backbone for history, structure and templating system.
My question is. I have some JSON, how can I display it in my template ?
My View, all is working til there. My json is in the jsonVar.
window.ExposView = Backbone.View.extend({
template:_.template($('#expos').html()),
render:function (eventName) {
console.log(jsonVar); // it's ok here
$(this.el).html(this.template(),{"output":jsonVar});
return this;
}
});
My Template (using jQuery mobile at the same time), I want my Json to show there.
<script type="text/tempate" id="expos">
<div data-role="header" class="header">
Back
</div>
<div data-role="content" class="content">
<%= output %>
</div>
</script>
Error : output is not defined.. Well
Another question.
If by any miracle my template receive my json output, how can I display it using underscoreJs ?
Thanks for your time,
have a nice weekend.
You are very close. You just need to call the template function with the object.
$(this.el).html(this.template({"output":jsonVar}));
You've just got the syntax slightly off -- a compiled template is a function that you pass the JSON model to. Like this:
$(this.el).html(this.template({"output":jsonVar}));
There are a number of ways you can render, but I guess you want to just add the markup to the DOM. Try something like this:
var view = new ExposView();
$("body").append(view.render().el);
Fiddle
Related
I got it working excellent with one template but ran into an issue trying to replace my inner ng-repeat with another template. Kind of like grouped data or more like nested data.
so let me simplify my html here:
<div data-ng-controller="index.dataGridController" data-ux-datagrid="index.items" class="listA datagrid" data-addons="whichTemplate" grouped="'focus'">
<script type="template/html" data-template-name="default" data-template-item="item">
<div>
<h3>{{ item.obj.name }}</h3>
<!--- instead of
<ul>
<li ng-repeat="listItem in item.focus>{{listitem}}</li>
</uL
-->
</div>
</script>
<script type="template/html" data-template-name="innerFocus" data-template-item="item">
<div>
<ul>
<li>{{item.focus.id}}</li>
</ul>
</div>
</script>
</div>
and the index.items look like this:
[{
"obj": {
"name": "someName"
}
"focus": [
{"id": "something here"},
{"id": "Another etc"}
]
}]
// which template is basically copy and pasted from examples
angular.module('ux').factory('whichTemplate', function () {
return function (inst) {
// now we override it with our method so we decide what template gets displayed for each row.
inst.templateModel.getTemplate = function (item) {
var name = item.focus ? 'innerFocus' : 'default';
// now we get the template from the name.
return inst.templateModel.getTemplateByName(name);
};
};
});
Trying to iterate a list with the focus array. Any ideas? I think it would make for a great example in the docs. Adding a fiddle. http://jsfiddle.net/uftsG/88/
Instead of putting all focus array in one li i'm trying to get them spread out while also having the item.obj.name above the list.
I am not familiar with ux-data grid. If you are set on using it, you can ignore this answer, but I did a small search engine (purely for academic reasons) and i ended up using ng-grid to display the data. I followed the github documentation and ended up boot-strapping #scope.myDefs with the data I needed on the backend using a $scope.getMyData function. In the view all you really need to do is add input fields to get the data, and then a div class with your ng-grid. It's super cool because it ensures the code is modular, and there are no funky functions going on in the view with nested ng-repeats so on and so forth. The only part that gave me trouble was the CSS because I'm not bootstrap savvy yet :) Here's some docs if you end up interested in ng-grid at all.
http://angular-ui.github.io/ng-grid/
How does one localize a pure front-end application that uses a framework such as Kendo UI ?
I mean, it's possible to do something like this:
$(document).ready(function(){
$("#myText").html(<grab text based on language>);
});
But then, if I have a listview and want to localize its title:
<div id="tabstrip-expenseaccounts" data-role="view">
<ul data-role="listview" data-style="inset" data-type="group">
<li id="expenseaccounts-listview-title">
abcde
<ul>
...
</ul>
</li>
</ul>
</div>
Becomes:
...
<li id="expenseaccounts-listview-title" class="km-group-container">
<div class="km-group-title">
<div class="km-text">abcde</div>
</div>
<ul class="km-list">
...
</ul>
</li>
...
I need to inspect the generated code and do something like:
$(document).ready(function(){
$("#expenseaccounts-listview-title.km-group-container div.km-group-title div.km-text").html(<grab text based on language>);
});
It works fine, but that doesn't seem like a clean solution to me.
Any advice ? Thanks!
For KendoUI there some language packs available on GitHub here. This other stakoverflow question should give you a headstart. With this, all you have to do is use the correct language pack and you're good to go. And if there is no language pack for your specific case, you can always roll your own.
Hope this helps.
While I have not found a solution proper to Kendo UI, here is the approach I went for to localize my mobile application. Note here that I am not talking about localizing widgets, I am referring to localizing every static aspect of the application: input placeholders, texts on buttons, headings, etc.
My mobile application only has one file, index.html, and whenever I want to navigate to a different page, i simply move to a different view. Since having multiple views in the same file is kind of a mess, I made one html file per view, and am dynamically loading them into the body (index.html has an empty body). Before appending the html which is retrieved using $.get for each view (at this point, it's a huge string), i am replacing text based on the current language (which is retrieved from the localstorage/cookie or from a default value).
example:
In my localization library:
_localization.localizeText = function(text, arr){
arr.forEach(function(item){
text = text.replace(item.name, getLang() == 1 ? item.replacement.en : item.replacement.fr);
});
return text;
}
In my login.html file:
<button>$$login-button$$</button>
And then in some javascript file which is included before the script in which the application is initialized:
var replacements = [];
replacements.push({
name: "$$login-button$$",
replacement: {
fr: "Connecter",
en: "Log In"
}
});
And then when i'm loading my files into the body:
$.when($.get("login.html"))
.done(function(p1){
var body = $("body");
body.append(localization.localizeText(p1[0], app.replacements));
});
Hope this helps anyone with similar issues!
I know this is a solved problem and the question might sound stupid but I come from a mostly backend, mobile and low-level development background.
I am working on a JS application (pure JS, no framework but structured really nicely). The only issue with the application is that all HTML is written in Javascript. So it would look like:
$div = ('<div>Hello</div>');
And then you can imagine how ugly this can get with all the additions and HTML manipulations. Now this HTML eventually ends up getting included into an index.html file that has a standard layout that all other JS files will end up exporting their HTML into somehow (uses some PHP). I want to be able to create a separate HTML file, and have a JS file use that file. How can I do so? I know typically the problem is the other way round: in the HTML, get the JS/template it. But in this app's case, this is not the issue.
With the current app I have, is there a way to use Handlebars or Underscore, or anything similar, to be able to write the HTML in an HTML file and just include it into the Javascript? I understand that this may require some pre-compilation but this isn't a problem.
The examples on Underscore and Handlebars only show simple HTML examples written the way I have it above. Examples online are showing how to template HTML with Javascript, but not precisely what I want.
Anyone has any suggestions or can help please?
I think you can easily do this using JQuery's $.ajax() method. Here's an exmaple:
$.ajax({
type: "GET",
url: "/templates/something.html",
dataType: "xml",
success: function (xml) {
$div = xml;
console.log('Loaded HTML: ', xml);
}
});
Handlebars will work for what you're trying to do, and it's super simple to use!
Let's take a simple example (taken from the handlebars website). Assume this is your HTML:
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
All you have to do is put it in a file (let's call it html.handlebars) then reference that file in a script tag:
<script id="html-template" type="text/x-handlebars-template" src="./html.handlebars"/>
Then from your Javascript you can create a template:
var source = $("#html-template").html();
var template = Handlebars.compile(source);
then generate the HTML from the template:
var context = {title: "My New Post", body: "This is my first post!"}
var html = template(context);
at this point html will be:
<div class="entry">
<h1>My New Post</h1>
<div class="body">
This is my first post!
</div>
</div>
which you can use just like any other string of html (ex: $(html).appendTo('body')).
You can make as many handlebars templates as you want, ranging in size from full pages to small snippets as above.
If performance becomes an issue you can look into precompiling as well: http://handlebarsjs.com/precompilation.html
I am learning backbone.js and I have seen some examples like this one.Here the user has not written much html codes inside the editor.html.Only 4 lines of code.But for colour change,size change etc he has done inside editor.js
Please help me understand what all codes we need to keep inside .html file
<div id="page" style="width:2000px;height:2000px;">
<button id="new-rectangle">New Rectangle</button>
<button id="new-circle">New Circle</button>
</div>
You should aim to put all your html in .html file(s). As an app grows, it will help you to keep them separate. The example you link to is a 'simplified' version - this is not how you would structure things in an actual app. You would load html from templates in the render function. A (though this is also simplified as I am relying on script tags) pattern would be:
HTML file:
[...SOME HTML...]
<script type="text/html" id="template-contact">
<div class='contact'>
<h1>Here's my template code</h1>
<strong>name</strong>
<span>email</span>
</div>
</script>
Then in your Backbone view render function:
render: function() {
template: _template($('#template-contract').html(),
this.$el.html(this.template());
return this;
}
Then somewhere else in your Backbone code you create a new instance of the view and render it.
var example = new view_name();
example.render(); //This loads the html template
If you need to dynamically load the html from a server, you can use underscore (or whichever template engine you are using) tags in your template '<%>' and use models. This is best explained in Addy Osmani's book Developing Backbone.js Applications which, incredibly, is free. Here's the link to the relevant section
Whatever you wants to display on the browser you can keep it in .html file and logic to update the dom on run time should be in .js file.
I am a super beginner to EE and was literally thrust into managing my company's website that is built in EE without training. I'm not a programmer, I'm a designer, so it's been taking me awhile to plug through this. So I might need some dumbed down language :)
I want to create a page that has some Javascript on it. Do I need to create a new template JUST so I can put some javascript on it? And how do I communicate to EE that I want the page I created to go with that template?
I duplicated the page/index template and renamed it to clinician-map (the same name of the page I created in the publisher). EE didn't like that and the page subsequently broke. All I want to do is insert one javascript item, this seems way too inefficient for just one page. Help??
(using EE 1.6.8)
Here is my code from clinician-map template.
{assign_variable:my_weblog="page"}
{assign_variable:my_template_group="page"}
{embed="embeds/html_head" url_title="{segment_2}"}
{embed="embeds/html_styles"}
{embed="embeds/html_scripts"}
<?php include_once("analyticstracking.php") ?>
</head>
{exp:weblog:entries weblog="{my_weblog}" disable="categories|member_data|pagination|trackbacks" limit="1" sort="asc" }
<body class="{url_title}">
{/exp:weblog:entries}
<div id="wrapper">
{embed="embeds/html_headerPlusLeftNav"}
<div id="content">
<div id="contentMain">
{exp:weblog:entries weblog="{my_weblog}" disable="categories|member_data|pagination|trackbacks" limit="1" sort="asc"}
<h2>{title}</h2>
{page_body}
{/exp:weblog:entries}
<!--contactforminfo -->
{exp:weblog:entries weblog="{my_weblog}" disable="categories|member_data|pagination|trackbacks"}
{related_entries id="playa_contentcalloutitems"}
<div class="callout">
<h3>{title}</h3>
{callout_summary}
</div>
{/related_entries}
{/exp:weblog:entries}
{exp:weblog:entries weblog="{my_weblog}" disable="categories|member_data|pagination|trackbacks"}
{related_entries id="playa_contentfeatureditems"}
<div class="featuredContent">
<h3>{title}</h3>
{exp:word_limit total="50"}
{contentfeatured_summary}
{/exp:word_limit}{if contentfeatured_body!=""}<p><a href='{url_title_path='content-featured/'}' class='more'>Read More</a></p>{/if}
</div>
{/related_entries}
{/exp:weblog:entries}
</div>
{exp:weblog:entries weblog="{my_weblog}" disable="categories|member_data|pagination|trackbacks"}
<div id="contentSub">{related_entries id="playa_contentsubitems"}<div class="item {contentsub_bgcolor}">
{if contentsub_contenttype=="Text or Picture with Text"}
<h3>{title}</h3>
{exp:word_limit total="50"}
{contentsub_summary}
{/exp:word_limit}{if contentsub_body!=""}<p><a href='{url_title_path='content-sub/'}' class='more'>Read More</a></p>{/if}
{if:else}
<h3 class="imgHeader">{title}</h3>
{exp:html_strip convert="y" convert_back="none" keep="a,img"}
{contentsub_summary}
{/exp:html_strip}
{/if}
</div>{/related_entries}
{/exp:weblog:entries}
{embed="embeds/html_mailingListSignup"}
</div>
</div>
{embed="embeds/html_footer"}
</div>
</body>
</html>
At glance I can see a couple things that might be confounding you...
You started with a template called 'index' in the 'page' template group.
Looks like the 'page' template you are starting from is meant to display a single entry from the 'page' weblog.
So a request url might look something like this:
http://example.com/page/some_url_title
where 'some_url_title' is the 'url_title' value one of the entries in your 'page' weblog.
Now you have gone and duplicated the index template and called this new template 'clinician-map'.
So you would call an entry through this template at:
http://example.com/page/clinician-map/some_url_title
Now, notice that the first url had 2 segments, while the second had 3 segments?
That's not normally a big deal but the fellow who designed the index template did something that makes it problematic. He is taking the value of segment_2 and passing it through an embed.
So in the first example (index) we are passing the dynamic value "some_url_tile" while in the second example (clinician-map) we are passing "clinician-map". If the embedded template 'html_head' is expecting to get a valid url_title but instead gets the string 'clinician-map' you are likely going to get unexpected results.
Also I don't think we know enough about what you are trying to do to decide if creating a new template is the right approach here. It may be that what you actually need is a new weblog entry or perhaps just a dynamic value inside your existing template.
If it did turn out that a new template is the best approach you could fix the problem I have described by simply replacing segment_2 with segment_3, but I am by no means certain that that is the way you want to go.
I want to create a page that has some Javascript on it. Do I need to
create a new template JUST so I can put some javascript on it?
More specifics would be needed in order to give a solid recommendation but in almost every case, I recommend keeping JavaScript grouped together either in the <head></head> or ideally right before the closing </body> tag if you can get away with it.
Looking at your template code, it appears all the JavaScript is stored in the embeds/html_scripts page. I would add the JavaScript you need to that template. If you only want the JavaScript to appear for certain pages only, I would make use of a conditional (which I'll outline at the end of my answer).
And how do I communicate to EE that I want the page I created to go
with that template?
ExpressionEngine URLs (by default) are assembled as follows:
http://website.com/group/template/url_title
Therefore if you have a page with a url_title of "contact-us", and you wanted that page to use a template in site/pages, you could tell your page to use that template like so:
http://website.com/site/pages/contact-us
That url is obviously fine and dandy for blog articles and such, but it's not that pretty; so ExpressionEngine also enables you to construct "page" based navigation which creates navigation tree based url structures, such as:
http://website.com/contact-us
There are a few third party modules that make it easy to build page navigation such as:
devot-ee.com/add-ons/structure
Using Structure, you specify the default template for each channel and can override the template for each page as well.
I duplicated the page/index template and renamed it to clinician-map
(the same name of the page I created in the publisher). EE didn't like
that and the page subsequently broke. All I want to do is insert one
javascript item, this seems way too inefficient for just one page.
Help??
(using EE 1.6.8) Here is my code from clinician-map template.
There are a number of things I would do different in regards to the template code you provided; however, as a quick fix here's how I would add the one line of JavaScript,
1) Open the embeds/html_scripts template and add the following logic:
{if segment_2 == "my_page_url_title"}
<!-- javascript here -->
{/if}
Note: Here's how segments are determined:
http://website.com/segment_1/segment_2/segment_3
Okay. I ended up just creating a new webblog and new template group and finally it seems like it's working. My javascript is not, but I can figure that out.
Thank you so much for your patience with helping me!