如何正确渲染 Backbone.js 视图

Posted

技术标签:

【中文标题】如何正确渲染 Backbone.js 视图【英文标题】：How to render Backbone.js view properly 【发布时间】：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 小时后将其应用于上述代码。请帮帮我。谢谢。 【参考方案1】：

您需要在您的渲染函数中为视图创建 HTML，而不是像现在这样将它放在 HTML 页面中。然后您可以在视图中控制相关切换功能中元素的隐藏和显示。

所以这里是做什么：

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 属性，这通常会更好，因为这意味着您可以在多个位置重用视图。这不是问题，因为当您通过执行以下操作选择它们时，它们的范围是视图：this.$(".leftpanel")。请注意，您还必须修改 CSS 以反映此更改。

另外，我在渲染函数中将要渲染为字符串的 HTML 的方式并不是处理此问题的最佳方式。最好使用模板库。那里有植物，还有一种与 Backbone 一起提供的。使用模板库可以让您更好地重用您的 HTML sn-ps，并且不会用难看的字符串污染您的视图。

【讨论】：

非常感谢 dcarson！这项工作！对于渲染函数中的 html 字符串，是的，我知道我们可以使用 underscore.js 将其制作成模板，我会尝试处理 :) cml 没有enough rep to upvote，而我有。 谢谢 :) 支持返回。 是的，很抱歉没有足够的声誉来投票，我也是 *** 的新手 :)

以上是关于如何正确渲染 Backbone.js 视图的主要内容，如果未能解决你的问题，请参考以下文章

在 BackBone js 中渲染视图时调用 javascript。渲染后回调？

如何使用backbone.js 路由器切换视图？

将集合绑定到 Backbone.js 中的视图

Jquery Draggable 和 Backbone.js 从可放置成功回调内部获取对骨干模型的引用

Backbone.js - 导航时出现 404 jQuery 错误

backbone.js - 模板不会在asp.net视图上呈现