Получение JSON для подделки шаблонов в магистрали

Просто начав работу с Backbone и все еще чувствуя все входы и выходы.

Я пытаюсь просто показать некоторые JSON, используя Underscore и Backbone. Я могу заставить его работать только с помощью Underscore и $ .getJSON, но когда я пытаюсь подключить его к Backbone, я получаю множество ошибок в зависимости от того, что я пытаюсь.

Я также смог получить Backbone для работы с жесткими значениями в модели, но я бегу к стене, когда я пытаюсь собрать все это вместе. Любая помощь приветствуется.

Вот мой шаблон Underscore:

<script type="text/html" id='trailTemplate'>

    <% _.each(trails,function(trail){ %>

        <%= trail.trailname %>
<% }); %> </script>

И вот мой базовый код:

var Trail = Backbone.Model.extend({
    urlRoot: "trails.json"
});

var trail = new Trail({});

var TrailView = Backbone.View.extend({
    el: '.page',

    template: _.template($("#trailTemplate").html(), {trails:trail.fetch()}),

    render: function(){
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

var trailView = new TrailView({
    model: trail
});

trailView.render();

И в случае, если вам это нужно, вот trails.json

[
        {
            "trailhead": "Bear Lake",
            "trailname": "Bear Lake",
            "distance": ".5",
            "gain": "20",
            "level": "easy"
        },

        {
            "trailhead": "Bear Lake",
            "trailname": "Nymph Lake",
            "distance": ".5",
            "gain": "225",
            "level": "fairly easy"
        }
]
1
nl ja de
Вероятно, вам нужна коллекция для этого JSON, а не одна модель. И вам нужен шаблон : _.template ($ ("# trailTemplate"). Html ()) , this. $ El.html (this.template ({trails: this.collection. toJSON ()}) и новый TrailView ({коллекция: trails}) .
добавлено автор mu is too short, источник

1 ответы

Ваш trails.json файл содержит массив с 2 объектами, которые оба представляют собой один «трейл». Поэтому у вас должна быть коллекция «Trails» вместо одной модели

var Trails = Backbone.Collection.extend({
  url: '/trails.json'
});

var trails = new Trails();

Подчеркнутая функция шаблона может использоваться двумя способами:

  1. _.template(templateString) - compiles the templateString into function that can be evaluated when necessary
  2. _.template(templateString, data) - compiles and immediately evaluates the template with the given data

Теперь вы используете номер 2 (способ объявления шаблона) в сочетании с номером 1 (как вы его используете внутри рендера). Давайте рассмотрим объявление шаблона:

template: _.template($("#trailTemplate").html(), {trails:trail.fetch()})

Все это хорошо до тех пор, пока вы не попытаетесь дать ему data -attribute. Прежде всего вам не нужно указывать данные на данный момент , вы просто хотите создать функцию шаблона, которая может быть оценена при визуализации рендеринга. Во-вторых, материал, который вы пытаетесь передать как data , совсем не то, что вы думаете.

trail.fetch() doesn't return the the fetch results, it returns the ajax handle for the ajax call that is made with fetch. Thankfully Backbone is made so you don't have to think about all this painful ajax stuff, but instead you can trust the events that Backbone emits. So whip out the Backbone Catalog o' Events and check out reset

«сброс» (коллекция, параметры) - при замене всего содержимого коллекции.

Это событие, которое вы соберете, после fetch (также sync , я думаю). Перед тем, как это событие будет выпущено, ваша коллекция будет пустой, поэтому нет смысла делать что-либо с ней перед тем, как услышать этот reset событие. Итак, давайте приведем все это вместе:

var TrailView = Backbone.View.extend({
  el: '.page',

  template: _.template($("#trailTemplate").html()),//no data attribute here

  initialize: function() {
    this.collection.on('reset', this.render); //render after collection is reset
    this.collection.fetch(); //fetch the collection from the trails.json file
  }

  render: function(){
   //evaluate the template here
    this.$el.html(this.template(this.collection.toJSON())); 
    return this;
  }
});

var trailView = new TrailView({
  collection: trails
});

// trailView.render(); <- No need for this, because it will render itself

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

6
добавлено
Это один из лучших ответов, которые я когда-либо слышал о SO! Благодаря! Но это все равно просто не решает проблему, однако я уверен, что это должно быть очень близко. Когда я использовал именно то, что вы предложили, я получил следующую ошибку в консоли «TypeError: это. $ El undefined». Я помню из CodeSchool, что когда-то вам нужно установить контекст при вызове рендеринга, поэтому я попытался изменить .on event to: this.collection.on ('reset', this.render, this); Теперь я получаю ошибку: TypeError: trail undefined _.each (trails, function (trail) {
добавлено автор brianrhea, источник
Привет, Джейк, заявление _.each было в шаблоне Underscore в самом начале моего вопроса. Но я понял это! Всего несколько изменений: this.collection.on ('reset', this.render, this); и это. $ el.html (this.template ({trails: this.collection.toJSON ()}));
добавлено автор brianrhea, источник
ну, в коде, который вы указали, нет _. each -statement, поэтому ошибка выходит из-за пределов вашего вопроса
добавлено автор jakee, источник
о, извините за это, я забыл шаблон. Отлично, что вы поняли это сами!
добавлено автор jakee, источник
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском