【Backbone】Model 改變自動更新 View

by divaka

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>

<button id="triggerAddEvent">add item</button>
<button id="triggerDeleteEvent">delete item</button>
<div id="container"></div>

JavaScript

// Model 
itemModel = new Backbone.Model({
    data:[
        { item: "item1"},
        { item: "item2"}
    ]
});

// update
updateContainer(itemModel);

// binding event
itemModel.bind('change:data',function(){
    alert("change Event Fired");
    console.log("更新之前="+itemModel.get("data").item);
    updateContainer(this);
});


// trigger add event
$("#triggerAddEvent").click(function(){

    // new data
    var x = { item: "item3"};
    
    var temp = itemModel.get("data");
    temp.push(x);
    console.log("temp="+temp);
    
    // set the new data
    itemModel.set({data:x});
    
    //updateContainer(itemModel);    
    
});

// trigger delete event
$("#triggerDeleteEvent").click(function(){
    
    for(i=0;i<itemModel.get("data").length;i++){
        var b = itemModel.get("data")[i].item;
        console.log(itemModel.get("data"));
        if(b=="item3"){
            itemModel.get("data").splice(i,1);
        }
        console.log(itemModel.get("data"));        
    }
    
});

//更新顯示
function updateContainer(model){

    //empty container
    $("#container").html("");
    
    //re-render UI
    var data = model.get('data');
    for (var i=0, l=data.length; i<l; i++) {
        $("#container").append(data[i].item+" , ");
    }    
    
}