Как передать полученный массив в шаблон подчеркивания

Question

Я получаю длинный массив из PHP, содержащий различные объекты данных.

[{"commid":"1","uid":"0","pid":"3","comment":"comm","parid":null,"date":"2016-10-27 15:03:10"}, 
{"commid":"2","uid":"0","pid":"10","comment":"Ana","parid":null,"date":"2016-10-27 15:03:51"}, 
{"commid":"3","uid":"0","pid":"5","comment":"asss!","parid":null,"date":"2016-10-27 15:05:50"}, 
{"commid":"4","uid":"0","pid":"10","comment":"Lawl?","parid":null,"date":"2016-10-27 17:03:59"}, 
{"commid":"5","uid":"0","pid":"14","comment":"sd","parid":null,"date":"2016-11-06 00:25:04"}, 
{"commid":"6","uid":"0","pid":"14","comment":"sds","parid":null,"date":"2016-11-06 00:25:50"}, 
{"commid":"7","uid":"0","pid":"14","comment":"WOW!","parid":null,"date":"2016-11-08 15:06:18"}, 
{"commid":"8","uid":"0","pid":"13","comment":"Hello!?","parid":null,"date":"2016-11-08 15:14:30"}] 

Мой Магистральная Посмотреть, который будет визуализации данных является

var WorkPage = Backbone.View.extend({ 
    el: $('#indexcontent'), 
    render: function() { 
     Backbone.history.navigate('work'); 
     var _this = this; 

     this.$el.html(workHTML); 
     $.ajax({ 
      type: "GET", 
      url: "includes/server_api.php/work", 
      data: '', 
      cache: false, 
      success: function(html) { 
       console.log(html); 
       var compiledTemplate = _.template($('#content-box').html(), html); 
       _this.$el.html(compiledTemplate); 
      }, 
      error: function(e) { 
       console.log(e); 
      } 
     }); 
     return false; 
    } 
}); 

Мои workHTML, которые будут оказываться Подчеркивание

<script type="text/template" id="content-box"> 
<div class="workhead"> 
    <h3 class="msg comment"><%= comment%></h3> 
    <p class="date"><%= date%></p> 
</div> 
</script> 
<div id="content-box-output"></div> 

Как реализовать цикл подчеркиванием здесь?

Answer 1

Вы должны воспользоваться функциями Backbone. И для этого вам нужно понять, как использовать REST API с Backbone.

Backbone's Model сделан, чтобы управлять одним объектом и обрабатывать связь с API (GET, POST, PATCH, PUT запросов).

Backbone's Collection Роль предназначена для обработки массива модели, он обрабатывает его (GET запрос, который должен возвращать массив объектов JSON), и он также анализирует каждый объект в базовой модели по умолчанию.

Вместо жесткого кодирования вызов jQuery ajax, используйте коллекцию Backbone.

var WorkCollection = Backbone.Collection.extend({ 
    url: "includes/server_api.php/work", 
}); 

Затем, модулируйте свои взгляды. Создайте представление элемента для каждого объекта массива, который вы получили.

var WorkItem = Backbone.View.extend({ 
    // only compile the template once 
    template: _.template($('#content-box').html()), 
    render: function() { 

     // this is how you pass data to the template 
     this.$el.html(this.template(this.model.toJSON())); 

     return this; // always return this in the render function 
    } 
}); 

Тогда ваш взгляд список выглядит следующим образом:

var WorkPage = Backbone.View.extend({ 
    initialize: function(options) { 
     this.itemViews = []; 
     this.collection = new WorkCollection(); 

     this.listenTo(this.collection, 'reset', this.render); 

     // this will make a GET request to 
     // includes/server_api.php/work 
     // expecting a JSON encoded array of objects 
     this.collection.fetch({ reset: true }); 
    }, 
    render: function() { 
     this.$el.empty(); 
     this.removeItems(); 
     this.collection.each(this.renderItem, this); 
     return this; 
    }, 

    renderItem: function(model) { 
     var view = new WorkItem({ 
      model: model 
     }); 
     this.itemViews.push(view); 
     this.$el.append(view.render().el); 
    }, 
    // cleanup to avoid memory leaks 
    removeItems: function() { 
     _.invoke(this.itemViews, 'remove'); 
     this.itemViews = []; 
    } 

}); 

Это необычно, чтобы установить URL в функции визуализации, вы должны держать обязанности области видимости в нужном месте.

Маршрутизатор может быть что-то вроде:

var Router = Backbone.Router.extend({ 
    routes: { 
     'work': 'workPage' 
    }, 

    workPage: function() { 
     var page = new WorkPage({ 
      el: $('#indexcontent'), 
     }); 
    } 
}); 

Затем, если вы хотите, чтобы увидеть страницу работы:

var myRouter = new Router(); 

Backbone.history.start(); 

myRouter.navigate('#work', { trigger: true }); 

Шаблоны и RequireJS

Моя index.html страница содержит это indexcontent div, но content-box, который сохраняется шаблон , который мы компилируем, хранится в разных work.html. Итак, , если я не загружаю этот work.html в мой адрес index.html Я не могу Доступ content-box.

Я бы рекомендовал использовать text require.js plugin и загрузки каждого шаблона для представления, как это:

Обработку item.js файл:

define([ 
    'underscore', 'backbone', 
    'text!templates/work-item.html', 
], function(_, Backbone, WorkItemTemplate) { 
    var WorkItem = Backbone.View.extend({ 
     template: _.template(WorkItemTemplate), 
     /* ...snip... */ 
    }); 
    return WorkItem; 
}); 

Обработку page.js файл:

define([ 
    'underscore', 'backbone', 
    'text!templates/work-page.html', 
], function(_, Backbone, WorkPageTemplate) { 
    var WorkPage = Backbone.View.extend({ 
     template: _.template(WorkPageTemplate), 
    }); 
    return WorkPage; 
}); 

Answer 2

В файле index.html вы должны иметь _.each() метод перебора Повсеместно каждого элемента

<% _.each(obj, function(elem){ %> 
<div class="workhead"> 
    <h3 class="msg comment"><%= elem.comment %></h3> 
    <p class="date"><%= elem.date%></p> 
</div> 
<% }) %> 

я сделать переменную вашего ответа только, чтобы иметь данные для работы с. В вашем представлении вам нужно установить точку на шаблоне template: _.template($("#content-box").html()), а в методе визуализации просто отправить данные как объект.

Вот рабочий код: jsFiddle

Answer 3

Вот один из способов, чтобы загрузить шаблон для каждого значения в массиве данных.

var WorkPage = Backbone.View.extend({ 
    el: $('#indexcontent'), 
    render: function() { 
     Backbone.history.navigate('work'); 
     var _this = this; 

     this.$el.html(workHTML); 
     $.ajax({ 
      type: "GET", 
      url: "includes/server_api.php/work", 
      data: '', 
      cache: false, 
      success: function(data) { 
       console.log(data); 
       var $div = $('<div></div>'); 
       _.each(data, function(val) { 
        $div.append(_.template($('#content-box').html(), val)); 
       }); 
       _this.$el.html($div.html()); 
      }, 
      error: function(e) { 
       console.log(e); 
      } 
     }); 
     return false; 
    } 
});