backbone.js绑定问题
Issues with backbone.js binding
我是主干网的新手,试图通过绑定获得模型更新来更新我的html,但没有成功。我正在使用jquery.window插件来创建弹出窗口。检查我按下更改标题按钮并更新我的模型标题,html没有得到更新。非常感谢任何帮助,谢谢
Eric
这是我的代码
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);
您忘记为WindowView
的模型向change:title
绑定添加方法。
Backbone.js文档介绍了以下关于on
-函数(又名绑定)的内容:
object.on(event,callback,[context])别名:bind
将回调函数绑定到对象。无论何时触发事件,都将调用回调。
因此,对于this.model.bind("change:title");
,您刚刚提供了每次更改属性title
时都会触发的事件。您还没有提供回调函数,因此在触发事件时不会发生任何事情。我想您希望回调是WindowView
的呈现函数,所以这应该可以修复它:
this.model.on("change:title", this.render); // changed to on as bind is deprecated but still supported
这样,每当触发事件change:title
时,将调用与模型对应的WindowView
的render
。
相关文章:
- ng绑定和ng href问题.ng href未从控制器加载数据
- 绑定的角度ng-max问题
- 性能问题:通用选择器与单独绑定
- 使用AngularJS UI路由器时出现元素绑定问题
- 数据互绑定问题:转换器只运行一次,无法绑定元素的 ID
- 挖空和显示模块模式的数据绑定问题
- 使用大括号的 Internet Explorer 上的 AngularJS 数据绑定问题
- backbone.js绑定问题
- SAPUI5绑定问题:json文件中维护的列表项链接不起作用
- 绑定的Javascript问题
- 将事件绑定到Bootstrap 3(button.js)按钮无线电时出现问题
- 将javascript绑定到提交按钮时出现问题
- Aurelia类的问题.使用checked.bind绑定
- AngularJS:图片上传+文件阅读器预览.控制器、指令和作用域之间的绑定出现问题
- 挖空 - 单击绑定到对象函数 - 范围问题
- Angular JS(嵌套变量)中的绑定问题
- 触摸事件的挖空事件绑定导致滚动问题
- JavaScript setInterval 范围问题:绑定的替代方案
- 击倒剑道问题绑定通过计算观察
- 奇怪的问题绑定事件与骨干,“;这个“;没有更新