下划线模板无法访问数据模型

Question

我在访问带有下划线的模型数据时遇到困难，屏幕上没有显示任何内容，我也没有收到任何错误。任何帮助将不胜感激。

这是我的模板区

<script type='text/template' id='ListContainerView'>
 <p> <%= ListItemModel.id %> </p>
 <p> <%= ListItemModel.network %> </p>
 <p> <%= ListItemModel.created_by_id %> </p>
</script>

Collection

var ListItemCollection = Backbone.Collection.extend({
baseUrl: '/api/get_accounts',
url: '/api/get_accounts',
model: ListItemModel,
total: 0,
// Sample data
TESTDATA: {"status":"ok","posts":[{"id":"1","schedule":"2020-0417 17:00:00","utc_offset":"420","project_id":"1","network":"facebook","network_name":"TestFacebookPage","network_thumb":"https://scontent.xx.fbcdn.net/v/t1.0-9/17634406_1854330461448271_6787736791983791423_n.jpg?oh=e4c3a3573c0fc59359422cfd66a3865a&oe=598721E7","message":"Test Post 1 (just text, approved)","data":[],"customer_approved":"1","manager_approved":"1","rejection_message":"","created_at":"2020-0413 17:41:03","created_by":"admin","created_by_id":"1","created_by_name":"John Admin"},{"id":"2","schedule":"2020-0419 19:00:00","project_id":"1","network":"facebook","network_name":"TestFacebookPage","network_thumb":"https://scontent.xx.fbcdn.net/v/t1.0-9/17634406_1854330461448271_6787736791983791423_n.jpg?oh=e4c3a3573c0fc59359422cfd66a3865a&oe=598721E7","message":"Test Post 2 (text with image, approved)  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.","data":{"pictures":["https://pbs.twimg.com/media/C9T6n0UUwAAOBaU.jpg"],"image_added":"true","picture":"https://pbs.twimg.com/media/C9T6n0UUwAAOBaU.jpg","type":"photo"},"customer_approved":"1","manager_approved":"1","rejection_message":"","rejection_message_manager":"","created_at":"2020-0413 17:42:34","created_by":"admin","created_by_id":"1","created_by_name":"John Admin"},{"id":"3","schedule":"2020-0421 22:00:00","network":"facebook","network_name":"TestFacebookPage","network_thumb":"https://scontent.xx.fbcdn.net/v/t1.0-9/17634406_1854330461448271_6787736791983791423_n.jpg?oh=e4c3a3573c0fc59359422cfd66a3865a&oe=598721E7","message":"Test Post 3 (link, approved) http://www.adultswim.com/videos/rick-and-morty/","data":{"image_added":"true","pictures":["http://i.cdn.turner.com/adultswim/big/img/2015/07/17/Rick%26MortyS02_fbsearchTn.jpg"],"picture":"http://i.cdn.turner.com/adultswim/big/img/2015/07/17/Rick%26MortyS02_fbsearchTn.jpg","link":"http://www.adultswim.com/videos/rick-and-morty/","name":"Watch Rick and Morty on Adult Swim","caption":"www.adultswim.com","description":"Every episode of Rick and Morty is now on AdultSwim.com for free. Rick is a mad scientist who drags his grandson, Morty, on crazy sci-fi adventures. Their escapades often have potentially harmful consequences for their family and the rest of the world. Join Rick and Morty on AdultSwim.com as they trek through alternate dimensions, explore alien planets, and terrorize Jerry, Beth, and Summer.","domain":"www.adultswim.com","type":"link"},"customer_approved":"1","manager_approved":"1","rejection_message":"","created_at":"2020-0413 17:43:29","created_by":"admin","created_by_id":"1","created_by_name":"John Admin"},{"id":"4","schedule":"2020-0424 17:00:00","network":"facebook","network_name":"TestFacebookPage","network_thumb":"https://scontent.xx.fbcdn.net/v/t1.0-9/17634406_1854330461448271_6787736791983791423_n.jpg?oh=e4c3a3573c0fc59359422cfd66a3865a&oe=598721E7","message":"Test Post 4 (text, pending)","data":[],"customer_approved":"0","manager_approved":"1","rejection_message":"","created_at":"2020-0413 17:43:48","created_by":"admin","created_by_id":"1","created_by_name":"John Admin"},{"id":"5","schedule":"2020-0426 19:00:00","network":"facebook","network_name":"TestFacebookPage","network_thumb":"https://scontent.xx.fbcdn.net/v/t1.0-9/17634406_1854330461448271_6787736791983791423_n.jpg?oh=e4c3a3573c0fc59359422cfd66a3865a&oe=598721E7","message":"Test Post 5 (picture, pending)","data":[],"customer_approved":"0","manager_approved":"1","rejection_message":"","created_at":"2020-0413 17:44:03","created_by":"admin","created_by_id":"1","created_by_name":"John Admin"},{"id":"6","schedule":"2020-0428 21:00:00","network":"facebook","network_name":"TestFacebookPage","network_thumb":"https://scontent.xx.fbcdn.net/v/t1.0-9/17634406_1854330461448271_6787736791983791423_n.jpg?oh=e4c3a3573c0fc59359422cfd66a3865a&oe=598721E7","message":"Test Post 6 (link, pending) https://www.reddit.com/","data":{"image_added":"true","pictures":["https://b.thumbs.redditmedia.com/2Hwaff37fC4f37j-3orrbjVAOVBChqbdm_dXeIhjlNw.jpg"],"picture":"https://b.thumbs.redditmedia.com/2Hwaff37fC4f37j-3orrbjVAOVBChqbdm_dXeIhjlNw.jpg","link":"https://www.reddit.com/","name":"reddit: the front page of the internet","caption":"www.reddit.com","description":"reddit: the front page of the internet","domain":"www.reddit.com","type":"link"},"customer_approved":"0","manager_approved":"1","rejection_message":"","created_at":"2020-0413 17:44:19","created_by":"admin","created_by_id":"1","created_by_name":"John Admin"}],"total":"6"},

initialize: function(models, options) {
    this.total = this.TESTDATA.total;
    this.reset(this.TESTDATA.posts);
}

})

