Вопросы на Backbone.js с ручением.

Question

Мое приложение Backbone.js с Handelbars делает следующее.

1. Установите модель, ее коллекцию, просмотр и маршрутизатор.
2. В начале получите список статей с сервера и отобразите его с помощью шаблона View через шаблон.

Код ниже.

    (function ($) 
    {
      // model for each article
      var Article = Backbone.Model.extend({});

      // collection for articles
      var ArticleCollection = Backbone.Collection.extend({
        model: Article
      });

      // view for listing articles
      var ArticleListView = Backbone.View.extend({
        el: $('#main'),
        render: function(){
          var js = JSON.parse(JSON.stringify(this.model.toJSON()));
          var template = Handlebars.compile($("#articles_hb").html());
          $(this.el).html(template(js[0]));
          return this;  
        }
      });

      // main app
      var ArticleApp = Backbone.Router.extend({
        _index: null,
        _articles: null,

        // setup routes
        routes: {
          "" : "index"
        },

        index: function() {
          this._index.render();
        },

        initialize: function() {
          var ws = this;
          if( this._index == null ) {
            $.get('blogs/articles', function(data) {
              var rep_data = JSON.parse(data);
              ws._articles = new ArticleCollection(rep_data);
              ws._index = new ArticleListView({model: ws._articles});
              Backbone.history.loadUrl();
          });               
          return this;
        }
        return this;
      }
    });

    articleApp = new ArticleApp();
  })(jQuery);

Handlebars.js Шаблон

<script id="articles_hb" type="text/x-handlebars-template">
  {{#articles}}
    {{title}}
  {{/articles}}
</script>

Приведенный выше код работает нормально, и он печатает названия статьи. Однако мой вопрос

1. При передаче контекста в шаблон glains.js я в настоящее время делаю $(this.el).html(template(js[0])). Анкет Это правильный путь? Когда я делаю только «JS» вместо JS [0], объект JSON имеет ведущие и окончательные квадратные скобки. Следовательно, он распознает как объект массива объекта JSON. Так что мне пришлось JS [0]. Но я чувствую, что это не правильное решение.

2. Когда я впервые создаю «представление», я создаю его, как ниже.

   ws._index = new articlelistview ({model: ws._articles});

Но в моем случае я должен сделать

ws._index = new ArticleListView({collection: ws._articles});

Не так ли? (Я следил за учебником, кстати). Или это имеет значение? Я попробовал оба, и, похоже, это не имело большого значения.

Заранее спасибо.

Answer 1

Кажется, что вы создаете представление для коллекции, так что вы должен Инициализируйте ваше представление, используя collection вместо model.

Что касается руля, я не использовал его много, но я думаю, что вы хотите сделать что -то вроде этого:

var ArticleListView = Backbone.View.extend({
    el: $('#main'),
    render: function(){
      var js = this.collection.toJSON();
      var template = Handlebars.compile($("#articles_hb").html());
      $(this.el).html(template({articles: js}));
      return this;  
    }
  });

а затем используйте что -то подобное для шаблона

  {{#each articles}}
    {{this.title}}
  {{/each}}

PS линияJSON.parse(JSON.stringify(this.model.toJSON())) эквивалентно this.model.toJSON()

Надеюсь это поможет

Answer 2

var ArticleListView = Backbone.View.extend({
    initialize: function(){
        this.template = Handlebars.compile($('#articles_hb').html());
    },
    render: function(){
      $(this.el).html(this.template(this.model.toJSON()));
      return this;  
    }
  });

/////////////////////////////////////

ws._index = new ArticleListView({model: ws._articles});