我正在尝试自学 backbone.js。 我创建了一个简单的 View ，并想切换两个不同 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 的必要插件，并且想使用主题来创建“左侧带有图标的按钮”，我如何将它应用到上面的代码中并使其用于相同的事情？
如果有专家可以指导我，我将不胜感激。提前致谢。
最佳答案
您需要在渲染函数中为 View 创建 HTML，而不是像当前那样将其放在 HTML 页面中。然后你可以在 View 中的相关切换函数中控制元素的隐藏和显示。
所以这里是要做的:
1) 从您的 HTML 中删除以下内容
<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>
2) 修改渲染函数如下:
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);
}
3) 将您的事件更改为使用类，而不是 id:
events: {
"click .LeftButton" : "toggleLeft",
"click .RightButton" : "toggleRight"
},
4) 更改向左切换和向右切换功能:
toggleLeft: function(){
this.$(".leftpanel").hide();
this.$(".rightpanel").show();
},
toggleRight: function(){
this.$(".rightpanel").hide();
this.$(".leftpanel").show();
},
请注意，我将您的 id 属性更改为 class 属性，这通常更好，因为这意味着您可以在多个位置重用 View 。这不是问题，因为当您通过执行以下操作选择它们时，它们被限制在 View 范围内:this.$(".leftpanel")。请注意，您还必须修改 CSS 以反射(reflect)此更改。
此外，我将 HTML 放置为在您的呈现函数中呈现为字符串的方式并不是处理此问题的最佳方式。最好使用模板库。那里有 planty，还有一个与 Backbone 一起提供。使用模板库可以让您更好地重用 HTML 片段，而不会用丑陋的字符串污染您的 View 。
关于javascript - 如何正确渲染 Backbone.js View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17438832/