Canjs改變了事件

-1

有沒有辦法檢測canjs中的列表更改並使視圖重繪？我正在更改列表，但這不會顯示在屏幕上。
目前我有視圖模型Canjs改變了事件

TodosListViewModel = can.Map.extend({ 
todoCreated: function(context, element) { 
    // new todo is created 
    var Todo = this.Todo; 
    new Todo({ 
    name: can.trim(element.val()) 
    }).save(); 
    element.val("");  
}, 
tagFiltered: function(context, element) { 
    // filter todos according to tag 
    this.todos = this.todos.filter(function(todo) { 
    return todo.tag === element.val(); 
    }); 
}

}）;
和組分

can.Component.extend({ 
// todos-list component 
// lists todos 
tag: "todos-list", 
template: can.view("javascript_view/todos-list"), 
scope: function() { 
    // make the scope for this component 
    return new TodosListViewModel({ 
    todos: new TodoList({}), 
    Todo: Todo 
    }); 
}, 
events: { 
    "{scope.Todo} created": function(Todo, event, newTodo) { 
    // todo created 
    this.scope.attr("todos").push(newTodo); 
    }, 
    "{scope.todos} changed": function(a,b,c,d,e,f,g,h) { 
    console.log("todo change",d,e); 
    } 
}

}）;
的標記

<input type="text" name="tagFilter" placeholder="Tag lookup" can-enter="tagFiltered" />

的代碼http://git.io/vrPCTQ

來源

2014-10-07 php--

你能更好地格式化你的代碼嗎？ CanJS具有實時綁定功能，並會自動更改。你可以創建一個小提琴，演示類似於我爲另一個問題創建小提琴的問題嗎？ – 2014-10-08 03:04:56

http://jsfiddle.net/tkd9Lvtm/2/我使用tagFiltered來過濾列表。它過濾todos，但不顯示在屏幕上。 – 2014-10-08 10:37:07

其餘的在你展示的小提琴，你有沒有在範圍界定「頁」，採取從原始字符串值的情況下組件的標籤（使用「@」作爲scope.page的值）。退房的一個行差這裏路由器的範圍：

http://jsfiddle.net/tkd9Lvtm/3/

編輯：這並沒有解決原來的問題，所以這裏的，你可以做些什麼來得到這個開始。我爲你製作了一個新的小提琴版本。

http://jsfiddle.net/tkd9Lvtm/4/

與CanJS 2.1最好的方式來完成你想要的是使用你的表單字段can-value屬性雙向綁定你的元素在您的視圖模型屬性值。您可以看到，標記搜索的輸入字段現在使用can-value而不是can-change - 這使得它獨立於過濾器函數，該函數僅用於繪製更下面的項目。

CanJS會在屬性更改時自動重新運行過濾器，因爲在視圖模型的過濾器函數內部調用this.attr("filterTerm")將在第一次運行時設置綁定。實時綁定視圖層正在計算這些函數「底層」，這些計算（a）監聽函數內讀取的屬性的更改;和（b）每次更改聽取屬性更新DOM。使用視圖模型將值存儲在過濾器字段中，然後允許該功能在每次更改時再次觸發。

來源

2014-10-08 18:45:33

謝謝。我仍然需要根據標籤過濾列表。 – 2014-10-08 19:44:16

更新了我的答案，回答了原始問題。對不起，最初由於它沒有渲染而被分散注意力。 :) – 2014-10-08 21:14:14

Canjs改變了事件

回答

相關問題