Question

我遇到了这个主干/下划线模板绑定问题，我无法理解。

正在为下划线模板提供一组对象，但是当遍历集合并构建结果HTML时，并非所有单个对象属性都被解析。

我相信模板正确接收集合（异步调用服务器）。我已经调试了收到的集合并正确填充了它。
我＆＃34;呈现＆＃34; HTML中的原始收集项目用于验证我处理的是正确的对象...所有内容都显示正确。

我已经简化了这里的代码，希望不会模糊问题。点击事件负责选择一个部分（不包含在代码中）

以下是代码：

//Underscore Template 
<script id="articles-template2" type="text/html">
<table>
    <thead>
        <tr>
            <th>Title</th>
            <th>Description</th>
            <th>Date</th>
            <th>Data</th>
        </tr>
    </thead>
    <tbody>
    <% _.each(articles, function(a){ %>
        <tr>
            <td><%= JSON.stringify(a)%></td>
            <td><a href="#" data-id="<%= a.id%>"><%= a.title %></a></td>
            <td><%= a.description%></td>
            <td><%= new Date(a.date)%></td>
        </tr>
    <%});%>
    </tbody>
</table>
</script>
// Backbone View ----------------
window.ArticlesView2 = Backbone.View.extend({
    initialize: function () {
        var self = this;
        self.collection.on("reset", this.render, this);
    },
    template: _.template($('#articles-template2').html()),
    render: function () {
        var self = this;
        $(self.el).html(self.template({ articles: self.collection.models }));
        $('#section-list').append(self.el);
        return self;
    },
    events: {
        "click a": "clicked"
    },
    clicked: function (e) {
        var self = this;
        e.preventDefault();
        var id = $(e.currentTarget).data("id");
        var item = self.collection.get(id);
        var name = item.get("title");
        alert(name);
    }
});
// Router ----------------
var AppRouter = Backbone.Router.extend(
          {
              routes: {
                   'section/:title': 'viewSection'
              },
              viewSection:function(section)
              {
                  var self = this;
                  self.articles = new ArticleList({ selectedSection: section });
                  self.view = new ArticlesView2({ collection: self.articles });
                  self.articles.fetch({ reset: true });
              }
          }
);  
// Initialize ----------------
var app = new AppRouter();
Backbone.history.start();
app.navigate('section/Home', { trigger: true });

呈现的HTML如下：

<table>
    <thead>
        <tr>
            <th>Title</th>
            <th>Description</th>
            <th>Date</th>
            <th>Data</th>
        </tr>
    </thead>
    <tbody>
         <tr>
            <td>{"id":"527c61082241f813c09c7041","title":"title here","description":" test descript here","date":"2005-02-08T05:00:00.0000000Z"}</td>
            <td><a href="#" data-id="527c61082241f813c09c7041"></a></td>
            <td></td>
            <td>Invalid Date</td>
        </tr>
     </tbody>
</table>

我不确定为什么一个人可以Stringfy（）该对象并获取数据但无法成功查询其属性????? 这是一个事件问题，男人我错过了什么？谢谢

Answer 1

您已将raw array of your models传递给模板，模型不是哈希，您无法直接访问这些属性。

使用collection.toJSON

self.template({ articles: self.collection.toJSON() })

或在模板中使用model.get

<%= a.get('title') %>

请注意，在您的示例中，JSON.stringify会为您提供数据的预期表示，因为

toJSON行为

如果要进行字符串化的对象具有名为toJSON的属性，其值为   是一个函数，然后toJSON方法自定义JSON字符串化   行为：返回的值代替被序列化的对象   通过toJSON方法调用时将被序列化。

并且您的模型采用toJSON方法。

Backbone + Underscore模板绑定（同步）问题

1 个答案: