根据单选按钮选择显示内容

Question

我是 backbonejs 的新手，我正在尝试创建一个基本应用程序。

申请是这样的：

我有 5 个部分：A, B, C, D and E

每个部分有 2 个单选按钮。

Section A - Radio1, Radio2
Section B - Radio3, Radio4
Section C - Radio5, Radio6
Section D - Radio7, Radio8
Section E - Radio9, Radio10

根据选择的单选按钮，我需要显示一个部分（之前的部分也必须显示）

我看过也许可以使用模型来确定选择了哪个收音机以及显示的部分。这是正确的做法吗？

Answer 1

是的，这种方法会奏效。如果您需要在视图之间进行通信以通过事件使用模型，我建议 - 这通常会产生更好的架构（您的视图将更加解耦）。

您可以对视图中的 change 事件做出反应（使用 events 散列）并为每个组更新模型的属性，例如this.model.set('termsAccepted', true/false) 那么只要其他视图可以访问该模型，您就可以对该属性的更改事件做出反应，例如this.listenTo(this.model, 'change:termsAccepted', this.onTermsAcceptedChange).

Answer 2

您的 objective 可能有一个非常简单的解决方案。如果您通过 javascript 函数监视 radio-button 状态，则可以使用该函数为 parent div 更改 class 语句。在 CSS 中，您可以定义操作以根据 class 隐藏或显示 div。这只需要几行 javascript 和几行 CSS。例如，this example in codepen 显示了一种为可变大小的 div 完成 hide/show 的方法。这种方法中 div 的数量是任意的 - 您可以根据需要设置任意数量，用户唯一需要执行的操作是单击 header 以展开或折叠关联的div。
在此示例中，单击 header 用作展开或折叠关联的 div 的开关。该示例设置为一次仅展开一个 div，单击不同的 header 会自动折叠任何打开的 div，以便只有一个 div 打开一个时间。如果您不想要这种行为，只需删除 accOff() 函数中的 for 循环。

Answer 3

这有点像选择你自己的冒险，你 sipher_z?

我建议使用 Backbone 路由器，路由参数存储当前状态，即当前显示的部分。

视图的每个组件都应该是一个 Backbone.View.extend({...})。组件可能是 Section 和 Radio。

在每个单选按钮上，在 HTML 中放置一个 data-go-to 属性，其中包含要转到下一个部分的值。然后，在您的 RadioView 代码中，放置一个点击事件。单击后，提取此 data-go-to，然后执行类似 location.hash = '/section/' + section 的操作以触发您的路由器。

然后，您的路由器所做的就是在触发时隐藏除选定部分之外的所有部分。如果没有选择，只显示第一个！

我不是 100% 确定这个策略，但这绝对是 "the Backbone way"。如果我能解决任何问题，请告诉我。

Answer 4

var State = Backbone.Model.extend({
    defaults: {
        id: null,
        name: "",
        isOn: false
    }
});
var Section = Backbone.View.extend({
    model: State,
    events: {
        'change [type="checkbox"]': function (event) {
            var $checkbox = $(event.target);
            this.model.set("isOn", $checkbox.is(":checked"));
            this.model.get("dispatcher").trigger("toggle", this.model.get("id"));
        }
    },
    initialize: function (options) {
        this.listenTo(this.model, "change:isOn", function (model, isOn) {
            if ( isOn ) {
                this.$el.find(".section").show();
                this.$el.find("input").prop("checked", true);
            }
            else {
                this.$el.find(".section").hide();
                this.$el.find("input").prop("checked", false);
            }
        });
        this.listenTo(dispatcher, "toggle", function (id) {
            if ( this.model.get("id") < id ) {
                this.model.set("isOn", true);
            }
            if ( this.model.get("id") > id ) {
                this.model.set("isOn", false);
            }
        });
    },
    render: function () {
        this.$el.html('<div>' + this.model.get("name") + '</div><input type="checkbox"><div class="section" style="min-height:100px; background-color:grey; display:none;"></div>');
        this.$el.appendTo("body");
    }
});
var dispatcher = _.extend({}, Backbone.Events);
_.each([
    {id: 1, name: "A", isOn: false, dispatcher: dispatcher},
    {id: 2, name: "B", isOn: false, dispatcher: dispatcher},
    {id: 3, name: "C", isOn: false, dispatcher: dispatcher},
    {id: 4, name: "D", isOn: false, dispatcher: dispatcher},
    {id: 5, name: "E", isOn: false, dispatcher: dispatcher}
], function (item) {
    var view = new Section({model: new State(item)});
    view.render();
});

我不明白两个收音机的意思。所以我在每个部分都使用了复选框。希望这会揭示一些 backbone 的基础知识。

根据单选按钮选择显示内容

Displaying content based on radio button selection

javascript

backbone.js