1

我正在尝试将Steve Smith 的jQuery Mobile 版本的 Backbone 教程从1.0升级到1.3.1——不过，这个过程似乎并不像我最初想象的那么简单。我在控制台中没有收到任何错误，但没有“发生”。在 1.0 中一切正常 - 但是当我将文件升级到 1.3.1 时，不会呈现数据。

提琴手

HTML（脚本导入和 css 被移除）：

<title>Exercise</title>

<!-- templates -->
<script type="text/template" id="activity-list-item-template">
  <li><a href="#activity-details" identifier="<%= id %>"><%= date %> - <%= type %></a></li>
</script>

<script type="text/template" id="activity-details-template">
    <h3><%= type %></h3>
    <ul data-role="listview" id="activitiy-fields" data-inset="true">
      <li>Date: <%= date %></li>
      <li>Minutes: <%= minutes %></li>
      <li>Distance: <%= distance %></li>
      <li>Comments: <%= comments %></li>
    </ul>
  </script>

<body>

<div data-role="page" id="activities">
  <div data-role="header">
    <h1>Activities</h1>
  </div>
  <div data-role="content">
      <!-- the contents of the list view will be rendered via the backbone view -->
  </div>
</div>

<div data-role="page" id="activity-details" data-add-back-btn="true">
  <div data-role="header">
    <h1>Activity Details</h1>
  </div>
  <div data-role="content" id="activity-details-content">
      <!-- the contents of the list view will be rendered via the backbone view -->
  </div>
</div>

</body>

Javascript：

var exercise = {};

(function($){

exercise.Activity = Backbone.Model.extend({
});

exercise.Activities = Backbone.Collection.extend({
    model: exercise.Activity,
    url: "exercise.json",
    comparator: function(activity){
        var date = new Date(activity.get('date'));
        return date.getTime();
    }
});

exercise.ActivityListView = Backbone.View.extend({
    tagName: 'ul',
    id: 'activities-list',
    attributes: {"data-role": 'listview'},

    initialize: function() {
        this.collection.bind('add', this.render, this);
        this.template = _.template($('#activity-list-item-template').html());
    },

    render: function() {
        var container = this.options.viewContainer,
            activities = this.collection,
            template = this.template,
            listView = $(this.el);

        $(this.el).empty();
        activities.each(function(activity){
            var renderedItem = template(activity.toJSON()),
                $renderedItem = $(renderedItem);  //convert the html into an jQuery object
                $renderedItem.jqmData('activityId', activity.get('id'));  //set the data on it for use in the click event
            $renderedItem.bind('click', function(){
                //set the activity id on the page element for use in the details pagebeforeshow event
                $('#activity-details').jqmData('activityId', $(this).jqmData('activityId'));  //'this' represents the element being clicked
            });
            listView.append($renderedItem);
        });
        container.html($(this.el));
        container.trigger('create');
        return this;
    }
});

exercise.ActivityDetailsView = Backbone.View.extend({
    //since this template will render inside a div, we don't need to specify a tagname
    initialize: function() {
        this.template = _.template($('#activity-details-template').html());
    },

    render: function() {
        var container = this.options.viewContainer,
            activity = this.model,
            renderedContent = this.template(this.model.toJSON());

        container.html(renderedContent);
        container.trigger('create');
        return this;
    }
});

exercise.initData = function(){
    exercise.activities = new exercise.Activities();
    exercise.activities.fetch({async: false});  // use async false to have the app wait for data before rendering the list
};

}(jQuery));

$('#activities').on('pageinit', function(event){
var activitiesListContainer = $('#activities').find(":jqmData(role='content')"),
    activitiesListView;
exercise.initData();
activitiesListView = new exercise.ActivityListView({collection: exercise.activities, viewContainer: activitiesListContainer});
activitiesListView.render();
});

$('#activity-details').on('pagebeforeshow', function(){
    console.log('activityId: ' + $('#activity-details').jqmData('activityId'));
    var activitiesDetailsContainer = $('#activity-details').find(":jqmData(role='content')"),
        activityDetailsView,
        activityId = $('#activity-details').jqmData('activityId'),
    activityModel = exercise.activities.get(activityId);

    activityDetailsView = new exercise.ActivityDetailsView({model: activityModel, viewContainer: activitiesDetailsContainer});
    activityDetailsView.render();
});

这似乎是一个让一些人束手无策的问题。1.3.0 让参数传递插件之类的东西中断了，所以网络代码肯定在某处发生了变化。

4

0 回答 0