0

私は以下のコードに似たものを持っています.cityName Barnsleyで首都を別の方法でレンダリングし、別の名前で都市を別の方法でレンダリングしたいと考えています. if bindingを行う正しい方法は何ですか? cityName をオブザーバブルとして機能させる必要がありますか?

<ul data-bind="foreach: planets">
    <li>
        Planet: <b data-bind="text: name"> </b>
        <div data-bind="if: capital">
            Capital: <b data-bind="text: capital.cityName"> </b>
        </div>
    </li>
</ul>


<script>
    ko.applyBindings({
        planets: [
            { name: 'Mercury', capital: null }, 
            { name: 'Earth', capital: { cityName: 'Barnsley' } }        
        ]
    });
</script>

わかりました まだ成功していません 私のjsonはこれです:

var Images = {
    "ImageInfo": [
        {
            "thumbs": [
                {
                    "IMAGE": "url(http://...d38508d4f183.jpg)",
                    "type": "img"
                },
                {
                    "IMAGE": "url(http://...d38508d4f183.jpg)",
                    "type": "video"
                }
            ]
        },
        {
            "thumbs": [
                {
                    "IMAGE": "url(http://...d38508d4f183.jpg)",
                    "type": "img"
                },
                {
                    "IMAGE": "url(http://...d38508d4f183.jpg)",
                    "type": "video"
                }
            ]
        }
    ]
};

私が達成したいHTMLは以下です：

    <div id="Images">
        <div data-bind="foreach: ViewModelB">

            <div data-bind="foreach: thumbs">
                <div data-bind="if: type == 'img'">
                    <a style="width: 50px; height: 50px; float: left; display: block; background-size: cover; margin-left: 15px; cursor: pointer;" data-bind="style: { backgroundImage: IMAGE_PATH }"></a>
                </div>
                <div data-bind="if: type == 'video'">
                    <p style="width: 50px; height: 50px; float: left; display: block; background-size: cover; margin-left: 15px; cursor: pointer;" data-bind="style: { backgroundImage: IMAGE_PATH }"></p>
                </div>
            </div>
        </div>
    </div>
<script>
var ViewModelB = ko.mapping.fromJS(Images);
        ko.applyBindings(ViewModelB, document.getElementById("Images"));
</script>

どんな助けでも大歓迎です！

4

2 に答える 2

0

あなたはほとんどそこにいます。後で変更されない場合は観察可能である必要はありません.ifステートメントを実行して、以下のように異なる方法でレンダリングできます.

<ul data-bind="foreach: planets">
    <li>
        Planet: <b data-bind="text: name"> </b>
        <div data-bind="if: capital">
              <!-- ko if:capital.cityName=='Barnsley' -->
            Capital: <b data-bind="text: capital.cityName"> </b>
              <!-- /ko -->
             <!-- ko if:capital.cityName=='asdad' -->
            Capital: <i data-bind="text: capital.cityName"> </b>
              <!-- /ko -->
        </div>
    </li>
</ul>

または、スイッチケースを行うこともできます https://github.com/mbest/knockout-switch-case

于 2013-10-07T16:54:32.573 に答える