I am trying to add different views {Tabular View or Chart View} in a table. Each can have its own data. I am using Backbone Marionette for this and have following line of code. But item view is not render.
html
<script id="grid-template" type="text/template">
<div>
Data is displayed using Tabular View and Chart View !
</div>
</script>
<script id="TabularViewTemplate" type="text/template">
<table><tr><td>Value1</td><td>Value2</td></tr> </table>
</script>
<script id="ChartTemplate" type="text/template">
<table><tr><td>Value1</td><td>Value2</td></tr> </table>
</script>
<div id="grid">
</div>
JS
var ANBaseModel= Backbone.Model.extend({
name:"",
type:""
});
var SSANModel= ANBaseModel.extend({
type:"SS"
});
var BaseView=Backbone.Marionette.ItemView.extend({
template: "#row-template",
tagName: "tr" ,
model:SSANModel
});
// A Spreadsheet View
var SSView= BaseView.extend({
render: function(){
alert(this.model.type);
if(this.model.type=="SS")
alert("Spreadsheet");
else if(this.model.type=="ChartAN")
alert("Chart");
}
});
// A Chart View
var ChartView = BaseView.extend({
render: function(){
alert(this.model.type);
if(this.model.type=="SS")
alert("Spreadsheet");
else if(this.model.type=="ChartAN")
alert("Chart");
}
});
// The grid view
var GridView = Backbone.Marionette.CompositeView.extend({
tagName: "table",
template: "#grid-template",
});
var SS= new SSANModel();
alert(SS.type);
var objSSView=new SSView ({model:SS,template:"TabularViewTemplate"});
var gridView = new GridView({
itemView: objSSView
});
gridView.render();
console.log(gridView.el);
$("#grid").html(gridView.el);
JsFiddle: http://jsfiddle.net/Irfanmunir/ABdFj/
How i can attach ItemView instances to composite View. Using this i can create different views having its own data . I am not using collection for composite view.
Regards,
Well you should create a collection with your models and pass it as argument when you create your gridView:
var gridView = new GridView({
collection: SSCollection,
itemView: objSSView
});
Each model of the collection will be a new istance of your defined itemView.
You also need to tell you CompositeView where to put your itemViews:
appendHtml: function(collectionView, itemView, index){
collectionView.$("tbody").append(itemView.el);
},
You could also try to use use buildItemView method:
buildItemView: function(item, ItemViewType, itemViewOptions){
var options = _.extend({model: item}, itemViewOptions);
switch(item.type){
case 'ss':
ItemViewType = SSView;
case 'another':
ItemViewType = AnotherView;
}
var view = new ItemViewType(options);
return view;
},
Related
I have a ViewModel which I am binding to view list item.
var MyViewModel = function() {
var self = this;
self.addItems = function(vm) {
vm.inventoryItems.push('New Item');
}
};
var myVM= new MyViewModel();
ko.applyBindings(myVM);
The view model has a property called inventoryItems (which is from a service).
I am bidning that to view using ,
<ul data-bind="foreach:inventoryItems">
<li>
<input class="form-control" type="text" data-bind="value: $data" />
</li>
</ul>
<div class="text-right">
<a data-bind="click: $parent.addItems">+ Add more</a>
</div>
Now, the items that are already in the collection , inventoryItems are getting rendered fine.
When I am adding a new item using, I can see the items being added via console, but the view is not getting updated!
self.addItems = function(vm) {
vm.inventoryItems.push('New Item');
}
The below code snippet will make your inventoryItems observable
var MyViewModel = function () {
var self = this;
self.inventoryItems = ko.observableArray();
self.addItems = function (vm) {
vm.inventories.push('New Item');
self.inventoryItems(vm.inventories);
}
};
var myVM = new MyViewModel();
ko.applyBindings(myVM);
I am not sure why my Underscore Template is not rendering. I would like it to show 3 select drop down menus based on the data returned.
Here's a fiddle to my code. Check the console for the data: http://jsfiddle.net/f7v3g/
If you see the data returned you'll see the following structure
-models
--attributes
---dimensions
----object0
-----name (Will be the text label that appears next to the first drop down menu)
-----refinements (children of refinements should be the option tags)
----object1
-----name (Will be the text label that appears next to the second drop down menu)
-----refinements (children of refinements should be the option tags)
----object2
-----name (Will be the text label that appears next to the third drop down menu)
-----refinements (children of refinements should be the option tags)
Here's the Backbone JavaScript:
(function () {
var DimensionsModel = Backbone.Model.extend({
defaults: {
dimensionName : 'undefined',
refinements : 'undefined'
}
});
var DimensionsCollection = Backbone.Collection.extend({
model: DimensionsModel,
url: 'http://jsonstub.com/calltestdata',
});
var setHeader = function (xhr) {
xhr.setRequestHeader('JsonStub-User-Key', '0bb5822a-58f7-41cc-b8a7-17b4a30cd9d7');
xhr.setRequestHeader('JsonStub-Project-Key', '9e508c89-b7ac-400d-b414-b7d0dd35a42a');
};
var DimensionsView = Backbone.View.extend({
el: '.js-container',
initialize: function (options) {
this.listenTo(this.model,'change', this.render);
this.model.fetch({
beforeSend: setHeader
});
console.log(this.model);
return this;
},
render: function () {
this.$el.html( this.template(this.model, 'dimensions-template') );
},
template: function (models, target) {
var templateSelectors = _.template($('#'+target).html(),{
dimensions: this.model
});
return templateSelectors;
},
});
var myCollection = new DimensionsCollection();
var myView = new DimensionsView({model: myCollection});
}());
Here is my HTML and Underscore template:
<div class="js-container">
<script type="text/template" id="dimensions-template">
<% _.each(dimensions, function(dimension,i){ %>
<%- dimension.get('dimensionName') %> <select id="<%- dimension.get('dimensionName') %>">
<option>Select</option>
<% _.each(dimension.get('refinements'), function(ref,x){ %>
<option data-refineurl='{
"refinementUrl": "<%- ref.refinementurl %>",
"nVal": "<%- ref.nval %>"
}'><%- ref.name %></option>
<% }); %>
</select>
<% }); %>
</script>
</div>
Edit: Spelling and example of data scructure.
I see few mistake:
1) inside DimensionsView initialize, you should add a this.render call
2) inside template: function (models, target), you use this.models. but you pass models as first parameter ?
3) Did you add model to your collection somewhere? now you template will try to loop over them. So it need models to loop in the collection.
i have to create events using backbone.js.Below is my js code
var Trainee = Backbone.Model.extend();
var TraineeColl = Backbone.Collection.extend({
model: Trainee,
url: 'name.json'
});
var TraineeView = Backbone.View.extend({
el: "#area",
template: _.template($('#areaTemplate').html()),
render: function() {
this.model.each(function(good){
var areaTemplate = this.template(good.toJSON());
$('body').append(areaTemplate);
},this);
return this;
}
});
var good = new TraineeColl();
var traineeView = new TraineeView({model: good});
good.fetch();
good.bind('reset', function () {
$('#myButtons').click(function() {
traineeView.render();
});
});
<div class = "area"></div>
<div class="button" id="myButtons">
<button class="firstbutton" id="newbutton">
Display
</button>
</div>
<script id="areaTemplate" type="text/template">
<div class="name">
<%= name %>
</div>
<div class="eid">
<%= eid %>
</div>
<div class="subdomain">
<%= subdomain %>
</div>
my o/p on clicking display button is
Display // this is a button//
Sinduja
E808514
HPS
Shalini
E808130
HBS
Priya
E808515
HSG
Now from the view i have to bind a change event to the model..the changes in the model must be triggered on the view to display the output on the click of display button.
This isn´t exactly answering your queston but:
if trainee (I've renamed it to trainees) is a collection you should set it using:
new TraineeView({collection: trainees});
Then in render:
this.collection.models.each(function(trainee)
And you propably wan´t to move the call to fetch outside the view, in the router perhaps:
trainees = new TraineeColl();
view = new TraineeView({collection: trainees});
trainees.fetch();
That way your view only listens to the model.
You also should move the bind part to the views initialize method
this.collection.bind('reset', function () {
this.render();
});
Hope this helps.
var TraineeView = Backbone.View.extend({
el: "#area",
initialize : function(options){ // you will get the passed model in
//options.model
var trainee = new TraineeColl();
trainee.fetch();
trainee.bind('reset change', this.render,this); //change will trigger render
// whenever any model in the trainee collection changes or is modified
}
template: _.template($('#areaTemplate').html()),
render: function() {
this.model.each(function(trainee){
var areaTemplate = this.template(trainee.toJSON());
$('body').append(areaTemplate);
},this);
return this;
}
});
var traineeView = new TraineeView({model: trainee});
});
I'm trying to render a simple collection view and having a weird issue.
The problem is that when i try to call the render method of the model in a collection's view it can't find the render method.
My Model And View
var PersonModel = Backbone.Model.extend({});
var PersonView = Backbone.View.extend({
tagName : "person",
events:{
"click h3":"alertStatus"
},
initialize:function(){
this.model.on('change',this.render,this);
} ,
render:function(){
var underscore_template = _.template('<h3>Name : <%= name %></h3>'+
'<h3>Last Name : <%= surname %></h3>' +
'<h3>Email : <%= email %> </h3>') ;
console.log("Person View Render Oldu");
this.$el.html(underscore_template(this.model.toJSON()));
},
alertStatus :function(e){
alert("Clicked on Model View");
}
});
My Collection And Collection View
var PersonList = Backbone.Collection.extend({
model:PersonModel,
url:'/models'
});
var personList = new PersonList();
var PersonListView = Backbone.View.extend({
tagName : "personlist",
render : function(){
this.collection.forEach(this.addOne,this);
},
addOne : function(personItem){
var personView = new PersonView({model:personItem});
this.$el.append(personView.render().el); // The call to personView.render throws undefined
},
initialize : function(){
this.collection.on('add',this.addOne,this);
this.collection.on('reset',this.addAll,this);
},
addAll : function(){
this.collection.forEach(this.addOne,this);
}
});
var personListView = new PersonListView({
collection:personList
});
personList.fetch({
success:function(){
console.log("Fetch success");
}
});
I'm calling this JS on document ready with Jquery and adding it to a div with id named app.
My fetch is also successful.The problem persists at the addOne function of the Collection View when trying to call personView.render().el
Any help would be appreciated.
You forgot returning the element in your render:
render : function() {
var underscore_template = _.template('<h3>Name : <%= name %></h3>'+
'<h3>Last Name : <%= surname %></h3>' +
'<h3>Email : <%= email %> </h3>') ;
console.log("Person View Render Oldu");
this.$el.html(underscore_template(this.model.toJSON()));
return this; // chaining
}
Otherwise you can't chain it and you can't access el afterwards.
the Template looks like this.
<div>
<H5>Status for your request</H5>
<table>
<tbody>
<tr>
<th>RequestId</th>
<th><%=id%></th>
</tr>
<tr>
<th>Email</th>
<th><%=emailId%></th>
</tr>
<tr>
<th>Status</th>
<th><%=status%></th>
</tr>
</tbody>
</table>
</div>
This is the View Javascript that renders the page.
window.StatusView = Backbone.View.extend({
initialize:function () {
console.log('Initializing Status View');
this.template = _.template(tpl.get('status'));
},
render:function (eventName) {
$(this.el).html(this.template());
return this;
},
events: { "click button#status-form-submit" : "getStatus" },
getStatus:function(){
var requestId = $('input[name=requestId]').val();
requestId= $.trim( requestId );
var request = requests.get( requestId );
var statusTemplate = _.template(tpl.get('status-display'));
var statusHtml = statusTemplate( request );
$('#results-span').html( statusHtml );
}
});
When the clicks on the input, the requestId is read and the status is appended in html element with id 'results-span'.
The failure happens when replacing the values in html-template with variable values.
var statusTemplate = _.template(tpl.get('status-display'));
var statusHtml = statusTemplate( request );
The rendering fails with the following error.
Uncaught ReferenceError: emailId is not defined
(anonymous function)
_.templateunderscore-1.3.1.js:931
window.StatusView.Backbone.View.extend.getStatusstatus.js:34
jQuery.event.dispatchjquery.js:3242
jQuery.event.add.elemData.handle.eventHandle
Underscore's _.template:
Compiles JavaScript templates into functions that can be evaluated for rendering.
[...]
var compiled = _.template("hello: <%= name %>");
compiled({name : 'moe'});
=> "hello: moe"
So basically, you hand the template function an object and the template looks inside that object for the values you use in your template; if you have this:
<%= property %>
in your template and you call the template function as t(data), then the template function will look for data.property.
Usually you convert the view's model to JSON and hand that object to the template:
render: function (eventName) {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
I don't know what your eventName is or what you're planning to do with it but you need to get an object with this structure:
data = { id: '...', emailId: '...', status: '...' }
from somewhere and hand that to the template function:
var html = this.template(data)
to get some HTML to put on the page.
Demo (with a fake model for illustrative purposes): http://jsfiddle.net/ambiguous/hpSpf/
OptionalExtrasView = Backbone.View.extend({
initialize: function() {
this.render();
},
render: function() {
// Get the product id
//var productid = $( this ).attr( "productid" );
var data = {name : 'moe'};
var tmpl = _.template($('#pddorder_optionalextras').html() );
this.$el.html(tmpl(data));
}
});
var search_view = new OptionalExtrasView({ el : $('.pddorder_optionalextras_div')});
and just before the body tag:
<script type="text/template" id="pddorder_optionalextras">
<%= name %>
</script>