Knockout.jsでimgタグsrc属性にデータバインドする時のアンチパターン

不完全な状態でsrcが解決されてしまい404エラーが発生する

img[src]にデータバインドした時にエラー出まくったので。

ViewModel

var viewModel = {
    filename: ko.observable()
};
ko.applyBindings(viewModel);

この後ajaxなりでfilename("myimage.jpg")などが入ってくるとする。

HTML

<img data-bind="attr: {src: '/static/img/' + filename()}">

上記のように{src: "文字列"}渡してしまうと、即以下のようなHTMLとして反映されてしまうので404エラーが発生する。

<img src="/static/img/undefined">

404回避

これを回避するには filename('/static/img/myimage.jpg') とパス情報などの文字列も含めて同時に渡すか
以下のように書いてfilename()に値が入るまでHTMLに反映させないなどの手があるっぽい。

<img data-bind="attr: {src: filename4() ? '/static/img/' + filename4() : ''}">

（もっとスマートな方法あったら教えて下さい）

追記

コメント欄にてカスタムバインディングを使う例を教えていただきました。これが一番スマートだと感じます。
MKGaruさんありがとうございます！