remy/bind.js

Initial DOM values bleed into each other

Opened this issue · 2 comments

kokujin commented

Consider this markup

<p class="price">£10.50</p>
<span class="price">none</span>
 <ul>
     <li class="price"></li>
 </ul>
 <button id="btn">test</button>

The above is then bound as follows:

$(document).ready(function() {
    var data = Bind({
        price: null
    }, {
        price: {
            dom: '.price',
            parse: function(v) {
                return parseFloat(v.replace(/^£/, ''), 10);
            },
            transform: function(v) {
                return '£' + v.toFixed(2);
            }
        }
    });

    $('#btn').on('click', function(e) {
        data.price = 112.052;
    });
});

This does not work as expected because the LI and the SPAN elements both show the P tags initial value of 10.50.

Is there a workaround for this? Thanks

remy commented

What's the actual bug you're seeing, because when I (tried to) replicate in jsbin: http://jsbin.com/riyaku/edit?html,js,output clicking "test" resulted in all the £10.50 to change to £112.05.

Oh unless you want to keep the initial values in the DOM? In which case...I'm not sure. I guess at the moment the "source of truth" is the DOM - but you've specified that as per the spec but you've got a conflict in the values, so...the value gets propergated across the different matching elements...

kokujin commented

Exactly, I would like to keep the initial values till actually a change is
triggered, take the example of prices of different products that need to
have all a common vat or shipping value applied to.

On 17:06, Sat, Oct 3, 2015 Remy Sharp notifications@github.com wrote:

What's the actual bug you're seeing, because when I (tried to) replicate
in jsbin: http://jsbin.com/riyaku/edit?html,js,output clicking "test"
resulted in all the £10.50 to change to £112.05.

Oh unless you want to keep the initial values in the DOM? In which
case...I'm not sure. I guess at the moment the "source of truth" is the DOM

—
Reply to this email directly or view it on GitHub
#12 (comment).