Ich bin ziemlich neu in backbonejs und versuche, eine Basisanwendung zu erstellen.

Die Anwendung ist ungefähr so:

Ich habe 5 Abschnitte: A, B, C, D and E

Jeder Abschnitt verfügt über 2 Optionsfelder.

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

Je nachdem, welches Optionsfeld ausgewählt ist, muss ich einen Abschnitt anzeigen (vorherige Abschnitte müssen ebenfalls angezeigt werden).

Ich habe mir angesehen, ob ich anhand eines Modells feststellen kann, welches Radio ausgewählt wurde und welcher Abschnitt angezeigt wird. Ist das der richtige Ansatz?

2
sipher_z 20 Aug. 2015 im 19:01

4 Antworten

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

Ich habe die Bedeutung von zwei Funkgeräten nicht verstanden. Deshalb habe ich das Kontrollkästchen pro Abschnitt verwendet. Ich hoffe, dies wird einige Grundlagen des Backbones aufdecken.

0
Radek Michna 31 Aug. 2015 im 09:57

Es ist ein bisschen wie ein Abenteuer, bei dem Sie sich selbst entscheiden können, ya sipher_z?

Ich empfehle, den Backbone-Router mit Routenparametern zu verwenden, die den aktuellen Status speichern, dh welchen Abschnitt gerade angezeigt wird.

Jede Komponente der Ansicht sollte ein Backbone.View.extend({...}) sein. Komponenten können Abschnitt und Radio sein.

Fügen Sie auf jedem Optionsfeld in HTML ein data-go-to -Attribut mit dem Wert des nächsten Abschnitts ein. Fügen Sie dann in Ihren RadioView-Code ein Klickereignis ein. Wenn Sie darauf klicken, extrahieren Sie dieses data-go-to und führen Sie so etwas wie location.hash = '/section/' + section aus, um Ihren Router auszulösen.

Dann versteckt Ihr Router nur alle Abschnitte außer dem ausgewählten, wenn er ausgelöst wird. Wenn es keine Auswahl gibt, wird nur die erste angezeigt!

Ich bin mir dieser Strategie nicht 100% sicher, aber dies ist definitiv "der Backbone-Weg". Lassen Sie mich wissen, ob ich etwas klären kann.

0
Reed Spool 30 Aug. 2015 im 00:17

Möglicherweise gibt es eine sehr einfache Lösung für Ihr Ziel. Wenn Sie den Optionsfeldstatus über eine Javascript-Funktion überwachen, können Sie mit dieser Funktion eine Klassenanweisung für das übergeordnete div ändern. In CSS können Sie dann Aktionen definieren, um ein Div basierend auf seiner Klasse auszublenden oder anzuzeigen. Dies würde nur ein paar Zeilen Javascript und ein paar Zeilen CSS erfordern.Beispiel: Dieses Beispiel in Codepen zeigt eine Möglichkeit, das Ausblenden / Anzeigen für eine Variable durchzuführen Größe div. Die Anzahl der Divs in diesem Ansatz ist beliebig - Sie können so viele oder wenige haben, wie Sie möchten, und der Benutzer muss nur auf die Kopfzeile klicken, um das zugehörige Div zu erweitern oder zu reduzieren.
In diesem Beispiel fungiert das Klicken auf die Kopfzeile als Umschalter zum Erweitern oder Reduzieren des zugehörigen Div. Das Beispiel ist so eingerichtet, dass jeweils nur ein Div erweitert wird. Wenn Sie auf einen anderen Header klicken, wird jedes geöffnete Div automatisch reduziert, sodass jeweils nur ein Div geöffnet ist. Wenn Sie dieses Verhalten nicht möchten, entfernen Sie einfach die for-Schleife in der Funktion accOff().

0
Bob Dill 27 Aug. 2015 im 00:05

Ja, dieser Ansatz wird funktionieren. Ich empfehle, wenn Sie zwischen Ansichten kommunizieren müssen, um Modelle über Ereignisse zu verwenden. Dies führt im Allgemeinen zu einer besseren Architektur (Ihre Ansichten werden stärker entkoppelt).

Sie können auf das Ereignis change in der Ansicht reagieren (mithilfe des Hashs events) und ein Attribut für ein Modell für jede Gruppe aktualisieren, z. this.model.set('termsAccepted', true/false) Solange die anderen Ansichten Zugriff auf dieses Modell haben, können Sie auf das Änderungsereignis dieses Attributs reagieren, z. this.listenTo(this.model, 'change:termsAccepted', this.onTermsAcceptedChange).

0
Dominic 20 Aug. 2015 im 22:00