i'm new to backbone and trying to get a model update to update my html through binding but having no luck. I'm using the jquery.window plugin to create the popup window. Check i press the change-title button and update my models title, the html doesn't get updated. Would really appreciate any help, Thanks
Eric
Here is my code
HTML:
<!DOCTYPE html>
<html>
<head>
<title>I have a back bone</title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="js/jquery.window.js"></script>
<script src="js/underscore.js"></script>
<script src="js/backbone.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/jquery.window.css">
<button id="add-window">Add Window</button>
<button id="change-title">Change Title</button>
<script type="text/template" id="search_template">
<label><%= title %></label>
<input type="text" id="search_input" />
<input type="button" id="search_button" value="Search" />
</script>
</body>
</html>
Javascript:
(function($) {
AppWindow = Backbone.Model.extend({
title : "John",
window : null
});
AppWindows = Backbone.Collection.extend({
initialize : function(models, options) {
this.bind("add", options.view.addWindowView);
}
});
WindowView = Backbone.View.extend({
initialize : function(){
_.bindAll(this, "render");
this.model.bind("change:title");
this.template = _.template($("#search_template").html());
this.render().el;
},
render : function(){
var formString = this.template(this.model.toJSON());
var win = $.window({
icon : 'http://www.fstoke.me/favicon.ico',
title : this.model.get("title"),
content : formString,
x : 80,
y : 80,
resizable : true,
});
this.el = $("#" + win.getWindowId()+".window_frame");
this.delegateEvents(this.events);
return this;
}
});
AppView = Backbone.View.extend({
views: {},
el : $("body"),
initialize : function() {
this.appWindows = new AppWindows(null, {
view : this
});
},
events : {
"click #add-window" : "addWindow",
"click #change-title" : "changeTitle"
},
addWindow : function() {
var window_title = "Eric";
var window_model = new AppWindow({
title : window_title
});
// Add a new model to our friend collection
this.appWindows.add(window_model);
},
changeTitle : function(){
var win = this.appWindows.at(0);
win.set("title", "jamjamajm");
},
addWindowView : function(model) {
var view = new WindowView({
model : model
});
model.set("window", view);
},
deleteWindow : function(wnd){
console.log("deleteing");
}
});
var appview = new AppView;
})(jQuery);
You forgot to add a method to the change:title
binding for the model of WindowView
.
The Backbone.js documentation says the following about the on
-function (aka bind):
object.on(event, callback, [context]) Alias: bind
Bind a callback function to an object. The callback will be invoked whenever the event is fired.
So with this.model.bind("change:title");
you have just supplied the event that is triggered every time the attribute title
is changed. You haven't supplied the callback-function so nothing happens when the event is fired. I presume you want the callback to be the WindowView
's render-function, so this should fix it:
this.model.on("change:title", this.render); // changed to on as bind is deprecated but still supported
This way whenever the event change:title
is fired, render
of the WindowView
corresponding to the model will be called.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.