Nie mam pojęcia, dlaczego ten kod nie działa.
Czytanie Dokumentacja,
Należy nazwać templateHelpers.

Moim celem jest przekazanie szablonu this.collection.length.

Jakieś wskazówki? dzięki.

Używam backbone.marionette v0.9.5


return Marionette.CompositeView.extend({
    className: 'user-board',

    template: usersTemplate,

    itemView: userItemView,

    initialize: function () {
        this.collection = new UseList();
        this.collection.fetch();
    },

    appendHtml: function (collectionView, itemView) {
        collectionView.$el.find('ul.users-list').append(itemView.el);
    },

    templateHelpers: function () {
        console.log(this.collection.length);
    },

    serializeData: function () {
        return {
            weekly: this.options.weekly,
            users_length: this.collection.length // here the length is zero
                                           // after the fetch the length is > 0
                                           // but in template remains 0
        };
    }
});

Aby naprawić mój problem, muszę zrobić następujące ...

    initialize: function () {
        _.bindAll(this, 'render');
        this.collection = new NewCollection();
        this.collection.fetch({
            success: this.render
        });
    }

Czy jest lepszy sposób, aby działał?

2
Lorraine Bernard 27 lipiec 2012, 18:58

4 odpowiedzi

Najlepsza odpowiedź

Czytanie Dokumentacja marionetka {x0}} Metoda, która jest ta przy użyciu mixinTemplateHelpers, jest wywoływana tylko na metodzie Item View.render Tutaj i w bieżącym kodzie nie renderujesz

Aktualizacja: W ten sposób za każdym razem, gdy kolekcja odbiera nowe dane, zaktualizuje Twój widok nowa długość

initialize: function () {
    _.bindAll(this, 'render');
    this.collection = new NewCollection();
    this.collection.fetch();
    this.collection.bind('reset', this.render);
}
3
Claudiu Hojda 30 lipiec 2012, 11:56

Ten kod deklaruje tylko widok. Czy możesz udostępniać kod the instancje widok i wyświetla go? templateHelpers zostanie wywołany, a dane przekazywane do szablonu , gdy szablon zostanie renderowany . Oznacza to, że alternisza, aby wyświetlić widok w regionie, który niejawnie wywołuje metodę render na widoku lub jawnie wywołaj metodę render.

Być przydatnym, templateHelpers powinien zwrócić obiekt. Na przykład:

templateHelpers: function() {
    return {colLength: this.collection.length};
}

Ważna rzecz, o której należy pamiętać: fetch Wyzwala żądanie AJAX, które jest wykonywane asynchronicznie. Jeśli chcesz czekać na fetch, aby odnieść sukces przed poświęceniem widoku, trzeba użyć marionette.async.


aktualizacja na podstawie pytania aktualizacji

Aby uniknąć wywołania render z widoku initialize i tylko zrób to, gdy render jest nazywany zewnętrznie, zmień kod do:

return Marionette.CompositeView.extend({
    className: 'user-board',

    template: usersTemplate,

    itemView: userItemView,

    initialize: function () {
        this.collection = new UseList();
        var that = this;
        this.defer = $.Deferred();
        this.collection.fetch({
            success: that.defer.resolve,
            error: that.defer.resolve
        });
    },

    appendHtml: function (collectionView, itemView) {
        collectionView.$el.find('ul.users-list').append(itemView.el);
    },

    templateHelpers: function () {
        console.log(this.collection.length);
        // For greater flexibility and maintainability, don't override `serializeData`.
        return {
            weekly: this.options.weekly,
            users_length: this.collection.length
        };
    },

    render: function() {
        var that = this,
            args = arguments;
        $.when(this.defer).done(function() {
            Marionette.CompositeView.prototype.apply(that, args);
        });
    }
}); 

Rozwiązuję się this.render zarówno na sukcesie, jak i na błędzie, w przeciwnym razie, jeśli wystąpi błąd, w którym widok nigdy nie udaje (chyba że chcesz).

Należy pamiętać, że jeśli używasz marionette.async, wróciłbyś this.defer w widoku beforeRender i marionette.async zajmujeby się opóźnieniem renderowania.

Należy również pamiętać, że raz this.defer jest rozwiązany, przyszłe renderuje, gdy będzie się uruchomić, gdy nie ma nic do czego czekać, aż do this.defer został zresetowany programowo.

1
Tony Abou-Assaleh 30 lipiec 2012, 14:16

Przynajmniej w marionette v1.0.3, lubię wzór, który rendering jest obsługiwany automatycznie podczas połączenia do regionu pokazuje widok. Nie muszę nawet umieścić tej logiki w rozmowie odcinającej sukces lub wyraźnie wiązać się z wydarzeniem "RESET", ponieważ widok kompozytowy / kolekcji marionetki już wie (re-) renderuje się na sukcesie fetch (który debugger pokaże ty).

0
Will 19 czerwiec 2013, 19:58

Po użyciu instalację można również wyszczególnić, można również użyć pomocy szablonów nieco bardziej użytecznie niż opisano do tej pory.

na przykład

Jeśli po prostu upuściłeś <% = FunkcjaName%> do szablonu, w którym próbujesz wyświetlić numer, aby wyświetlić wizualnie na przedniej stronie końcowej (ponieważ chcesz

Więc tak:

--Template File--
<div id="followerCount"> <%= showCount %> </div>


--Helper Function in View--
templateHelpers: {
    showCount: function(){
                   return this.collection.length;
    } 
}

Mam nadzieję, że miała sens lub przynajmniej pomaga komuś innemu, że będziesz mógł szukać prostszego sposobu integracji bazy danych zwrócił JSON do swoich szablonów.

0
Lux.Capacitor 25 czerwiec 2014, 21:06