0

残念ながら、私は自分のプロジェクトのサブビューを作成しました。以前は完全にうまくレンダリングされていましたが、自分のアプリが適切に構成されていないことがわかりました。私は再構築の過程にあり、他のすべては魅力のように機能しますが、新しいセットアップではel. レンダリングはel完全に問題ありませんが、何も挿入されていません。レンダリングするはずだったconsole.log()印刷されたを入れましたが、完璧です。templateただし、このthat.$.el.html()行はテンプレートをまったくレンダリングしません。何が起こっているのかわかりません。ファイルは以下です。私の愚かさが私を殺している！

contactlist.js (ビュー):

define([
  'jquery',
  'underscore',
  'backbone',
  'text!templates/contactlist.html',
  'collections/contacts'
], function($, _, Backbone, contactListTemplate, Contacts){

  var ContactListView = Backbone.View.extend({
    initialize: function () {
        var that = this;
        this.options = {
            idclicked: null,
            query: null,
            scrolled: 0
        };
        this.options.get = function (property) {
            return that.options[property];
        };
        this.options.set = function (properties) {
            for (property in properties) {
                that.options[property] = properties[property];
            }
        };
    },
    el: '.contact-list',
    render: function() {
        var that = this;
        var contacts = new Contacts();
        contacts.fetch({
            success: function(contacts) {
                var results = contacts.models;
                if (that.options.query || that.options.query === '') {
                    var query = that.options.query.toUpperCase();
                    var results = contacts.toArray();
                        results = contacts.filter(function(contact){
                            return _.any(['firstname', 'lastname', 'email', 'phonenumber'], function(attr){
                                return contact.get(attr).toString().toUpperCase().indexOf(query) !== -1;
                            });
                        });
                        that.options.set({idclicked: null});
                }
                if (!that.options.idclicked && results[0]) {
                    that.options.idclicked = results[0].get('id');
                    Backbone.history.navigate('/contacts/' + results[0].get('id'), {trigger: true});
                }
                var template = _.template(contactListTemplate, {contacts: results, idclicked: that.options.idclicked});
                that.$el.html(template);
                $(document).ready(function() {
                    $('.contact-list').scrollTop(that.options.scrolled);
                });
            }
        });
    },
    events: {
        'click .contact': 'clickContact'
    },
    clickContact: function (ev) {
        $('.contact-clicked').removeClass('contact-clicked').addClass('contact');
        $(ev.currentTarget).addClass('contact-clicked').removeClass('contact');
        window.location.replace($(ev.currentTarget).children('a').attr('href'));
    }
  });

  return ContactListView;

});

アップデート：

うまくいったことを1つ試しましたが、それが良い習慣であるかどうかはわかりません。以下のコードは親ビューです。

allcontacts.js (ビュー):

define([
  'jquery',
  'underscore',
  'backbone',
  'text!templates/allcontacts.html',
  'views/contactlist',
  'collections/contacts'
], function($, _, Backbone, allContactsTemplate, ContactListView, Contacts) {
  var AllContactsView = Backbone.View.extend({
    initialize: function () {
        var that = this;
        this.options = {
            idclicked: null,
            pageloaded: false,
            renderlist: true,
            scrolled: null
        };
        this.options.get = function (property) {
            return that.options[property];
        };
        this.options.set = function (properties) {
            for (property in properties) {
                that.options[property] = properties[property];
            }
        };

        that.contactListView = new ContactListView();
    },
        el: '.allcontacts',
        render: function() {
            var that = this;
            if (!that.options.pageloaded) {
                var template = _.template(allContactsTemplate, {});
                that.$el.html(template)
        }
        if (that.options.renderlist) {
                this.contactListView.options.set({idclicked: that.options.idclicked, scrolled: that.options.scrolled});
                this.contactListView.setElement('.contact-list').render();
            }
        },
        events: {
        'keyup .search': 'search',
        'submit .search-contacts-form': 'cancelSubmit'
        },
        search: function (ev) {
            this.contactListView.options.set({idclicked: this.options.idclicked, query: $(ev.currentTarget).val(), scrolled: this.options.scrolled});
            this.contactListView.setElement('.contact-list').render();
        },
        cancelSubmit: function (ev) {
            return false;
        }
    });

  return AllContactsView;

});
4

1 に答える 1

0

バインド時にel要素が使用可能かどうかを確認します。まだレンダリングされていないようです。

于 2013-01-01T13:41:46.257 に答える