Aurelia，如何使可選綁定

Aurelia是否支持可選綁定？我無法在任何地方找到這些信息。我遇到的問題是我有一個title屬性，可能會或可能不會在對象數組中填充該屬性。我使用repeat.for和title.bind，但如果此屬性不是對象數組的一部分，我不希望該屬性存在。 Aurelia有可能嗎？Aurelia，如何使可選綁定

當使用Bootstrap-Select和空title時，會引發錯誤。有Aurelia即時創建屬性將解決我的問題。

是我到目前爲止的代碼，看起來像這樣

<select class="selectpicker" value.bind="value" options.bind="options" disabled.bind="disabled"> 
<option repeat.for="option of options" model.bind="option" 
     data-subtext.bind="option.subtext" 
     title.bind="option.title"> 
     ${option.name} 
</option>

在這個例子中，我想使data-subtext和title作爲可選屬性。這是可行的嗎？

由於這是一個自定義元素，我嘗試刪除我的對象delete this.element.title的title屬性，但這似乎不起作用。我也試過用jquery，但再次沒有運氣。

來源

2017-03-08 ghiscoding

我沒在許多情況下測試，但我認爲你還可以創建自定義綁定的行爲，就像這樣：

export class OptionalBindingBehavior { 
    bind(binding, scope, interceptor) { 

    binding.originalupdateTarget = binding.updateTarget; 
    binding.originalTargetProperty = binding.targetProperty; 
    binding.updateTarget = val => { 
     if (val === undefined || val === null || val === '') { 
     binding.targetProperty = null; 
     } else { 
     binding.targetProperty = binding.originalTargetProperty; 
     } 
     binding.originalupdateTarget(val); 
    } 
    } 

    unbind(binding, scope) { 
    binding.updateTarget = binding.originalupdateTarget; 
    binding.originalupdateTarget = null;  
    binding.targetProperty = binding.originalTargetProperty; 
    binding.originalTargetProperty = null; 
    } 
}

而且然後像這樣使用它：

來源

2017-03-08 14:20:33

如果我想在我的自定義元素中使用它，它是否必須是單獨的類？如果沒有傳遞給它（這是我想要的），會真的完全刪除'href'屬性嗎？ – ghiscoding

這對任何屬性都是可用的，如果你只在特定的自定義元素中使用它，我會使用Fabio Luz提供的解決方案。在任何情況下，這個都能正常工作:-)或者爲綁定添加一個更改爲自定義元素的值，並刪除或添加屬性 –

感謝您的建議，更改的值實際上是一個好主意。我可以試一試。你的綁定行爲仍然很有趣，我可能會在代碼中的其他地方使用它。感謝您提供它。 – ghiscoding

只有屬性存在時，纔可以使用自定義屬性來生成title屬性。例如：

export class OptionalTitleCustomAttribute { 

    static inject = [Element]; 

    constructor(element) { 
    this.element = element; 
    } 

    valueChanged(newValue) { 
    if (newValue) { 
     this.element.setAttribute('title', newValue); 
    } else { 
     this.element.removeAttribute('title'); 
    } 
    } 

}

運行例如：https://gist.run/?id=f7f89f35b62acb5b4f05ffe59be1880e

來源

2017-03-08 12:27:02

這很有趣，是否與@customAttribute（）相同？我還沒有使用這些屬性，所以我不知道如何在代碼中使用它。它是否必須是單獨的類，如何在自定義元素類中使用它？你介意寫一段快速的代碼來演示一個自定義元素。謝謝 – ghiscoding

當你想覆蓋命名約定時，你應該使用'@ customAttribute'。例如，當您按照慣例創建一個名爲'OptionalTitleCustomAttribute'的類時，使用您的定製屬性的語法是'optional-title'。如果你使用'my-optional-title'來代替，你將不得不用'@customAttribute（'my-optional-title'）'裝飾你的類。回答你的第二個問題，YES，你可以在同一個js文件中定義它。檢查我的更新要點。 –

太棒了，下班後我會試一試，並在工作時接受你的答案。非常感謝:) – ghiscoding

Aurelia，如何使可選綁定

回答

相關問題