Passage d'arguments à une épine dorsale vue

Juste de commencer avec la colonne vertébrale. J'ai une vue générique qui peut rendre une collection sous forme de liste avec un titre. Je suis en train de passer de la collecte et de titre dans la méthode render, mais qui semble un peu étrange. Est-il une autre façon plus canonique?

E. g.:

var ListView = Backbone.View.extend({
    template: _.template([
        "<div>",
        "<% if (title) { %><h2><%= title %></h2> <% } %>",
        "<% if (items.length > 0) { %>",
        "<ul>",
            "<% items.each(function(item) { %>",
            "<%= itemTemplate(item) %>",
            "<% }); %>",
        "</ul>",
        "<% } else { %><p>None.</p><% } %>",
        "</div>"
    ].join('')),

    itemTemplate: _.template(
        "<li><%= attributes.name %> (<%= id %>)</li>"
    ),

    render: function(items, title) {
        var html = this.template({
            items: items /* a collection */,
            title : title || '',
            itemTemplate: this.itemTemplate
        });

        $(this.el).append(html);
    }
});

var myView = new ListView({ el: $('#target') });
myView.render(myThings, 'My Things');
myView.render(otherThings, 'Other Things');
InformationsquelleAutor sprugman | 2012-07-09
  1. 17

    Vous devez passer des attributs dans la initialize() fonction:

    initialize: function (attrs) {
    this.options = attrs;
}

    Donc ici que vous devez passer les attributs d'un objet, comme suit:

    new MyView({
  some: "something",
  that: "something else"
})

    Maintenant, vous avez les valeurs que vous avez passé accessibles tout au long de cette instance, dans le présent.options

    console.log(this.options.some) # "something"
console.log(this.options.that) # "something else"

    De passer dans une collection, je vous recommande de créer une vue parent et un sous-vue:

    var View;
var Subview;

View = Backbone.View.extend({
    initialize: function() {
        try {
            if (!(this.collection instanceof Backbone.Collection)) {
                throw new typeError("this.collection not instanceof Backbone.Collection")
            }
            this.subViews = [];
            this.collection.forEach(function (model) {
                this.subViews.push(new SubView({model: model}));
            });
        } catch (e) {
            console.error(e)
        }
    },
    render: function() {
        this.subViews.forEach(function (view) {
            this.$el.append(view.render().$el);
        }, this);
        return this;
    }
});

SubView = Backbone.View.extend({
    initialize: function () {
        try {
            if (!(this.model instanceof Backbone.model)) {
                throw new typeError("this.collection not instanceof Backbone.Collection")
            }
        } catch (e) {
            console.error(e);
        }
    },
    render: function () {
        return this;
    }
});

testCollection = new MyCollection();
collectionView = new View({collection: testCollection});
$("body").html(collectionView.render().$el);

    Vous devriez toujours gérer les Modèles d'une Collection, non seulement les données de la collection.

    • Je suppose qu'avec cette approche, je suis en création d'une nouvelle vue pour chaque collection, plutôt que de réutiliser le même point de vue avec de multiples collections. Du sens.
    • En fait... si je suis juste de passage dans certaines options sur l'instanciation, je ne pense pas que j'ai même pas besoin de créer la méthode initialize -- il met automatiquement les options passées au constructeur dans un objet d'options.
    • Et puis, si je ne veux pas créer un nouveau point de vue pour chaque collection, je peux faire myViewInstance.des options.certains = 'Nouvelle Valeur'...
    • Cette méthode est pour le passage dans les options, rien de plus. Si vous êtes de passage dans une collection, il est plus efficace de faire une Vue de la collection elle-même, et une sous-vue pour chaque modèle de cette collection.
    • J'ai ajouté à la réponse de la façon dont vous devez gérer des Collections et de leur point de vue
    • Je suis confus: pourquoi êtes-vous générer des vues de la colonne vertébrale.Modèle et pas de colonne vertébrale.Point de vue?
    • Faute de frappe, censé utiliser Backbone.View
    • Ok, ça fait beaucoup plus de sens. La création d'un ensemble de sous-vue de classe juste pour afficher <li>item.nom</li> semble exagéré pour moi, mais je arriver là où vous allez, et qui a certainement un sens pour un cas plus compliqué.
    • Croyez-moi, c'est le moyen le plus efficace d'écrire vues pour les Collections. De cette façon, vous pouvez déléguer la events objet de la SubView spécifiques à que modèle. Pour chaque point de Vue dynamique, il devrait toujours être un modèle.

    InformationsquelleAutor Austin
  2. 2

    Vous devriez avoir un modèle pour votre vue et accéder à des propriétés du modèle lorsque le rendu de la vue.

    var myModel = new Backbone.Model();

myModel.set("myThings", myThings);
myModel.set("myOtherThings", myOtherThings);

var myView = new ListView({ model: myModel });
    • C'est une vision d'une collection de modèles. Je suppose que je pourrais avoir un wrapper modèle dans la collection, mais cela me semble inutile de la structure.
    • Vous pouvez passer d'un modèle et d'une collection dans le même temps.
    • comment accéder au modèle à l'intérieur de la vue. Est-ce que c'.de modèle. Je demande cela parce que par exemple si je passe: ListView({soption:true,modèle:monmodèle}), alors je peux accéder à soption utilisation: ce.des options.soption, mais serait alors également être accessibles à l'aide de ce.des options....?
    • Répondre à mes propres commentaires: le modèle peut être consulté à l'aide de ce.des options.modèle à l'intérieur de l'épine dorsale de la vue.
    InformationsquelleAutor algiecas