Initial DOM values bleed into each other

[kokujin]

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]

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]

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 [email protected] 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

• but you've specified that as per the spec https://github.com/remy/bind.js#using-the-dom-to-inform-values but you've got a conflict in the values, so...the value gets propergated across the different matching elements...

— Reply to this email directly or view it on GitHub https://github.com/remy/bind.js/issues/12#issuecomment-145255539.