Итерация массива модели с использованием _.each в магистрали js - PullRequest
Новая
       12

Итерация массива модели с использованием _.each в магистрали js

1 голос
/ 26 февраля 2020

Я пытаюсь перебрать значения, используя массив моделей вместо коллекций ...

JS файл: 

var Line = Backbone.Model.extend({
    attributes : {
        data:[]
    }
});

var header = new Line({data : ["Backbone JS"]});

var footer = new Line({data: ["Thank You"]});
var lowerList = new Line({data: ["Models","Collections","Views","Events","Routers"]});

var LineView = Backbone.View.extend({
    tagName: "li",

    render : function() {
            var self =this;
        _.each(this.model.get("data"),function(item,index){
          self.$el.append(item+"<br>");
          return item;
        });
    }
});

var headerView = new LineView({el:"#header",model: header});
headerView.render();

var footerView = new LineView({el: "#footer",model: footer});
footerView.render();

var lowerListView = new LineView({el: "#lowerList",model: lowerList});
lowerListView.render();

HTML Файл: 

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/styles.css">

        <script src="js/lib/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
        <header id="header">
        </header>
        <hr>
        <ul id="lowerList">
        </ul>
        <hr>
        <footer id="footer">
        </footer>
        <script src="js/lib/jquery-min.js"></script>
        <script src="js/lib/underscore-min.js"></script>
        <script src="js/lib/backbone-min.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

Я хочу передать данные на страницу html в списке без использования тега <br> в функции рендеринга 

render : function() {
            var self =this;
        _.each(this.model.get("data"),function(item,index){
          self.$el.append(item+"<br>");
          return item;
        });
    }

без использования тега <br>, вывод выглядит так: 

output:

ModelsCollectionsViewsEventsRouters

Значения повторяются в одной строке. Можете ли вы предложить какой-либо способ повторять значения по одному без использования тега <br>?

1 Ответ

0 голосов
/ 27 февраля 2020

Поскольку el вашего представления является <ul> (tagName: "li" игнорируется при передаче опции el), ваше представление должно добавлять <li> к нему для каждого элемента, что-то вроде: 

var LineView = Backbone.View.extend({
  render: function() {
    _.each(this.model.get("data"), function(item, index) {
      this.$el.append("<li>" + item + "</li>");
    }, this);
  }
});

Лучшим вариантом было бы использование CollectionView и концепции ItemView: 

var LineView = Backbone.View.extend({
  tagName: "li",
  initialize(options) {
    this.item = options.item;
    this.render();
  },
  render: function() {
    this.$el.text(item);
  }
});

var LinesView = Backbone.View.extend({
  render: function() {
    _.each(this.model.get("data"), function(item, index) {
      var childView = new LineView({item: item});
      this.$el.append(childView.$el);
    });
  }
});

Еще лучшим вариантом было бы фактически использовать экземпляр Backbone.Collection для представления Collection

...