I have one "test.html" in that I have this contend (whole html file have this contend).
<h1>First page</h1>
I need to load that contend in my div having id ="contend" using Marionette .js
<div id="contend">
</div>
could you please tell me how I will do that ?
fiddle :
http://jsfiddle.net/JQu5Q/16/
$(document).ready(function(){
var ContactManager = new Marionette.Application();
ContactManager.addRegions({
mainRegion:"#contend"
})
ContactManager.on("start", function(){
console.log("ContactManager has started!");
});
ContactManager.start();
// router
var routers = Backbone.Router.extend({
routes: {
"": "showFirstPage"
},
showFirstPage:function(){
}
})
var ToolItemView = Backbone.Marionette.ItemView.extend({
template: '<div>hello</div>',
});
})
If you want to show the view by Backbone.router, you just need to pass the Marionette app to router than show it.
var routers = new Router({app: ContactManager})
demo
Instantiate the view, and show it in the region:
var toolItemview = new ToolItemView();
ContactManager.mainRegion.show(toolItemview);
http://jsfiddle.net/JQu5Q/17/
Related
I have developed a widget for a form view:
var core = require('web.core');
var form_common = require('web.form_common');
var MyWidget = form_common.FormWidget.extend(form_common.ReinitializeWidgetMixin, {
template: 'MyWidgetTemplate',
...
});
core.form_custom_registry.add('my_widget', MyWidget);
I am calling it in the form view this way:
<widget type="my_widget"></widget>
It's working perfect. But, I need to use that widget in tree views. So I made the following modifications:
var core = require('web.core');
var ListView = require('web.ListView');
var list_widget_registry = core.list_widget_registry;
var MyWidget = ListView.Column.extend({
template: 'MyWidgetTemplate',
...
});
list_widget_registry.add('my_widget', MyWidget);
Afterwards I moved the line <widget type="my_widget"></widget> just after a field in a single tree view. But when I open that tree view, I get this JS error:
Uncaught TypeError: Type is not a constructor
Does anyone have any idea of why?
I am doing a sample work to render the element using the data. but I am not getting my result. what is wrong here?
any one help me?
here is my code: please go for fiddle for the live demo.
html:
<div id="content" class="content"></div>
<script type="text/template" id="list">
<%= name %>
</script>
Javascript:
var data = [
{"name":"name1","city":"city1","age":"age1","subModel":[
{"name":"name01","city":"city01","age":"age01","subModel":[
{"name":"name001","city":"city001","age":"age001"}
]},
{"name":"name02","city":"city02","age":"age02","subModel":[
{"name":"name002","city":"city002","age":"age002"}
]},
{"name":"name03","city":"city03","age":"age03","subModel":[
{"name":"name003","city":"city003","age":"age003"}
]}
]}
];
var myApp = new Backbone.Marionette.Application();
myApp.addRegions({
mainRegion:"#content"
});
var myModel = Backbone.Model.extend({
defaults:{
"name":"no name",
"city":"chennai",
"age":"10 months"
}
});
var myCollection = Backbone.Collection.extend({
model:myModel
});
var oneView = Backbone.Marionette.ItemView.extend({
tagName:"li",
template:"#list"
});
var multiView = Backbone.Marionette.CompositeView.extend({
tagName:'ul',
itemView:oneView
});
myApp.on('initialize:after', function(){
var listView = new multiView({collection:data});
myApp.mainRegion.show(listView);
});
myApp.start();
Live Demo
Here you go: http://jsfiddle.net/Cardiff/Y5kwM/
There are several errors here:
var multiView = Backbone.Marionette.CompositeView.extend({
tagName:'ul',
itemView:oneView
});
You need to provide a template to a compositeView, otherwise use a collectionview.
var listView = new multiView({collection:data});
You can't just set an array as a collection. You need a valid backbone collection (see fiddle).
i am just writing a simple backbone program. But i am not getting how to fetch data from backbone collection to backbone template. Complete code is written below:
<!doctype html>
<html>
<head>
<title>Backbone tutorial</title>
</head>
<body>
<div class="user">user</div>
<div class="page"></div>
<script type="text/template" id="user-list-template">
I am not able to get data on daya.key
<h1> <%= data.key %> </h1>
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script>
<script>
This is my Collection code
var Album = Backbone.Collection.extend({
url : "/data.json"
});
This is my view code
var UserList= Backbone.View.extend({
el:'.page',
template:_.template($('#user-list-template').html()),
render : function(){
var that=this;
var album= new Album();
album.fetch({
success:function(album){
var _data = {data : album.models} ;
$(that.el).html(that.template(_data));
}
})
}
});
This is my Router code
var Router = Backbone.Router.extend({
routes: {
"": "home" // #help
}
});
var userList= new UserList();
var router = new Router();
router.on('route:home', function(){
userList.render();
});
Backbone.history.start();
</script>
</body>
</html>
and here is the data.json file
{ "key" : "value to print on template "}
Two modifications i would suggest
1.First check the data feild in your template. Since you are fetching data from the collection it will be array of models.
<h1> <%= data[0].key %> </h1>
or you can use a for loop iterating over the collections
2.The data.json file should look like this
[{"key" : "value"}]
Server needs to return a JSON array of model object for collection.fetch() request. So the data.json should look like this:
[{"key":"value to print on template"},{"key":"another value"}]
And try this collection view render implementation:
Model:
var User = new Backbone.Model.extend({});
Collection:
var Album = new Backbone.Collection.extend({
model: User,
url: "/data.json"
});
//create collection instance
var album = new Album();
View:
var UserList= Backbone.View.extend({
el:'.page',
template:_.template($('#user-list-template').html()),
initialize: function(){
//register a collection data add event handler
this.listenTo(album,"add",this.addUser);
//register a collection data remove event handler
this.listenTo(album,"remove",this.removeUser);
album.fetch();
},
render : function(){
},
addUser: function(user){ //apply model data to view template and append to view element
this.$el.append(this.template(user.toJSON()));
},
removeUser: function(user){
//view state update implementation when data have been removed from collection
}
});
Template:
<script type="text/template" id="user-list-template">
<h1><%= key %></h1>
</script>
div.user view will add/remove user-list view dynamically according to collection data manipulation.
Hope this helpful.
I'm new to Backbone and trying to put together a small app and having problems getting a view to render client side.
Here is my client html in jade.
extends layout
block content
.row
#breadcrumbs.span12
script#room-list-template(type="text/template")
<td><%=name%></td>
<td><button class="btn btn-info">Join Room</button></td>
script(src="/javascripts/dislocated_poker/index.js").
script(src="/javascripts/dislocated_poker/nav.js").
script(src="/javascripts/dislocated_poker/room.js").
script(type="text/javascript").
$(function(){
DislocatedPoker.init();
})
This call my init function to fetch the data which is stashed away in MongoDb
DislocatedPoker = {
init : function() {
var crumbView = new DislocatedPoker.BreadcrumbView({el : "#breadcrumbs"});
crumbView.render();
var rooms = new DislocatedPoker.Rooms();
var roomListView = new DislocatedPoker.RoomListView({collection : rooms});
rooms.fetch();
}
};
And here are my views and models.
DislocatedPoker.Room = Backbone.Model.extend({
});
DislocatedPoker.Rooms = Backbone.Collection.extend({
model : DislocatedPoker.Room,
url : "/api/rooms"
});
DislocatedPoker.RoomView = Backbone.View.extend({
tagName : "tr",
render : function() {
var template = $("#room-list-template").html();
var compiled = _.template(template, this.model.toJSON());
$(this.el).html(compiled);
return this;
}
})
DislocatedPoker.RoomListView = Backbone.View.extend({
initialize : function() {
this.collection.bind("reset", this.render, this);
this.collection.bind("add", this.render, this);
},
tagName : "table",
className : "table table-striped",
render : function() {
var els = [];
this.collection.each(function(item) {
var itemView = new DislocatedPoker.RoomView({model : item});
els.push(itemView.render().el);
})
//return this;
$(this.el).html(els);
$("#room-list").html(this.el);
}
})
I see JSON being returned from the fetch() method and the collection is iterated, but the result never ends up as client html. If I view the source of the HTML I see the following where the template should render.
<script id="room-list-template" type="text/template"><td><%=name%></td>
<td><button class="btn btn-info">Join Room</button></td>
I feel like I am missing something pretty obvious but can't seem to pinpoint the issue.
Any guidance is much appreciated.
Thanks.
It looks like the following won't work:
$(this.el).html(els);
jQuery's html function takes a string, you're providing an array. Try with:
$(this.el).html(els.join(""));
You should try the following:
this.collection.bind("fetched", this.render, this);
I'm trying to achieve to render a block of HTML by using a model's attribute as a variable in a view.
App = Backbone.Model.extend({
contentType: "text"
});
AppView = Backbone.View.extend({
ContentTpl: _.template( $('#slide-'+this.model.get('contentType')).html() ),
render: function(){
$('#wrapper').html( this.ContentTpl() );
}
});
var app = new App();
var appView = new AppView({model: app});
appView.render();
HTML:
<div id="wrapper">
</div>
<script type="text/template" id="slide-text">
<p>This is a test</p>
</scrip>
But this results in an error...
You defined your view wrong.
you have
AppView = Backbone.Model.extend({
it should be
AppView = Backbone.View.extend({
and, you cannot evaluate this.model before view is initialized, do the following instead:
ContentTpl: function() {
return _.template( $('#slide-'+ this.model.contentType).html() );
},
and , contentType is not a model attribute, it's an attribute on the model object, you cannot use get().
to define it as a model attribute you have to either define it as a default value in the model, or pass it when you instantiate an object:
var app = new App({contentType: 'text'});
or
App = Backbone.Model.extend({
defaults: {
"contentType": "text"
}
});
You have to load your template in the initialize function. this.model doesn't exist at that point.
initialize: function() {
this.ContentTpl = _.template( $('#slide-'+this.model.get('contentType')).html() );
}
However, this is still a bad pattern form backbone. I would inject it as an option.
var template = $('#slide-'+this.model.get('contentType')).html();
var appView = new AppView({model: app, ContentTpl: template });
...
// in your view
initialize: function(options) {
this.ContentTpl = _.template( options.ContentTpl );
}