【发布时间】：2013-06-30 14:27:31
【问题描述】：
我正在尝试自己学习backbone.js。 我创建了一个简单的视图，并希望切换两个不同 DIV 元素的可见性。
我不知道如何使用 Backbone 来正确渲染它。
希望有人可以帮助指出我的代码有什么问题。谢谢。
这是 HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>Backbone view test</title>
<style type="text/css">
#leftpanel {float:left; height:300px; width:300px; border:1px solid; border- radius:5px;}
#rightpanel {position:relative; left:20px; float:left; height: 300px; width:300px; border:1px solid; border-radius:5px;}
#controlpanel {position:absolute; top:400px;}
</style>
<body>
<div id="container"></div>
<div id="leftpanel">this is left panel</div>
<div id="rightpanel">this is right panel</div>
<div id="controlpanel">
<button id='LeftButton' style="float: left; width: auto;">Hide Left Panel</button>
<button id='RightButton' style="float: left; width: auto;">Hide Right Panel</button>
</div>
<script src="json2.js"></script>
<script src="jquery-1.10.1.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script src="backbone.localStorage.js"></script>
<script src="1.js"></script>
</body>
</html>
这里是js代码
$(function(){
var token = '';
var appview = Backbone.View.extend({
el: $("#container"),
initialize: function(){
this.lp = this.$("#leftpanel");
this.rp = this.$("#rightpanel");
_.bindAll(this, 'render', 'toggleLeft', 'toggleRight');
this.render();
},
events: {
"click #LeftButton" : "toggleLeft",
"click #RightButton" : "toggleRight"
},
toggleLeft: function(){
token = "left";
this.render(token);
},
toggleRight: function(){
token = "right";
this.render(token);
},
render: function(e) {
if (e === "left") {
this.lp.hide();
this.rp.show();
} else {
this.rp.hide();
this.lp.show();
}
}
});
var app = new appview();
});
所以这是工作版本的html代码和java脚本
HTML
<!DOCTYPE html>
<html>
<head>
<title>Backbone view test</title>
<link href="el.css" rel="stylesheet"></link>
<body>
<div id="container"></div>
<script src="json2.js"></script>
<script src="jquery-1.10.1.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script src="backbone.localStorage.js"></script>
<script src="1.js"></script>
</body>
</html>
JavaScript
$(function(){
var appview = Backbone.View.extend({
el: "#container",
initialize: function(){
var lp = this.$(".rightpanel");
_.bindAll(this, 'render', 'toggleLeft', 'toggleRight');
this.render();
},
events: {
"click .LeftButton" : "toggleLeft",
"click .RightButton" : "toggleRight"
},
toggleLeft: function(){
this.$(".leftpanel").hide();
this.$(".rightpanel").show();
},
toggleRight: function(){
this.$(".rightpanel").hide();
this.$(".leftpanel").show();
},
render: function(e) {
var viewHtml = '<div class="leftpanel">this is left panel</div>'
viewHtml += '<div class="rightpanel">this is right panel</div>'
viewHtml += '<div class="controlpanel">'
viewHtml += '<button class="LeftButton" style="float: left; width: auto;">Hide Left Panel</button>'
viewHtml += '<button class="RightButton" style="float: left; width: auto;">Hide Right Panel</button>'
viewHtml += '</div>'
this.$el.empty().append(viewHtml);
}
});
var app = new appview();
});
现在假设我已经有了 jquery UI 的必要插件，并且想使用主题来创建“左侧图标按钮”，我如何将它应用到上面的代码并使其适用于相同的事情？
感谢任何专家可以指导我。提前致谢。
【问题讨论】：
-
我刚刚了解了 jquery UI 主题，也想尝试一下。但我不知道如何在阅读在线资料 4 小时后将其应用于上述代码。请帮帮我。谢谢。
标签： javascript html backbone.js render