2015-02-24 83 views
0

更新:我已經更新了我的意見,我展示瞭如何使用解決從接受的答案信息這個問題。如何更新Backbone JS模型屬性?

我想通過從我的觀點click事件我的骨幹JS模型的更新/增加一個屬性(「VIDEO_VIEWS」)。但是,作爲一名骨幹新秀,我不確定如何完全實現這一點。

我想要「VIDEO_VIEWS」屬性由一個與調用playVideo事件(點擊)遞增。

感謝您的幫助!

這裏是我的JSON的從我的API結構:

{ 
"id": 8, 
"name": "Bike to work day", 
"slug": "bike-work-day", 
"tagline": "A brief tagline about the video.", 
"description": "This is a test.", 
"created": "2015-02-06T15:22:26.342658Z", 
"website": "http://thevariable.com/", 
"logo": "http://dev.thevariable.com/media/brands/logos/test_logo.jpeg", 
"video": "http://dev.thevariable.com/media/brands/videos/3D463BC3-38B8-4A6F-BE93-3F53E918EC3B-3533-00000118880074BA_1.1.mp4", 
"video_thumbnail": "http://dev.thevariable.com/media/brands/video_thumbnails/3D463BC3-38B8-4A6F-BE93-3F53E918EC3B-3533-00000118880074BA_1.1.mp4.jpg", 
"links": { 
"self": "http://dev.thevariable.com/api/brands/bike-work-day" 
}, 
"status_display": "published", 
"video_views": 0 
} 

這裏是我的骨幹網訪問量:

var TemplateView = Backbone.View.extend({ 
    templateName: '', 
    initialize: function() { 
     this.template = _.template($(this.templateName).html()); 
    }, 
    render: function() { 
     var context = this.getContext(), html = this.template(context); 
     this.$el.html(html); 
    }, 
    getContext: function() { 
     return {}; 
    } 
}); 

var HomePageView = TemplateView.extend({ 
    templateName: '#home-template', 
    events: { 
     'click video': 'updateCounter', 
     'click .video video': 'playVideo', 
     'click .sound': 'muteVideo', 
     'click .js-open-card': 'openCard' 
    }, 
    initialize: function (options) { 
     var self = this; 
     TemplateView.prototype.initialize.apply(this, arguments); 
     app.collections.ready.done(function() { 
      app.brands.fetch({success: $.proxy(self.render, self)}); 
     }); 
    }, 
    getContext: function() { 
     return {brands: app.brands || null}; 
    }, 
    updateCounter: function (e) { 
     var id = $(e.currentTarget).data('id'); 
     var item = self.app.brands.get(id); 
     var views = item.get('video_views'); 
     var video = this.$('.video video'); 
     // Only update the counter if the video is in play state 
     if (video.prop('paused')) { 
      item.save({video_views: views + 1}, {patch: true}); 
      this.render(); 
     } 
    }, 
    playVideo: function() { 
     var video = this.$('.video video'); 
     if (video.prop('paused')) { 
      video[0].play(); 
     } else { 
      video.get(0).pause(); 
     } 
    }, 
    muteVideo: function (e) { 
     e.preventDefault(); 
     var video = this.$el.parent().find('video'); 
     video.prop('muted', !video.prop('muted')); 
     this.$('.sound').toggleClass('is-muted'); 
    }, 
    openCard: function (e) { 
     e.preventDefault(); 
     this.$el.toggleClass('is-open'); 
     this.$el.closest('.card-container').toggleClass('is-open'); 
    } 
}); 

我的骨幹機型:

var BaseModel = Backbone.Model.extend({ 
    url: function() { 
     var links = this.get('links'), 
      url = links && links.self; 
     if (!url) { 
      url = Backbone.Model.prototype.url.call(this); 
     } 
     return url; 
    } 
}); 

app.models.Brand = BaseModel.extend({ 
    idAttributemodel: 'slug' 
}); 

var BaseCollection = Backbone.Collection.extend({ 
    parse: function (response) { 
     this._next = response.next; 
     this._previous = response.previous; 
     this._count = response.count; 
     return response.results || []; 
    }, 
    getOrFetch: function (id) { 
     var result = new $.Deferred(), 
      model = this.get(id); 
     if (!model) { 
      model = this.push({id: id}); 
      model.fetch({ 
       success: function (model, response, options) { 
        result.resolve(model); 
       }, 
       error: function (model, response, options) { 
        result.reject(model, response); 
       } 
      }); 
     } else { 
      result.resolve(model); 
     } 
     return result; 
    } 
}); 

app.collections.ready = $.getJSON(app.apiRoot); 
app.collections.ready.done(function (data) { 
    app.collections.Brands = BaseCollection.extend({ 
     model: app.models.Brand, 
     url: data.brands 
    }); 
    app.brands = new app.collections.Brands(); 
}); 

回答

0

只是增量是屬性在模型上並保存。

var views = model.get('video_views'); 

model.set({video_views: views + 1}); 

model.save(); 
+0

你能用我的代碼更新你的答案嗎? – 2015-02-24 22:18:33

+0

我如何去在列表中爲我的主頁獲得一個單獨的品牌對象? – 2015-02-24 22:36:19

+1

'this.model'(從視圖) – 2015-02-24 23:31:50