Question

希望你能快速浏览一下我在这里做的事情。基本上，我做得对吗？

此处的现场演示：http://littlejim.co.uk/code/backbone/messing-around/

我只是想在我太疯狂之前在Backbone中获得扎实的理解。因此，这是从JSON对象创建集合，将其传递给视图并处理简单事件的简单演示。但我接近这个吗？我能做些什么呢？

<!DOCTYPE html>

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Showing a simple view with events</title>
    <script type="text/javascript" src="../../media/scripts/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="../../media/scripts/underscore-min.js"></script>
    <script type="text/javascript" src="../../media/scripts/backbone-min.js"></script>

    <script type="text/javascript" src="application.js"></script>
</head>
<body>

    <header>
        <h1>Showing views from a collection and basic events</h1>
        <p>The list below is made from JSON, passed to the view as a collection and has basic events</p>
    </header>

    <article>

    </article>

</body>
</html>

这是我目前拥有的JavaScript。我只是需要知道我是否正确接近这个？

window.App = {

    // namespaces
    Controller: {},
    Model : {},
    Collection : {},
    View : {},

    // code that starts when the app is first fired
    initialize : function () {

        var collection = new App.Collection.Inputs([
            {title: "Item 1"},
            {title: "Item 2"},
            {title: "Item 3"}
        ]);

        var view = new App.View.InputSet({collection: collection});
        $('article').html(view.render().el);

    }
}

/* 
Collection: Inputs */
App.Collection.Inputs = Backbone.Collection.extend();

/* 
View: _Input */
App.View._Input = Backbone.View.extend({
    events: {
        "click a": "close"
    },
    // called as soon as a view instance is made
    initialize: function() {
        // this makes the render, clear etc available at this
        // if not setting this, both render() and clear() method will not have themselves in this
        _.bindAll(this, "render", "close");
    },
    // backbone required method, which renders the UI
    render: function() {
        // this is using underscore templating, which can be passed context
        $(this.el).html(_.template('<p><%=title%> <a href="#">[close]</a></p>', this.model.toJSON()));
        return this;
    },
    close: function() {
        // removes the UI element from the page
        $(this.el).fadeOut(300);
        return false; // don't want click to actually happen
    }
});

/* 
View: InputSet, uses _Input */
App.View.InputSet = Backbone.View.extend({
    events: {
        'click a': 'clear'
    },
    initialize: function() {
        // this makes the render, clear etc available at this
        // if not setting this, both render() and clear() method will not have themselves in this
        _.bindAll(this, "render");
    },
    // backbone required method, which renders the UI
    render: function() {

        var that = this;

        views = this.collection.map(function(model) {
            var view = new App.View._Input({model: model});
            $(that.el).append(view.render().el);
            return view;
        });

        $(that.el).append('<a href="#">[clear]</a>');

        return this;
    },
    clear: function() {
        $(this.el).find('p').fadeOut(300);
    }
});

// wait for the dom to load
$(document).ready(function() {
    // this isn't backbone. this is running our earlier defined initialize in App
    App.initialize();
});

Answer 1

这对我来说很好看。但是，我发现一旦你开始做一些非平凡的事情，事情会变得棘手：复杂的观点，嵌套的集合等。

可以做的另一件事是，不是使用collection.map生成输入视图，而是可以将集合的add事件绑定到为该项生成_Input视图的函数。而是集合。所以你在InputSet视图中有这样的东西：

initialize: function() {
    _.bindAll(this, "addInput", "removeInput");
    this.collection.bind("add", this.addInput);
    this.collection.bind("remove", this.removeInput);
}

addInput: function(model) {
    var view = new App.View._Input({model: model});
    $(this.el).append(view.render().el);
}

Answer 2

我看起来对我很好 - 我唯一建议的是你将集合的'change'事件绑定到_Input.render，这样你对集合的更改会自动重新渲染视图：

// called as soon as a view instance is made
initialize: function() {
  _.bindAll(this, "render", "close");
  this.collection.bind('change', this.render);
},

除此之外我觉得它看起来不错！

Backbone基本应用程序，这是应该怎么做的？

2 个答案: