0

嘿,所以我正在尝试让这个 Backbone.js 示例运行...这是 todo 项目的原始文件:

main.js 文件

(function() {

    window.App = {
        Models: {},
        Collections: {},
        Views: {},
        Router: {}
        //Routes, Templates
    };

    //App.Helpers = {};
    //App.Helpers.template = ...
    window.template = function(id) {
        return _.template($('#' + id).html());
    }

    App.Router = Backbone.Router.extend({
        routes: {

        }
    });

    App.Models.Task = Backbone.Model.extend({
        default: {
            title: '',
            completed: false
        },

    });



    App.Views.Task = Backbone.View.extend({
        tagName: 'p',

        template: template('taskTemplate'),

        initialize: function() {
            this.model.on('change', this.render, this);
            this.model.on('destroy', this.remove, this);
        },

        events: {
            'click .edit': 'editTask',
            'click .delete': 'destroy',
            'click .checked': 'checked'
        },

        editTask: function() {
            var newTaskTitle = prompt('wata change to', this.model.get('title'));
            this.model.set('title', newTaskTitle);

            if(!newTaskTitle) return;
            this.model.set('title', newTaskTitle);
        },
        destroy: function() {
            this.model.destroy();
        },

        render: function() {
            var template = this.template(this.model.toJSON());
            this.$el.html(template);
            return this;
        },

        remove: function() {
            this.$el.remove();
        },

        checked: function() {
            console.log(this.$el.hasClass('taskComplete'));
            if( $('.checked:checked') && !this.$el.hasClass('taskComplete')) {
                this.$el.addClass('taskComplete');

            } else {
                this.$el.removeClass('taskComplete');
            }
        }


    });



    App.Collections.Tasks = Backbone.Collection.extend({
        model: App.Models.Task
    });


    App.Views.Tasks = Backbone.View.extend({
        tagName: 'ul',

        initialize: function() {
            this.collection.on('add', this.addOne, this)
        },

        render: function() {
            this.collection.each(this.addOne, this);

            return this;
        },

        addOne: function(task) {
            var taskView = new App.Views.Task({model: task});
            this.$el.append(taskView.render().el);
        }

    });

    App.Views.AddTask = Backbone.View.extend({
        el: '#addtask',

        events: {
            'submit': 'submit'
        },

        initialize: function() {

        },

        submit:function(e) {
            e.preventDefault();

            var newTaskTitle = $(e.currentTarget).find('input[type=text]').val();

            var task = new App.Models.Task({title: newTaskTitle});
            console.log(this.collection);
            this.collection.add(task);
        }
    });


    var tasks = new App.Collections.Tasks ([
        {
            title: 'Go to the store',
            priority: 4
        },
        {
            title: 'Go to the mall',
            priority: 3
        },
        {
            title: 'Go to work',
            priority: 5
        },
    ]);
        var addTaskView = new App.Views.AddTask({collection: tasks });

    var tasksView = new App.Views.Tasks({collection: tasks});
    $('.tasks').html(tasksView.render().el);

}) ();

这是html:

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title></title>
</head>
<body>
    <style>
        .taskComplete {
            text-decoration: line-through;
        }
    </style>
    <h1> My Tasks </h1>
    <form id="addtask" action="">
        <input type="text" placeholder="new task">
        <input type="submit" value="Add Task">
    </form>
    <div class="tasks">

        <script id='taskTemplate' type='text/template'>
            <input class='checked' type="checkbox">
            <span> <%= title %> </span>
            <button class='edit'> Edit </button>
            <button class='delete'> Delete </button>

        </script>

    </div>

    <script src="js/underscore.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/backbone.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

我尝试使用 require.js 将它们分成单独的文件,如下所示:(将其命名为 user 以便更容易区分其他文件)

这是模板文件:user.html

<input class='checked' type="checkbox">
<span> <%= title %> </span>
<button class='edit'> Edit </button>
<button class='delete'> Delete </button>

这是 /models/user.js

define([
  'underscore',
  'backbone'
], function(_, Backbone) {

  var user = Backbone.Model.extend({
        default: {
            title: '',
            completed: false
        },

    });
  return user;
});

这是用户集合 /collections/user

define([
  'jquery',
  'underscore',
  'backbone',
  'models/user'

], function($, _, Backbone, userM){

    var users = Backbone.Collection.extend({
    model: userM
  });

  return users;
});

这是用户视图:

define([
  'jquery',
  'underscore',
  'backbone',
  // Pull in the Collection module from above,
  'models/user'
  'text!templates/user.html'

], function($, _, Backbone, userM, userT){
  var user = Backbone.View.extend({
    tagName: 'p',

    template: template('taskTemplate'),

    initialize: function() {
      this.model.on('change', this.render, this);
      this.model.on('destroy', this.remove, this);
    },

    events: {
      'click .edit': 'editTask',
      'click .delete': 'destroy',
      'click .checked': 'checked'
    },

    editTask: function() {
      var newTaskTitle = prompt('wata change to', this.model.get('title'));
      this.model.set('title', newTaskTitle);

      if(!newTaskTitle) return;
      this.model.set('title', newTaskTitle);
    },
    destroy: function() {
      this.model.destroy();
    },

    render: function() {
      var template = this.template(this.model.toJSON());
      this.$el.html(template);
      return this;
    },

    remove: function() {
      this.$el.remove();
    },

    checked: function() {
      console.log(this.$el.hasClass('taskComplete'));
      if( $('.checked:checked') && !this.$el.hasClass('taskComplete')) {
        this.$el.addClass('taskComplete');

      } else {
        this.$el.removeClass('taskComplete');
      }
    }


  });
  return user;
});

这是用户视图:

define([
  'jquery',
  'underscore',
  'backbone',
  // Pull in the Collection module from above,
  'models/user',
  'views/user',
  'collections/users',
  'text!templates/user.html'

], function($, _, Backbone, userM, userV, userC){
  var users = Backbone.View.extend({
    tagName: 'ul',

    initialize: function() {
      this.collection.on('add', this.addOne, this)
    },

    render: function() {
      this.collection.each(this.addOne, this);

      return this;
    },

    addOne: function(userM) {
      var userView = new userV({model: userM});
      this.$el.append(userView.render().el);
    }
    return users;
  });
});

这是 index.html

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title></title>
</head>
<body>
    <style>
        .taskComplete {
            text-decoration: line-through;
        }
    </style>
    <h1> My Tasks </h1>
    <form id="addtask" action="">
        <input type="text" placeholder="new task">
        <input type="submit" value="Add Task">
    </form>
    <div class="tasks">

    </div>

    <script src="js/libs/underscore.min.js"></script>
    <script src="js/libs/jquery.min.js"></script>
    <script src="js/libs/backbone.min.js"></script>
    <script src="js/libs/require.js"></script>
    <script src="js/views/users.js"></script>
</body>
</html>

当我尝试分离文件时,我很确定我做错了什么......

4

0 回答 0