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

它有点像选择你自己的冒险，ya sipher_z？

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

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

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

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

我不是100％肯定这个策略，但这绝对是＆＃34; Backbone方式＆＃34;。如果我能搞清楚，请告诉我。

Answer 3

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();
});

我没有理解两个收音机的含义..所以我每个部分都使用了复选框..希望这会揭示一些主干的基础知识。

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

3 个答案: