私はバックボーンに不慣れで、バインディングを介してhtmlを更新するためにモデルを更新しようとしていますが、運がありません。jquery.windowプラグインを使用してポップアップウィンドウを作成しています。タイトル変更ボタンを押してモデルタイトルを更新することを確認してください。HTMLが更新されません。助けていただければ幸いです、ありがとう
エリック
これが私のコードです
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);