1

我是 Backbone.js 的新手，遇到了一个简单的视图和模型场景的范围问题。

我创建了一个具有单个默认“分数”值的简单模型。我还创建了一个简单的视图，其中包含一个“分数”的模板渲染值和一个每次按下时将分数增加一的按钮。每次更改分数值时，视图都会重复渲染。

我有这个工作，但在某种程度上，我认为可能是一个拙劣的。除非我在视图变量“thisView”中缓存“this”的值，否则模板只会第一次呈现。如果我不这样做，它似乎会失去焦点和渲染错误。这是一个好主意吗？或者我错过了关于重复应用渲染的一些东西。

感谢您的任何建议

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <style>
       #view_container{background-color: rgba(12, 5, 11, 0.14);width: 100px;height: 100px;padding: 10px;}
    </style>
</head>
<body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>

<!-- View Template -->
<script type="text/template" id="view-template">
    <div class="profileSpace">
        <p>Score: <%= score %></p>
    </div>
    <button id="increaseScoreButton">Increase Score</button>
</script>

<div id="view_container"></div>

<script type="text/javascript">
(function ($) {


MyModel = Backbone.Model.extend({
    defaults:{
        score:0
    },
    initialize: function(){

    },
    increaseScore: function(){

        //Increase Score by 1

        var currentScore = this.get("score");

        var newScore = currentScore +1;

        this.set({score:newScore});

    }
});

MyView = Backbone.View.extend({

        el: $("#view_container"),

        template: _.template($('#view-template').html()),

        initialize: function(model){

                thisView =this;

                this.model.bind('change', this.render, this);

                this.render();

            },
        events: {

            "click #increaseScoreButton":  "increaseScore"

        },

        increaseScore: function(){

            this.model.increaseScore();

        },
        render: function(){

            var currentScore = thisView.model.get("score");

            var html = thisView.template({"score":currentScore});

            $(thisView.el).html( html );
            return thisView;
        }
    });

myModel = new MyModel;
myApp = new MyView({model:myModel});

})(jQuery);

</script>

</body>
</html>
4

1 回答 1

1

您通过绑定change事件this.model.bind('change', this.render, this);

此语法在 Backbone 0.5.2 中引入，但您在示例中使用 Backbone 0.3.3。

0.5.2 — 2011 年7 月 26 日
bind 函数现在可以采用可选的第三个参数来指定回调函数的 this。

将 Backbone 升级到更新的版本（截至今天为 0.9.2），您应该会得到预期的行为。

或者，正如 CoryDanielson 在评论中指出的那样，您可以使用_.bindAll来保证上下文：

MyView = Backbone.View.extend({
    initialize: function(model) {
        _.bindAll(this, 'render');
        this.model.bind('change', this.render);
        this.render();
    },

    render: function(){
        var currentScore = this.model.get("score");
        var html = this.template({"score":currentScore});
        $(this.el).html( html );
        return this;
    }
});
于 2012-10-16T11:21:12.790 回答