Canjs創建事件

我正試圖檢測組件中創建的事件。什麼都沒發生。Canjs創建事件

can.Component.extend({ 
// todos-list component 
// lists todos 
tag: "todos-list", 
template: can.view("javascript_view/todos-list"), 
scope: { 
    Todo: Todo, 
    todos: TodoList.slice(0), 
    todoCreated: function(context, element) { 
    // new todo is created 
    var Todo = this.Todo; 
    new Todo({ 
     name: can.trim(element.val()) 
    }).save(); 
    element.val(""); 
    } 
}, 
events: { 
    "{Todo} created": function(Todo, event, newTodo) { 
    console.log("created"); 
    } 
} 
});

該模型是

var Todo = can.Model.extend({ 
// todo model 
// fetches things and so on 
findAll: function() { 
    // get all todos 
    return $.Deferred().resolve(todos); 
}, 
findOne: function(params) { 
    // get one todo 
    return $.Deferred().resolve(todos[(+params.id) - 1]); 
}, 
create: function(attributes) { 
    // creates new todo 
    var last = todos[todos.length - 1]; 
    $.extend(attributes, {id: last.id + 1, detail: "", tag: ""}); 
    todos.push(attributes); 
    return $.Deferred().resolve(attributes); 
}, 
update: function(id, attributes) { 
    // update one todo 
    $.extend(todos[id - 1], attributes); 
    return $.Deferred().resolve(); 
}, 
destroy: function() { 
    // destroy todo 
    return $.Deferred().resolve(); 
} 
}, {});

標記是

<input type="text" name="todo" placeholder="What needs to be done" can-enter="todoCreated" />

是處理創建的事件的這種正確的做法還是有更好的辦法？
我需要列表來反應，當新的待辦事項創建。
參見here for code

來源

2014-10-07 php--

'todos'數組來自哪裏？ – 2014-10-07 03:16:24

你渲染一個包含''元素的模板嗎？你是否在頁面中插入了該模板的結果？ – 2014-10-07 03:17:59

todos有一個var TodoList = new Todo.List（{}）的實例，是的，我正在渲染包含待辦事項列表的模板 – 2014-10-07 11:21:51

這是一個錯誤：https://github.com/bitovi/canjs/issues/1261

這是由於CanJS處理Todo構造成方法，因爲Todo是一個JS函數。

可以解決這個問題通過直接用作範圍can.Map例如設置待辦事項如下所示：

http://jsfiddle.net/c3bfy/147/

關鍵是要創造你想要的方式單獨視圖模型在範圍：

TodoListViewModel = can.Map.extend({ 
    todoCreated: function(context, element) { ... } 
});

而要改變你的範圍與Todo返回此視圖模型的實例作爲一個屬性：

scope: function(){ 
    return new TodoListViewModel({Todo: Todo}) 
},

這會迫使Todo被視爲屬性而不是方法。

來源

2014-10-07 16:44:08

回答

相關問題