I've got an index page that lists taxes in a table. I'm trying to
implement this with ember.js following some of the code in the
contacts example app.
Here is the gist: https://gist.github.com/1494281
When I don't load the content from JSON, by commenting out line 19 of
taxes.js, the table renders correctly. However if I use the content
that I pulled from taxes.json then the table renders without tr and
td elements.
Script:
App.Tax = Ember.Object.extend({});
App.taxesController = Ember.ArrayController.create({
content: [
{name:"tax1",rate:"10",number_id:"TaxIDNum"},
{name:"tax2",rate:"9",number_id:null}
],
newTax: function() {
this.pushObject(App.Tax.create({}));
},
loadTaxes: function() {
console.log('loadTaxes');
var self = this;
$.getJSON('/taxes.json', function(json) {
console.log('got response', taxes);
var taxes = json.map(function(item) {
return self.createTaxFromJSON(item);
});
self.set('content', taxes);
});
},
createTaxFromJSON: function(json) {
console.log("createTaxFromJSON", json.tax);
return App.Tax.create(json.tax);
}
});
App.taxesController.loadTaxes();
App.selectedTaxController = Ember.Object.create({
content: null
});
App.TaxListView = Ember.View.extend({
classNameBindings: ['isSelected'],
click: function() {
var content = this.get('content');
console.log('click', content);
App.selectedTaxController.set('content', content);
},
isSelected: function() {
var selectedItem = App.selectedTaxController.get('content');
var content = this.get('content');
if (content == selectedItem) {
return true;
}
return false;
}.property('App.selectedTaxController.content')
});
App.TaxView = Ember.View.extend({
contentBinding: 'App.selectedContactController.content'
});
HTML:
<script type="text/x-handlebars">
<table>
{{#each App.taxesController.content}}
{{#view App.TaxListView contentBinding="this" tagName="tr"}}
{{#with content}}
<td>{{name}}</td>
<td>{{rate}}</td>
<td>{{number_id}}</td>
<td>
Edit
Delete
</td>
{{/with}}
{{/view}}
{{/each}}
</table>
</script>
JSON:
[{"tax":{"account_id":1,"created_at":"2011-12-16T22:45:43Z","id":1,"name":"CA Sales Tax","number_id":"","rate":10.0,"updated_at":"2011-12-16T22:45:43Z"}},{"tax":{"account_id":1,"created_at":"2011-12-17T01:03:01Z","id":2,"name":"Second Tax","number_id":"EIN29387","rate":0.3,"updated_at":"2011-12-17T01:03:01Z"}}]
When you look at the resulting HTML, you'll notice that ember added tags inside your table. these are the markers for bindings to work
according to the HTML specification, inside a tag there MUST only be , , , tags, everything else is undefined behaviour
to make it work, you'll have to remove the {{#view}} and it should at least render something useful.
Related
Hello everyone,
I've been playing around with the handlebars trying to make it work in my project, but I keep getting no results when I'm testing the page.
I'm using the JSON data that I have received from another page. Those data should be displayed after compiling the template. But nothing really happens, I just get no results at all.
get_items_data.js
var source = $("#mytemplate").html();
var template = Handlebars.compile(source);
var Items = Array();
getting_items_data = true;
$.get('GetItemsData',function(responseJson) {
if(responseJson!=null){
$.each(responseJson, function(key,value) {
Items.push({ "id": value['item_id'], "blabla": "bla" });
});
}
});
$('body').append(template(Items));
test.jsp
<script id="mytemplate" type="text/x-handlebars-template">
<table>
<thead>
<th>Items</th>
</thead>
<tbody>
{{#each this}}
<tr>
<td>{{id}}</td>
<td>{{blabla}}</td>
</tr>
{{/each}}
</tbody>
</table>
</script>
JSON data format:
[{"ItemID":74,"SectionID":4},{"ItemID":78,"SectionID":4}]
Any ideas what may be wrong here?
It looks your template function is called before you have the data returned, so the Items array is empty when the elements are appended to the DOM. Unlike AngularJS, Handlebars is static templating so it won't update the DOM if you update the array later.
Try move that render logic into the callback of get:
$.get('GetItemsData',function(responseJson) {
if(responseJson!=null){
$.each(responseJson, function(key,value) {
Items.push({ "id": value['item_id'], "blabla": "bla" });
});
$('body').append(template(Items));
}
});
$(document).ready(function() {
LoadItems();
});
Will never execute inside a script of type text/x-handlebars-template.
Also there could be a problem with your variables attempting to get values from the dom before it's loaded.
Here is a dumbed down version that works: http://jsfiddle.net/whDqv/
function LoadItems()
{
var source = $("#mytemplate").html();
var template = Handlebars.compile(source);
var Items = Array();
getting_items_data = true;
Items.push({ "id": 1, "blabla": "bla" });
var template = Handlebars.compile(source);
$('body').append(template(Items));
}
$(document).ready(function() {
LoadItems();
});
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 am trying to learn backbone.js ( Backbone.js 1.0.0) this is my sample html page where iam using collection. fetch() method to get the collection,and it is displayed using view .i am getting result in
google chrome,but nothing is displayed in mozilla. i don't know the exact reason.
while i refere to backone site http://backbonejs.org/#Collection-fetch
it is qouted that :
Note that fetch should not be used to populate collections on page load — all models needed at load time should already be bootstrapped in to place. fetch is intended for lazily-loading models for interfaces that are not needed immediately: for example, documents with collections of notes that may be toggled open and closed.
is this is related with my issue?
this is my sample html page
<!DOCTYPE html>
<html>
<head>
<title>Backbone Application</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/underscore.js" type="text/javascript"></script>
<script src="js/backbone.js" type="text/javascript"></script>
</head>
<body>
<div class="list"></div>
<script id="personTemplate" type="text/template">
<td> <strong><%= name %></strong></td>
<td>(<%= age %>) </td>
<td> <%= occupation %> </td>
</script>
<script type="text/javascript">
//Person Model
var Person = Backbone.Model.extend({
defaults: {
name: 'Guest User',
age: 30,
occupation: 'worker'
}
});
// A List of People
var PeopleCollection = Backbone.Collection.extend({
model: Person,
initialize: function(){
alert("intialise")
},
url:'/RestFul/rest/members/info',
});
// View for all people
var PeopleView = Backbone.View.extend({
tagName: 'table',
render: function(){
this.collection.each(function(person){
var personView = new PersonView({ model: person });
this.$el.append(personView.render().el); // calling render method manually..
}, this);
return this; // returning this for chaining..
}
});
// The View for a Person
var PersonView = Backbone.View.extend({
tagName: 'tr',
template: _.template($('#personTemplate').html()),
////////// initialize function is gone from there. So we need to call render method manually now..
render: function(){
this.$el.html( this.template(this.model.toJSON()));
return this; // returning this from render method..
}
});
var peopleCollection = new PeopleCollection();
//peopleCollection.fetch();
peopleCollection.fetch({ success: function () { console.log("collection fetched"); } });
//peopleCollection.fetch({context:collection}).done(function() {
// console.log(this.length)
// })
//console.log(peopleCollection.toJSON())
alert(JSON.stringify(peopleCollection));
var peopleView = new PeopleView({ collection: peopleCollection });
$(document.body).append(peopleView.render().el); // adding people view in DOM
</script>
</body>
</html>
any help will be appreciated
Try with
var fetching = peopleCollection.fetch({ success: function () { console.log("collection fetched"); } });
$.when(fetching).done(function(){
var peopleView = new PeopleView({ collection: peopleCollection });
$(document.body).append(peopleView.render().el); // adding people view in DOM
});
var fetching = peopleCollection.fetch({ success: function () {
var peopleView = new PeopleView({ collection: peopleCollection });
$(document.body).append(peopleView.render().el);
} });
I think we can call the view render inside the success callback
I use Web Api and Knockout.js in my project. I want to try like this: if I click the "Home" I want to refresh just main div. So I write this code.
My script in layout.cshtml
<script type="text/javascript">
$(document).ready(function () {
ko.applyBindings(new TalesViewModel());//First load the code is runnig and load the main div
function TalesViewModel() {
var self = this;
self.tales = ko.observableArray();
$.getJSON("/api/tales/", self.tales);
}
$('#home').click(function () {
var Tale = function (TaleName, Content, VoicePath, Tales) {
self = this;
self.TaleName = TaleName;
self.Content = Content;
self.VoicePath = VoicePath;
}
var mapping = {
'tales': {
create: function (options) {
return new Tale(options.data.TaleName, options.data.Content,
options.data.VoicePath);
}
}
}
var data = $.getJSON("/api/tales/", Tale);
var viewModel = ko.mapping.fromjs(data, mapping);
ko.applyBindings(viewModel);
})
})
</script>
I want to refresh this place
<div id="main">
#RenderBody()
</div>
TaleList.cshtml (PartialView)
<div>
<ul data-bind="foreach: tales">
<li>
<div>
<div>Masal Adı</div>
<span data-bind="text: $data.TaleName"></span>
</div>
<div>
<div>İçerik</div>
<span data-bind="text: $data.Content"></span>
</div>
<div>
<div>Ses Dosyası</div>
<span data-bind="text: $data.VoicePath"></span>
</div>
</li>
</ul>
When I clicked Home main div is refresh but no data in here. I think I have to use Knockout something but I don't know how can I do it.
I hope I can explain. Thanks all replies.
Update
If I check with firebug I see this error "TypeError: Object # has no method 'fromjs'"
Update2
I added my first knockout code when I load the project.
This is what you need to do:
Create a js object
var Tale = function (TaleName, Content, VoicePath, Tales) {
self = this;
self.TaleName = TaleName;
self.Content = Content;
self.VoicePath = VoicePath;
}
Create a mapping to convert to your js objects
var mapping = {
'tales': {
create: function(options) {
return new Tale(options.data.TaleName, options.data.Content,
options.data.VoicePath);
}
}
}
Check that your data matches something like below, checking the names match as below:
var data = {"tales" : [{"TaleName": "T1", "Content":"c1", "VoicePath":"v1"}, {"TaleName": "T2", "Content":"c2", "VoicePath":"v2"}]}
var viewModel = ko.mapping.fromJS(data, mapping);
Apply the bindings
ko.applyBindings(viewModel);
Here is a working fiddle with mimicked data
http://jsfiddle.net/dxJpc/1/
Update
You are mixing a combination of getJson and ajax, you only need one.
This can be replaced: (With Ajax)
$.ajax({
type: 'GET',
url: '/Pages/TaleList/',
contentType: 'application/html; charset=utf-8',
dataType: 'html'
})
.success(function (data) {
alert("okey!")
var viewModel = ko.mapping.fromJS(data, mapping);
ko.applyBindings(viewModel);
})
.error(function (req, status, error) {
alert("Error!Occured")
})
With getJSON:
var data = $.getJSON("/api/tales/", Tale);
var viewModel = ko.mapping.fromJS(data, mapping);
ko.applyBindings(viewModel);
Update 3
If you are loading your initial load as you have changed it to, you can simply put this in your on click event:
$('#home').click(function () {
ko.applyBindings(new TalesViewModel());
})
Update 4
Declare the view model in the document ready.
$(document).ready(function () {
var viewModel = new TalesViewModel();
ko.applyBindings(viewModel);
Then change your click to this:
$(document).ready(function () {
viewModel = new TalesViewModel();
I have a mustache template and I would like to call some function on the mustache variables ({{name}} in this case). Specifically, I want to call toLowerCase() method on the name variable.
<tbody>
<script id="mytemplate" type="text/template">
{{#cat}}
<tr data-index="{{age}}-{{name}}"></tr>
{{/cat}}
</script>
</tbody>
I tried looking in the mustache docs but I couldn't find out how to do this. I tried doing
<tr data-index="{{age}}-{{name.toLowerCase()}}"></tr>
<tr data-index="{{age}}-{{name}}.toLowerCase()"></tr>
But I'm not getting what I expect. I render the template with this code which gets triggered on document ready.
$(function() {
$.getJSON('/cats.json', function(data){
var template = $("#mytemplate").html();
var view = Mustache.to_html(template, data);
$("tbody").html(view);
});
})
you need to pass the function as part of the data, like so:
$(function() {
$.getJSON('/cats.json', function(data){
data.lower = function () {
return function (text, render) {
//wrong line return render(text.toLowerCase());
return render(text).toLowerCase();
}
};
var template = $("#mytemplate").html();
var view = Mustache.to_html(template, data);
$("tbody").html(view);
});
})
and the template:
<tr data-index="{{age}}-{{#lower}}{{name}}{{/lower}}"></tr>