I am just getting started with Backbone, and I have set up in a sample app the backbone dependencies (backbone, underscore, json2), and I started writing some backbone models, views, and such for my app.
My question is: suppose a user navigates to a page in my app. How does this page then initialize/call a backbone view? I was under the impression that I am supposed to include this kind of jQuery/js on the page that is loaded:
$(document).ready(function(){
window.app = new SampleApp.Views.Articles.ShowView();
new SampleApp.Routers.RootRouter();
Backbone.history.start();
});
And then I thought the Articles ShowView would run:
$(document).ready(function(){
SampleApp.Views.Articles || (SampleApp.Views.Articles = {});
window.SampleApp.Views.Articles.ShowView = Backbone.View.extend({
el: ".container",
events: {
'click .overlay': 'test'
},
initialize: function(){
//eg: this.model.bind('change', this.render, this)
},
render: function(){
$(".container").html('');
alert('got here');
},
test: function(){
alert('clicked a picture');
}
})
});
However, when I load the page, I don't get any of the functionality specified in my ShowView. (no alerts etc..). I realize that 'ShowView' is a misnomer, as it doesn't actually do anything yet. But if it is truly being called, then shouldn't these alerts run?
FYI I think I included all the files for backbone correctly:
<script src="{{ STATIC_URL }}js/underscore.js"></script>
<script src="{{ STATIC_URL }}js/json2.js"></script>
<script src="{{ STATIC_URL }}js/backbone.js"></script>
{# Models #}
<script src="{{STATIC_URL}}js/backbone/models/article.js"></script>
{# Views #}
<script src="{{STATIC_URL}}js/backbone/views/articles/show.js"></script>
{# Routers #}
<script src="{{STATIC_URL}}js/backbone/routers/root.js"></script>
In your example, you need something that invokes render on the ShowView instance. This can either be the responsibility of a route in your router, or you can just do it in the document ready handler that creates your view.
window.app = new SampleApp.Views.Articles.ShowView();
window.app.render();
Related
I'm development a blog using django and I have included the addthis tool for include the share buttons. I'm including the addthis buttons in the posts detail page. I need to get the facebook shares count for the current blog post deetail. I'm using these steps, but I'm gettin this error in the console: ReferenceError: addthis is not defined.
The addthis code is loaded remotely then, I think that my js is not running because it runs before the addthis script load is complete. How can I fix it?
{% block js %}
<script type="text/javascript"src="//s7.addthis.com/js/300/addthis_widget.js#pubid=fdfs" async="async"></script>
<script src="{% static 'js/blog/blog_list.js' %}"></script>
<script>
$(function () {
addthis.sharecounters.getShareCounts('facebook', function(obj) {
console.log(obj);
});
})
</script>
{% endblock %}
You can wrap your function around window.load like below
$(window).load(function() {
addthis.sharecounters.getShareCounts('facebook', function(obj) {
console.log(obj);
});
})
This will ensure that the code will get executed once entire window is loaded. For further reading read this.
Apologies if this isn't quite the right place (as opposed to either libraries own github issue page, but as I've not been able to determine exactly which library is not quite working correctly hard to log it specifically).
I'm using ember data fragments on my model (an array), and localstorage to save down my model. When calling rollback upon the saved model, it seems to reset the fragments back to their original state (i.e. no values), but it still maintains the fragment itself on the array, rather than dropping the item out of the array.
I've got a fiddle setup, click 'add' to add a model, click to view it's details, then click 'add' in there, followed by 'cancel'. You can see that the type + desc values drop out, but the element is still there.
If I switch out to using the Fixture adapter then it all works as expected, just not sure where to start even attempting to debug, I've stepped through many lines of _super calls, and what not trying to figure it out, but just get lost.
Note
This is a pseudo version of my actual app, and curiously enough when you navigate to the home page and then back to the details page, it seems to resolve the type/desc correctly, which it is not doing on my actual app, it still maintains the default values. However refreshing the page makes it work perfectly from then onwards.
Any help greatly appreciated!
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="//builds.emberjs.com/tags/v1.7.0/ember.js"></script>
<script src="//builds.emberjs.com/canary/ember-data.js"></script>
<script src="//raw.githubusercontent.com/lytics/ember-data.model-fragments/master/dist/ember-data.model-fragments.js"></script>
<script src="//raw.githubusercontent.com/kurko/ember-localstorage-adapter/master/localstorage_adapter.js"></script>
<script>
window.App = Ember.Application.create();
App.ApplicationStore = DS.Store.extend();
App.ApplicationSerializer = DS.LSSerializer.extend();
App.ApplicationAdapter = DS.LSAdapter.extend({
namespace: 'cars'
});
App.Car = DS.Model.extend({
make: DS.attr(),
model: DS.attr(),
features: DS.hasManyFragments('feature')
});
App.Feature = DS.ModelFragment.extend({
type: DS.attr(),
description: DS.attr()
});
App.Router.map(function () {
this.route('index', { path: '/' });
this.route('car', { path: '/car/:car_id'});
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('car');
},
actions : {
add: function(model) {
var car = this.store.createRecord('car', {
make: 'Dodge',
model: 'Viper',
features: []
});
car.save();
}
}
});
App.CarRoute = Ember.Route.extend({
actions: {
add: function(model) {
model.get('features').createFragment({
type: 'Something',
description: 'Some desc'
});
model.save(); //*/
},
cancel: function(model) {
model.rollback();
}
}
});
</script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script type="text/x-handlebars" data-template-name="index">
{{#link-to 'index'}}Home{{/link-to}}
<ol>{{#each}}
<li>{{#link-to 'car' this}}{{name}} {{model}}{{/link-to}}</li>
{{else}}
<button {{action 'add' model}}>Add</button>
{{/each}}</ol>
</script>
<script type="text/x-handlebars" data-template-name="car">
{{#link-to 'index'}}Home{{/link-to}}
<dl>
<dt>Make</dt>
<dd>{{make}}
<dt>Model</dt>
<dd>{{model.model}}</dd>{{#each features}}
<dt>{{_view.contentIndex}}. {{type}}</dt>
<dd>{{description}}</dd>
{{/each}}
</dl>
<button {{action 'add' model}}>Add</button>
<button {{action 'cancel' model}}>Cancel</button>
</script>
</body>
</html>
I havent worked with data fragments but fragment is a model itself so the element/fragment is still there because you have created a record for it.
This record is stored in the ember store until you do something with it.
Rollback, via emberjs.com,does this - "If the model isDirty this function will discard any unsaved changes".
The model in this case seems to be the fragment. Rollback gets rid of the changes, which is what it is doing in your case, removing the type and desc values, but the record itself is still in the store.
If you want to get rid of the fragment altogether you would have to delete it. http://emberjs.com/guides/models/creating-and-deleting-records/
I'm starting simple, trying to display a single value from a simple model.
This answer to "accessing the model from the template" suggests that it's necessary to extend ObjectController. At this point, there's have no application logic, so it doesn't seem like a controller (or a view) is really needed yet.
Likewise, there are no routes yet, so it doesn't seem like anything should be needed beyond App.IndexRoute.
The single object in the dictionary fixture has a title property with the value Hello Ember. I'm expecting to see that text displayed between two hard-coded arrows. Instead, all I get is the arrows.
The Index.html is:
<!DOCTYPE html>
<html>
<head>
<title>Dictionary</title>
</head>
<body>
<!-- Main body of the application -->
<script type="text/x-handlebars">
<p>Title: -->{{title}}<--</p>
</script>
<!-- ... Ember.js and other JavaScript dependencies ... -->
<script src="js/libs/jquery-1.10.2.min.js"></script>
<script src="js/libs/handlebars-1.0.0.js"></script>
<script src="js/libs/ember.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/app/application.js"></script>
<script src="js/routers/router.js"></script>
<script src="js/models/dictionary_model.js"></script>
<script src="js/controllers/dictionary_controller.js"></script>
</body>
</html>
And then the JavaScript:
// application.js
window.App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter.extend();
// router.js
App.Router.map(function() {
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('dictionary', 0);
}
});
// dictionary_model.js
App.Dictionary = DS.Model.extend({
title: DS.attr("string")
});
App.Dictionary.FIXTURES = [
{
id: 0,
title: "Hello Ember"
}];
// dictionary_controller.js
App.DictionaryController = Ember.ObjectController.extend({
});
I'm not sure where you're reading in the documentation that's contradicting, please update your question with the contradicting statements so they can be fixed.
The controller really only need be defined if you need to add additional computed properties, actions, or other methods. In your case you are correct in that it needn't be defined.
That being said, the application template (or unnamed template as in your case) is the root of your ember app. Any child routes/resources will be rendered in the {{outlet}} located in the application template(examples below).
The index route is a route underneath the application route. Resources are considered routes that can have children and generally associated with a model.
All this comes up to the main problem you're seeing. You've returned your model from the index route, but you are attempting to use it in the application route's template.
Here's a simplified version of your code
Code
App = Ember.Application.create();
App.ApplicationAdapter= DS.FixtureAdapter;
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('dictionary', 0);
}
});
App.Dictionary = DS.Model.extend({
title: DS.attr("string")
});
App.Dictionary.FIXTURES = [
{
id: 0,
title: "Hello Ember"
}];
Templates
<script type="text/x-handlebars">
<h2>Application Template</h2>
Here we Are in the Application Template
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<h2>Index Template</h2>
{{title}}
</script>
Example in action
http://emberjs.jsbin.com/OxIDiVU/443/edit
If anyone can put me out of my misery with this I would greatly appreciate it, drving me mad and I know it's gonna be something stupidly simple.
I have an array:
Data
var test = [{"name":"Kober Ltd","town":"Bradford","type":"Z1CA","number":3650645629},
{"name":"Branston Ltd.","town":"Lincoln","type":"Z1CA","number":3650645630}]
and I want to render this info as child elements inside a collectionView:
collectionView
App.ThreeView = Ember.CollectionView.extend({
itemViewClass: Ember.View.extend({
click: function(){
alert('hello')
},
classNames: ['element','foobar'],
templateName: 'foo'
})
})
and here is my controller:
controller
App.ThreeController = Ember.ArrayController.extend({
content: [],
init: function(){
var me = this;
$.each(test,function(k,v){
var t = App.ThreeModel.create({
name : v.name,
town: v.town,
type: v.type,
number: v.number
})
me.addObject( t )
})
console.log( me.content )
}
})
Templates:
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="three">
</script>
<script type="text/x-handlebars" data-template-name="foo">
<div class="symbol"> {{ view.content.type }} </div>
<div class="number"> {{ view.content.number }} </div>
<div class="name"> {{ view.content.name }} </div>
<div class="town"> {{ view.content.town }} </div>
</script>
I am using the latest Ember so...V2 router that syncs up all the parts with the 'Three' name. Every will work if I put the array directly into the view:
App.ThreeView = Ember.CollectionView.extend({
content: test, // manually added a pure array into view content
itemViewClass: Ember.View.extend({
click: function(){
alert('hello')
},
classNames: ['element','foobar'],
templateName: 'foo'
})
})
But when I try and do this 'properly', using Ember.js Objects, I get no rendered views ( aside from an empty application view ).
I have tried work arounds, like adding a 'contentBinding' from the view to the controller just to see if I can force a connection but still nothing. It is important that I render the view through the container as I am using Three.js to pick up on the rendered content and manipulate further.
So, to summarise: I can render pure arrays in view, but nothing passed from controller. Incidentally, the controller is definitely being instituted as I can console log its contents on init. If i change the view name, the controller is not instantiated so I know the namespacing is working.
thanks in advance!
I'm not sure to embrace the whole problem, but for now, when you define your controller, in the init() function, first don't forget to call this._super() (it will go through the class hierarchy and call the constructors). Maybe that's just the missing thing.
Edit: it seems like with the new router, defining a view as a CollectionView does not work.
so I replaced it with a normal Ember.View, and use an {each} helper in the template.
<script type="text/x-handlebars" data-template-name="three">
{{each controller itemViewClass="App.FooView" tagName="ul"}}
</script>
here is a minimal working fiddle: http://jsfiddle.net/Sly7/qCdAY/14/
EDIT 2:
By re-reading the question, and seeing you try to bind the CollectionView content's property to controller, I tried it, because it just work fine :)
http://jsfiddle.net/Sly7/qCdAY/15/
What I have so far:
App = Ember.Application.create({
LOG_TRANSITIONS: true
});
App.Router.map(function(match){
match('/').to('application');
match('/edit').to('edit');
});
App.ApplicationRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('edit');
},
events: {
startEdit: function( context ){
this.transitionTo( 'edit' );
}
}
})
App.EditRoute = Ember.Route.extend({
init: function(){
this._super()
console.log('EditRoute')
},
});
Handlebars:
<script type="text/x-handlebars" data-template-name = 'application'>
Hello World
{{ outlet main }}
</script>
<script type="text/x-handlebars" data-template-name = 'edit'>
<div class = 'edit-background'> Edit State: {{ title }} </div>
</script>
I have four questions:
When I open the application it just remains in the home page, is the redirectTo hook suppose to immediately redirect you to another state?
In addition, I have this events hash in AplicationRoute per suggestion from here: How to programmatically transition between routes using Ember.js' new Router. but I read through the answers and still am not sure how you are supposed to use it.
How do I test the router on the console? before you could navigate between the states by calling transitionTo commands, what do I do now?
For some odd reason, my application template seem to rendered twice, as in there are two 'Hello World' up there, and when try to add something like: <li>{{#linkTo edit}}edit{{/linkTo}}</li>
I get this error:
'Uncaught TypeError: Cannot read property 'container' of undefined -- ember.js:2223'
This is how you would initially load the editView/route/template on application start up:
Router
App.Router.map(function(match){
match('/').to('application',function(match){
match('/').to('edit')
})
})
ApplicationTemplate
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
EditTemplate
<script type="text/x-handlebars" data-template-name="edit">
I am embedded!
</script>
EditRoute
EditRoute = Ember.Route.extend({
renderTemplates:function () {
this.render('edit', {
into:'application'
});
})