Question

我是Backbone的新手，想要了解如何处理这个问题。我可能没有在这里使用正确的定义 - 抱歉提前！

目前我有一些元素，每个元素都有一个按钮（我将这些按钮称为按钮A）。这些行生成为Rails partial。该按钮打开一个弹出框，其中包含一些特定于该行信息的控件。在代码方面，每次单击任何按钮A时，只有一个弹出框可以调整自身+信息，并且它位于index.html.erb文件中。

我想将这些代码转换为Backbone视图对象 - 但我不知道如何让弹出框视图与多个按钮进行交互。

接近此方法的正确方法是为每个按钮创建一个弹出框，并让多个弹出视图相互通信？什么是正确的方法？

目前，这些元素都不是骨干视图对象。

提前谢谢。

Answer 1

我假设：

您指的是模态弹出框，而不是弹出窗口。如果您尝试更改弹出窗口的内容，则只需加载一个显示您期望的数据的新URL。
您的Rails模板已经创建了所有HTML标记
你正在使用jQuery

JSFiddle示例：http://jsfiddle.net/4J6fL/

第一步是创建一个负责数据列表功能的Backbone.View实例。

var DataView = Backbone.View.extend({
    events: {
        // this event will be bound to every button inside our parent element
        "click button": "enlarge"
    },

    enlarge: function(e) {
        // backbone rebinds 'this' to refer to the View. It will not refer to the element 
        // triggering the event as it would in jQuery. Grab a reference to the triggering element.
        $el = $(e.currentTarget);

        // gather the data for our popup window
        var popupData = {
            title: $el.siblings('p').text(),
            img: $el.siblings('img').attr('src')
        };

        this.popup(popupData);
    },

    popup: function(data) {
        // find the view's popup box element - this.$el refers to the views bound DOM element
        var $enlarged = this.$el.find('#enlarged');

        // create new elements based on the data
        var $title = $('<h2 />', { text: data.title });
        var $img = $('<img />', { src: data.img });

        // empty the popup box of current data
        $enlarged.html('');

        // fill the popup box with our new data
        $enlarged.append($title);
        $enlarged.append($img);
    }
});

此时我们有一个可以绑定到任何DOM元素的View，它具有上述功能。

events属性负责将事件回调绑定到视图。
请注意回调中this的上下文，Backbone将其绑定到View，而不是事件。
this.$el指的是绑定到我们视图的DOM元素。你会看到如何进一步做。
实际的弹出逻辑是标准的jQuery DOM操作。

现在我们有了自己的观点，我们需要初始化并使用它。这是在Backbone.Router中完成的，它充当控制器：

dataView = new DataView({ el: $('#data-view') });

注意我们如何传递将绑定到此视图的元素（el）？这就是将DOM元素绑定到我们的视图，允许我们在视图中操作它。

下一个逻辑步骤是将弹出代码分成另一个视图，使用events指示何时应该更新它。这样您就可以轻松地从页面的其他区域触发弹出窗口。

由多个外部元素触发的骨干视图

1 个答案: