Backbone不是为简单的模型引发事件

Backbone is not fireing events for simple model

本文关键字：模型 事件 简单 Backbone      更新时间：2023-09-26

我试图在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

there-console可以工作，但在我的localMachine示例中：不，有什么问题？我做错了什么？

（你可以从我的投递箱中运行：http://bit.ly/1tLW2N1)

为什么事件没有引起轰动？也许有人可以帮忙，因为花了一整天的时间都没有找到解决方案

当我将整个代码包装在中时

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

一切都还好，但我认为这是一种糟糕的做法。怎么做才是正确的？

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

第一个问题是您的视图没有得到它们的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

它不会工作，因为CCD_ 6将不存在。您可以通过将这些变量改为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
相关文章：