CanJS模型的動態屬性？

Question

我想在我的模型中添加不在REST服務結果中的動態屬性。這些動態特性將縮短名稱，日期格式等。例如，我CanJS模式是這樣的：

var MyModel = can.Model({ 
    findAll: 'GET /Services/all'), 
    findOne: 'GET /Services/{id}'), 
    create: 'POST /Services/all'), 
    update: 'PUT /Services/{id}'), 
    destroy: 'DELETE /Services/{id}') 
}, {}); 

然後我檢索數據是這樣的：

MyModel.findAll({}, function(data) { 
    $('#main').html(can.view('templates/List.ejs'), data)); 
}); 

這該是多麼我的列表。 ejs模板看起來像：

<% for(var i = 0; i < this.length; i++) { %> 
    <div class="thumb"><img src="http://cdn.somewhere.com/images/logo.<%= this[i].BaseName %>.png" /></div> 
    <div class="title"><%= this[i].Name %></div> 
    <div class="date"><%= moment(this[i].StartDate).format('MMM DD, YYYY') %> - <%= moment(this[i].EndDate).format('MMM DD, YYYY') %></div> 
    <div class="location"><%= this[i].LocationFriendly %></div> 
    <div class="description"><%= this[i].Description %></div> 
<% } %> 

請注意我在模板中爲圖像src和開始/結束日期所做的邏輯。我願把這個邏輯模型，因此所有我在模板做的是這樣的：

<% for(var i = 0; i < this.length; i++) { %> 
    <div class="thumb"><img src="<%= this[i].ImageURL %>" /></div> 
    <div class="title"><%= this[i].Name %></div> 
    <div class="date"><%= this[i].StartDateFriendly %> - <%= this[i].EndDateFriendly %></div> 
    <div class="location"><%= this[i].LocationFriendly %></div> 
    <div class="description"><%= this[i].Description %></div> 
<% } %> 

如何我提出這個邏輯到模型層或任何更好的地方，然後在模板？感謝您的任何幫助或建議。

Answer 1

最簡單的方法是隻創建你的模型功能：

var MyModel = can.Model({ 
    findAll: 'GET /Services/all', 
    findOne: 'GET /Services/{id}', 
    create: 'POST /Services/all', 
    update: 'PUT /Services/{id}', 
    destroy: 'DELETE /Services/{id}' 
}, { 
    imageUrl : function(){ 
     return "http://cdn.location.com/" + this.BaseName + ".png" 
    }, 
    startDateFriendly : function(){ 
     return moment(this.StartDate).format('MMM DD, YYYY') 
    }, 
    endDateFriendly : function(){ 
     return moment(this.StartDate).format('MMM DD, YYYY') 
    }, 
    locationFriendly: function() { 
     // ... 
    } 
}); 

然後，你可以調用這些函數從該視圖：

<% for(var i = 0; i < this.length; i++) { %> 
    <div class="thumb"><img src="<%= this[i].imageUrl() %>" /></div> 
    <div class="title"><%= this[i].Name %></div> 
    <div class="date"><%= this[i].startDateFriendly() %> - <%= this[i].endDateFriendly() %></div> 
    <div class="location"><%= this[i].locationFriendly %></div> 
    <div class="description"><%= this[i].Description %></div> 
<% } %>