使用SproutCore中的合成URL引用靜態文件

Question

我使用static_url來指代位於資源目錄中的靜態文件。這工作得很好，當字面URL字符串，但它並沒有使用變量構建了複合網址的工作：

static_url(foo + '/' + bar) 

這僅僅是通過了SproutCore的預處理器忽略。

那麼有什麼方法可以用一個合成URL來引用一個靜態文件？或者，由於我正在處理一組有限的網址，因此我必須在介紹每個合成網址之前介紹它嗎？

Answer 1

這個答案假設你正在使用SC1。

我相信static_url()是由編譯時的構建工具（sc-build和sc-server）處理的，而不是運行時的框架。

構建工具的代碼可以在https://github.com/sproutcore/abbot找到。我相信base.rb replace_static_url()是工作完成的地方。

所以下面的代碼：

imageView: SC.ImageView.design({ 
    layout: { top: 0, left: 0, width: 200, height: 18 }, 
    value: static_url('picture.png') 
})  

被編譯成被傳遞到瀏覽器之前執行以下操作：

imageView: SC.ImageView.design({ 
    layout: { top: 0, left: 0, width: 200, height: 18 }, 
    value: '/static/vvv/en/current/source/resources/picture.png?1320555999' 
}) 

要在運行時創建複合URL，請嘗試使用綁定。

// In your view 
imageView: SC.ImageView.design({ 
    layout: { top: 0, left: 0, width: 200, height: 18 }, 
    valueBinding: 'Vvv.controller.imageValue' 
}) 

// In another file, define the controller 
Vvv.controller = SC.Object.create({ 
    foo: '/static/vvv/en/current/source/resources', 
    bar: 'bug.png', 

    imageValue: function() { 
     return this.get('foo') + '/' + this.get('bar'); 
    }.property().cacheable() 
}); 

另外，如果你有一組有限的資源，你可能想給這個一展身手：

Vvv.controller = SC.Object.create({ 
    foo: static_url('foo.png'), 
    bar: static_url('bar.png'), 
    isFoo: false, 

    imageValue: function() { 
     if (this.get('isFoo')) { 
      return this.get('foo'); 
     } else { 
      return this.get('bar'); 
     } 
    }.property('isFoo').cacheable() 
}); 

你可以通過設置isFoo爲true或false在運行時更改圖像。

希望這會有所幫助。