Geek asks and answers

Knockout, JQMobile, and resettable creation don't seem to work correctly

I checked a few samples, but none of them match what I'm trying to do.

I have work, mostly, but it's not entirely correct.

Here is a script illustrating the problem.

http://jsfiddle.net/5yA6G/4/

Note that the top set works fine, but it is statically defined.

The bottom set (Tom, steve, bob) "works" basically, but the title element ends both in the AND folding title and in the part of the reset that is hidden.

It seems like I should be doing something wrong, but I could not understand that.

Any ideas?

+5
source share
2 answers

Actually, I found a much simpler way to do this:

  • foreach, , :

    <div data-bind="foreach: promotions">

    <h3 data-bind="text: Title"></h3>
        <p>Creator:<span data-bind="text: Creator"></span></p> 
        <p>Effective Date:<span data-bind="text: EffectiveDate"></span></p>
        <span data-bind="text: Description"></span>
        <a data-bind="text: ButtonText, attr: {href: ButtonLink}"></a>

  • , div class= " ,

    <div data-role="collapsible-set" data-bind="foreach: promotions">

<div class="collapsible">
    <h3 data-bind="text: Title"></h3>
        <p>Creator:<span data-bind="text: Creator"></span></p> 
        <p>Effective Date:<span data-bind="text: EffectiveDate"></span></p>
        <span data-bind="text: Description"></span>
        <a data-bind="text: ButtonText, attr: {href: ButtonLink}"></a>

  • jquery mobile , :

    $(document).ready(function () {
    ko.mapping.fromJS(data, dataMappingOptions, PromotionViewModel.promotions);
    ko.applyBindings(PromotionViewModel);
    $('.collapsible').collapsible();
});

  • , class= " " div foreach. ,

+4

- , , , , .

, "" , , JQMobile .

, JQMobile , .

, , ApplyBindings, , . , collapsible() - .

$("div[data-role='collapsible']").collapsible({refresh: true});

. , JQM , "" JQM, , , , , ..

, " " , :

<script type="text/html" id="alarm-template">
    <div data-role="collapsible" data-collapsed="true" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" data-enhance="false">
        <h3 data-bind="text:name"></h3>
        <p>The content here</p>
        <p data-bind="text: name"></p>
    </div>
</script>

JQM "" , , .

: , , , ( , , ) .

, , 2 :

-, "Create" . ...

$("div[data-role='collapsible-set']").collapsibleset('refresh');

. JQM "" " ". , , /.

Knockout ( ), , refresh, JQM "", . , , "", - .

github .

https://github.com/jquery/jquery-mobile/issues/4645

+6

More articles:


All Articles