Develop Reference

Is it possible to separate the javascript code from the tag file in Riot Js?

I would like to know if it is possible to do something like:
<todo>
<div class="greetings">Hello, world!</div>
<script src="/path/to/my/file.js"></script>
</todo>
The tag would keep the view (html) while the js code stays in a different file:
todo.tag (html/css)
todo.js

To give an alternative to the mixin solution, here is another way of splitting up your markup from your logic.
Take a look at this Plunker (a colleague of mine wrote this). The key part is the way you reference the tag function. <script>todoTag.call(this, this.opts);</script>. In this case, the todoTag is a global function. But nothing stops you from name spacing that function or use some form of module loading.
From the plunker:
todo.tag.html:
<todo>
<!-- your markup -->
<script>todoTag.call(this, this.opts);</script>
</todo>
todo.tag.js:
function todoTag(opts) {
// your logic
}

After looking into it i found that it is possible to separate the js from the tag file by using mixins. So, we would have something like:
<dropdown>
<select>...</select>
<!-- more html code here -->
this.mixin(Dropdown);
</dropdown>
The Dropdown instance will be in dropdown.js and the tag in dropdown.tag.
Hope this helps.

I've found another option to separate the js code from the tag by using a regular js constructor, like this:
<dropdown>
<!-- html code -->
<script>new Dropdown(this)</script>
</dropdown>
then we can just have
function Dropdown(tag) {
// constructor code
}
and
Dropdown.prototype = { ... }
as usual

Jade - subsequent lines becoming children of included partial?

I am having issues with a simple jade layout, for example:
include test.jade
#bar hi
and in test.jade
#foo hello
And no matter what, the #bar is always rendered as a child of #foo.
<div id="foo">hello
<div id="bar">hi</div>
</div>
When I am trying to achieve
<div id="foo">hello</div>
<div id="bar">hi</div>
I'm confused if I'm doing something wrong or if this is the intended behaviour of jade?
I am building my jade templates with brunch and static-jade-brunch so I'm not sure if that is where the problem lies or if I am missing something?

Hm, okay, I'm not sure if this is the right solution, but I found I had to wrap the include in a block:
block test
include test.jade
#foo hello
and I have the desired output.

How to build a grid with Blaze in Meteor.js?

I have a collection of items, that I would like to stuff into a bootstrap grid. This then looks like this:
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
So I would need to loop through my collection and adding after every second item
There are two issues:
invalid html! No idea how to get around this
Issues with the module, but I think with some helpers I could get around.
Best would be if there were some examples.
Thanks for any inputs

check out this question. you should be searching for handlebars or spacebars to get better results. Blaze is the template engine; not the template system (if that makes sense.)
How do I populate a bootstrap grid system using handlebars for each command in Meteor.js?

Generically, you need to ensure that your collection is exposed to the template, most likely in a template helper. Then you can iterate the collection items like so:
{{#each templateHelperName}}
<div class="row">
<div class="col-md-8">{{propertyName1}}</div>
<div class="col-md-4">{{propertyName1}}</div>
</div>
{{/each}}
To create a template helper, take a look at the meteor docs; they're quite good.
If this doesn't help, perhaps you can provide some more clarity about what your collection looks like, and how you'd like it displayed. Your code doesn't really give much indication.

Are'nt we Allowed to write html codes if we use backbone.js?

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.

Backbone.js display JSON in template using underscore

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