观看次数...

var ListContainerView = SOCIView.extend({
template: _.template($('#ListContainerView').text()),
className: 'ListContainerView'
})

var SOCIView = Backbone.View.extend({
render: function() {
    if (typeof this.beforeRender === 'function') {
        this.beforeRender();
    }

    var modelData = { };
    if (this.model && this.model instanceof Backbone.Model) {
        modelData = this.model.toJSON();
    }

    if (typeof this.template === 'function') {
        this.$el.html(this.template(modelData));
    }

    if (typeof this.afterRender === 'function') {
        this.afterRender();
    }
    return this;
  }
})

和脚本里面 HTML...

<script type="text/javascript">
  $(document).ready(function() {
      // Instantiate and render Backbone view
      $('.home_body').append( new ListContainerView({
          collection: new ListItemCollection(),
      }).render().el)
  });
</script>

Answer 1

在您为 ListContainerView 定义模板的地方，我认为使用 .text()（而不是 .html()）可能会导致您的问题。而是尝试

template: _.template($('#ListContainerView').html())

看看它是否有效。

Jquery 的 .text() 忽略 html 标记，例如 <span> 或 <strong> 标记（等），因此它可能会删除您的模板标记 <% ... %> 同样，给你几个空格。

Answer 2

Backbone 模型上的 toJSON 方法为您提供模型属性的简单副本。在你的情况下，这个：

modelData = this.model.toJSON();

应该给你一个看起来像这样的对象：

{
  id: 1,
  schedule: "2020-0417 17:00:00",
  utc_offset: "420",
  ...
}

请注意，该对象中的任何地方都没有 ListItemModel。该对象适用于如下所示的模板：

<p> <%= id %> </p>
<p> <%= network %> </p>
<p> <%= created_by_id %> </p>

如果你真的想要模板中的 ListItemModel 前缀，那么你会想说：

this.template({ ListItemModel: modelData })

调用模板函数时。

或者，您可以使用 {variable: 'ListItemModel'} 选项将模板编译为 _.template，并单独保留模板和 this.template 调用。所以你的观点会是：

template: _.template($('#ListContainerView').html(), { variable: 'ListItemModel'),

其余不变。

下划线模板无法访问数据模型

Underscore template can't access data model

javascript

jquery

backbone.js

underscore.js

underscore.js-templating