0

我试图使标题更简短，一旦我能想到提出问题的正确方法，我可能会对其进行修改，这里是：

我有一个列表视图，它呈现多个模型，代表集合中的数据。

我希望能够单击其中一个视图/模型，清除视图并仅显示该视图（显示更多信息） - 无需 - 再次获取数据并保留历史记录。

我在下面提供了单个工件视图和列表视图：

// ArtifactView
App.ArtifactView = Backbone.View.extend({
    tagName: 'li',
    className: '',
    template: Handlebars.compile($('#stream_getDigest').html()),
    render: function(){
        var id = this.options.artifact_id; // getting the ID from the route
        var artifactView = new App.ArtifactView({model: artifactSingleModel, id: id})
        this.$el.html(this.template(this.model.toJSON()));
        this.$el.find( ".link" ).attr( "href", "/artifact/" + this.model.id + "/" ); // adding link to the text
        return this;
    }
});

// ArtifactListView
App.ArtifactListView = Backbone.View.extend({
    el: $('#here'),
    tagName: 'ul',
    id: 'list-view',
    initalize: function(){
        this.collection.on('add', this.addOne, this);
        this.collection.on('reset', this.addAll, this);
    },
    render: function(){
        this.addAll();
    },
    addOne: function(artifactModel){
        var artifactView = new App.ArtifactView({model: artifactModel});
        this.$el.append(artifactView.render().el);
    },
    addAll: function(){
        this.$el.empty(); // emptying the view
        this.collection.forEach(this.addOne, this);
    }
});
4

1 回答 1

0

您说您希望在单击视图时发生一些事情。为此，Backbone 上有events对象View：

App.ArtifactView = Backbone.View.extend({
    events: {
        'click': 'openDetailsView'
    },
    openDetailsView: function() {
        // Here you put the code to open the the code 
        // that should open the code that opens the
        // window that shows details about only this 
        // particular articaft.
    }
})

在视图中，您可以访问它的模型this.model（如果它有模型），然后您可以使用它来获取该模型的属性以在输出中显示它。

这对你有帮助吗？

于 2013-08-28T00:26:41.600 回答