Question

我尝试在localStorage上保存一些模型数据（但是甚至尝试捕获这个事件，然后调试一些文本），并且它不起作用：没有错误，但也没有事件。

我的js代码：

 var app = {
     debug: true,
     log: function(obj) {
         if (this.debug) {
             console.log(obj);
         }
     },
 }; 

 //--------------
 // Models
 //--------------
 app.todo = Backbone.Model.extend({
     defaults: {
         title: '',
         descr: '',
         created_at: Date(),
         completed: false
     }
 });

 //--------------
 // Collections
 //--------------
 app.todoList = Backbone.Collection.extend({
     model: app.todo,
     localStorage: new Store("backbone_todo")
 });



 app.AppView = Backbone.View.extend({
     el: $('body'),
     events: {
         'click .nav_todo_list': 'todo_homepage',
         'click .nav_todo_editor': 'todo_editor',
         'click .nav_todo_constructor': 'todo_constructor',
     },
     todo_homepage: function() {
         app.router.navigate("todo_homepage", true);
     },

     todo_editor: function() {
         app.router.navigate("todo_editor", true);
     },

     todo_constructor: function() {
         app.router.navigate("todo_constructor", true);
     },
 });

 app.ApptodoView = Backbone.View.extend({
    el: $('#todo_constructor'),
    initialize: function () {
        //this.input = this.$('#new_todo_title');
        var new_todo_title = $("#new_todo_title").val();
        var new_todo_descr = $("#new_todo_descr").val();
        var new_todo_status = $("#new_todo_status").val();
      },
      events: {
        'click #new_todo_save_btn': 'createtodoOnClick'
      },
      createtodoOnClick: function(e){
        console.log("createtodoOnClick");
        app.todoList.create(this.newAttributes());
        new_todo_title.val(''); // clean input box
        new_todo_descr.val(''); // clean input box
        new_todo_status.val(''); // clean input box
      },
      newAttributes: function(){
        return {
          title: new_todo_title.trim(),
          descr: new_todo_descr.trim(),
          created_at: Date(),
          completed: new_todo_status.trim()
        }
      }
 });

 //--------------
 // Routers
 //--------------

 app.Router = Backbone.Router.extend({
     routes: {
         "": "todo_homepage", // Пустой hash-тэг
         "todo_editor": "todo_editor", // Блок удачи
         "todo_constructor": "todo_constructor" // Блок ошибки
     },
     todo_homepage: function() {
         $("section").hide(); //
         $("#todo_homepage").show();
     },

     todo_editor: function() {
         $("section").hide();
         $("#todo_editor").show();
     },

     todo_constructor: function() {
         $("section").hide();
         $("#todo_constructor").show();
     }
 });

 //--------------
 // Initializers
 //--------------   


 $(document).ready(function() {
     app.router = new app.Router();
     Backbone.history.start();
     app.todoList = new app.todoList();
     app.appView = new app.AppView();
     app.apptodoView = new app.ApptodoView();
 });

和html的一部分：

<body>
    <nav>
        <a href="#/" class="nav_todo_list">todo List</a>
        <a href="#/todo_editor" class="nav_todo_editor">todo Editor</a>
        <a href="#/todo_constructor" class="nav_todo_constructor">todo Constructor</a>      
    </nav>

    <section id="todo_homepage">
        <h1>todo List</h1>
        <section id="main">
            <ul id="todo_list_homepage"></ul>
        </section>
    </section>

    <section id="todo_editor">
        <h1>todo Editor</h1>
        <section id="main">
            <ul id="todo_crud"></ul>
        </section>
    </section>

    <section id="todo_constructor">
            <h1>todo Constructor</h1>
            <label for="todo_title">Title:</label>
            <input id="new_todo_title"">
            <label for="todo_status">Status:</label>
            <select id="new_todo_status" name="todo_status">
                <option selected value="false">Not completed.</option>
            <option value="true">Completed.</option>
       </select>
       <input type="button" id="new_todo_save_btn" value="Save">

    </section>
</body>

你也可以查看小提琴：

http://bit.ly/1nzsP5a

那里 - 控制台工作，但在我的localMachine示例中：不 - 问题是什么？我做错了什么？

（您可以从我的保管箱运行它：http://bit.ly/1tLW2N1）

为什么事件不会发生？也许有人可以提供帮助，因为花了一整天而且找不到解决方案

当我将整个代码包装在：

时

$(window).load(function(){});

一切都好，但我认为这是一种不好的做法。怎么做？

Answer 1

我发现您提供的代码存在两个主要问题。

第一个问题是您的观看次数未设置el。如果您尝试添加console.log，请执行以下操作：

 app.taskList = new app.TaskList();
 alert(app.taskList.el)

你会看到taskList的el实际上是undefined。通常在Backbone中，您希望在实例化视图时定义el，而不是在定义视图时。换句话说，而不是：

app.AppTaskView = Backbone.View.extend({
    el: $('#task_constructor'),

 app.taskList = new app.TaskList();

尝试做：

app.AppTaskView = Backbone.View.extend({

app.taskList = new app.TaskList({el: '#task_constructor');

我看到的第二个问题是你似乎误解了范围在Javascript中的工作原理。当您定义这样的变量时：

initialize: function () {
    //this.input = this.$('#new_task_title');
    var new_task_title = $("#new_task_title").val();

它只能在initialize函数中使用。因此，当您稍后尝试使用它时：

createTaskOnClick: function(e){
    console.log("createTaskOnClick");
    app.taskList.create(this.newAttributes());
    new_task_title.val(''); // clean input box

它不起作用，因为new_task_title将不存在。您可以通过改为View的变量属性来修复此问题：

initialize: function () {
    //this.input = this.$('#new_task_title');
    this.new_task_title = $("#new_task_title").val();

createTaskOnClick: function(e){
    console.log("createTaskOnClick");
    app.taskList.create(this.newAttributes());
    this.new_task_title.val(''); // clean input box

Backbone不会为简单模型触发事件

1 个答案: