web-dev-qa-db-ja.com

Knockout JS：IFバインディングにオブザーバブルが存在するかどうかを確認する

わずかに異なるいくつかのオブジェクトに対して、同様のHTMLブロックをレンダリングしています。それらは90％同じですが、それぞれに追加の観測量を必要とするいくつかの特定の癖があります。これらのほとんど類似したアイテムをそれぞれテンプレートブロックにレンダリングしたいのですが、未定義のオブジェクトで問題が発生しています。

基本的に、テンプレートにレンダリングする前に、監視可能なオブジェクトの存在を確認したいと思います。

私はこのようなことをしようとしています：

<div data-bind="foreach: blocks">
<h2 data-bind="text: normalHeader"><h2>
<p data-bind="text: normalText"></p>
<!-- ko if: specialText --><p data-bind="text: specialText"></p><!-- /ko -->
</div>

したがって、blocksの反復でspecialTextが存在しない（値がないだけでなく、まったく存在しない）場合は、条件を無視してください。私が得ているエラーは次のとおりです。

Uncaught Error: Unable to parse bindings.
Message: ReferenceError: specialText is not defined;

Knockoutの「if」バインディングについて私が理解していることから、オブジェクトがnullやundefinedなどのfalseのような値を返した場合に機能するはずです。つまり、ifバインディングは正常に失敗するはずですが、間違いなく失敗します。

これを機能させる方法はありますか？

javascriptknockout.js
20
Jack

次のアプローチを使用できます。

<!-- ko foreach: Items -->
    <strong data-bind="text: Foo"></strong>
    <br />
    <!-- ko if: $data.hasOwnProperty("Bar") -->
        <p data-bind="text: Bar"></p>
    <!-- /ko -->
<!-- /ko -->​

投稿しました 作業デモ

46
Oybek

<!-- ko if: typeof specialText != 'undefined' -->

Oybekのソリューションに基づいて、次のこともできます。

<!-- ko foreach: Items -->
    <strong data-bind="text: Foo"></strong>
    <br />
    <!-- ko if: "Bar" in $data -->
        <p data-bind="text: Bar"></p>
    <!-- /ko -->
<!-- /ko -->​

例： http://jsfiddle.net/MecNx/56/

10
paulslater19

これを行うには、オブジェクトのインデクサーからアクセスします。

<!-- ko foreach: Items -->
    <strong data-bind="text: Foo"></strong>
    <br />
    <!-- ko if: $data["Bar"] -->
        <p data-bind="text: Bar"></p>
    <!-- /ko -->
<!-- /ko -->
2
Luca Cestola