2017-02-14 93 views
3

在我們的代碼基礎線插補我們有以下的混合物:.bind VS在奧裏利亞

  1. 屬性= 「$ {}的東西」,屬性= 「$ {東西|轉換器}」,等等。
  2. attribute.bind = 「東西」,attribute.bind = 「東西|轉換器」

我覺得後者更容易閱讀。

我提到的例子與上面完全一樣;即它們不添加任何附加的字符串內容。

我認爲在Aurelia上也比較容易。我對麼?

此外,對於這些不涉及實際插值的具體情況,涉及到第一種形式還有什麼好處? (除了它是 鍵入兩個字符。)

回答

3

鑑於你所示的例子,我會推薦使用選項2.它真的不是「在Aurelia上更容易」,但它更明確,你是將該屬性的值綁定到列出的屬性。

原來的答案下面

第一個選項的好處是當你有,例如,一個屬性,它接受許多值,但作爲一個單一的字符串。最常見的例子是class屬性。該class屬性接受一個空格分隔的列表中的多個類:

<div class="foo bar baz"></div> 

假設我們只想增加或從基於道具我們的VM someProp同時使其他類此列表中刪除類baz。要使用.bind語法執行此操作,我們必須在具有完整列表的虛擬機上創建一個屬性,但會添加或刪除由值someProp確定的baz。但是,使用插值結合的字符串,這變得簡單多了:

<div class="foo bar ${someProp ? 'baz' : ''}"></div> 

你可以想像這可能與多個類別進行擴展添加或刪除。你可以創建一個值轉換器來使用.bind語法來完成這項工作,但最終可能會導致某些內容不可讀。

我能想象一個值轉換器創建,可能看起來像這樣使用:

<div class.bind="someProp | toggleClass:'baz':'foo':bar'"></div> 

我真的認爲這是比使用串插語法可讀的要少得多。

順便說一句,值轉換器上面我想象中應該是這樣的:

export class ToggleClassValueConverter { 
    toView(value, toggledClass, ...otherProps) { 
    return `${otherProps.join(' ')} ${value ? toggledClass : ''}`; 
    } 
} 

最好的部分是,我仍然使用串插在值轉換器:-)

+0

「我所指的例子是像上面,他們不添加任何額外的字符串內容。」 :) 所以在問題的案件總是形式=「$ {...}」的,他們不喜歡的東西類=「class1的$ {...}」,這我同意將是一個良好的使用插值情況。 – Dave

+0

是的,但你問是否有任何好處的字符串插值形式,所以我舉了一個例子,它更簡單的使用它。 –

+0

我以爲我在問題中明確表達了我正在具體詢問字符串沒有實際插入的情況。我會重新修改它以使其更加明顯。乾杯。 – Dave

0

後通過我已經打開的選項卡涉水,我發現這一點。雖然它不是完全一樣的東西,這是一個有點老了,有一個類似的事情,談到了https://github.com/aurelia/templating-binding/issues/24#issuecomment-168112829由Danyow先生(重點煤礦)

是的,綁定的行爲符號爲&(而不是|用於價值轉換器)。

<input type="text" data-original="${name & oneTime}" value.bind="name" />

這裏寫一次性結合的標準方法。 這將是一個有點輕量的分析方面和有約束力的

<input type="text" data-original.one-time="name" value.bind="name" />

我不知道這是否適用於.bind/$ {name}的情況下,以及這個例子中的onetime,但是如果涉及到他的注意力,他可以說任何一種方式。

鑑於這是不是一個添油加醋的答案,我會標誌阿什利是作爲答案,因爲它證實了易讀性問題,並提供有關其他使用情況的有用信息上類似的術語應當別人搜索。

+0

我會在這裏推遲到傑里米。他絕對是專家。 –