RactiveJS doesn't update all vars on set or update - ractivejs

I have this:
{{#config.buildings:building}}
<div class="building" id="building-item-{{building}}">
<div class="image-container">
<div class="thumbnail" style="background: transparent url({{staticUrl}}/game_images/town/buildings/{{building}}/{{building}}-1-thumbnail.png) no-repeat center center;"></div>
<div class="cover"></div>
<div class="undercover"></div>
<div class="level">{{village.buildings[building].level + alreadyInQueue(building)}}</div>
</div>
<div class="big_title">{{lang('buildings',building)}}</div>
<p class="{{buildingMaxed(building) ? 'maxed' : ''}}">{{lang('buildings',building+'_description')}}</p>
<div on-tap="upgradeBuilding:{{building}}" class="upgrade-button" tooltip="{{lang('general','upgrade_building')}}"></div>
<div on-tap="downgradeBuilding:{{building}}" class="downgrade-button disabled" tooltip="{{lang('general','downgrade_building')}}"></div>
<div class="resources">
<div class="resource">
<img class="thumbnail" src="{{staticUrl}}/game_images/resources/woodB.png">
<label class="res-count-wood">{{config.buildings[building][village.buildings[building].level].wood}}</label>
</div>
<div class="resource">
<img class="thumbnail" src="{{staticUrl}}/game_images/resources/ironB.png">
<label class="res-count-iron">{{config.buildings[building][village.buildings[building].level].clay}}</label>
</div>
<div class="resource">
<img class="thumbnail" src="{{staticUrl}}/game_images/resources/clayB.png">
<label class="res-count-stone">{{config.buildings[building][village.buildings[building].level].iron}}</label>
</div>
<div class="resource">
<img class="thumbnail" src="{{staticUrl}}/game_images/resources/workersB.png">
<label class="res-count-builders">{{config.buildings[building][village.buildings[building].level].people}}</label>
</div>
<div class="resource">
<img class="thumbnail" src="{{staticUrl}}/game_images/resources/timeB.png">
<label class="res-count-time">{{secsToString(config.buildings[building][village.buildings[building].level].time)}}</label>
</div>
</div>
<div class="hr"></div>
</div>
{{/config.buildings:building}}
When I'm using
contentTPL.set('village.buildings[1].level',4)
The only things that update are
<div class="level">{{village.buildings[building].level + alreadyInQueue(building)}}</div>
// and
<label class="res-count-time">{{secsToString(config.buildings[building][village.buildings[building].level].time)}}</label>
I don't seem to understand why the other values don't update on update() as they should. There's no error in the code and I'm using the edge version (same result with the lastest version from 8th of April, 0.4.0).
UPDATE
I have stripped all the unnecessary data, and added a console.log in the alreadyQueued function. It gets called on init, but, when i call contentTPL.update() it doesn't get called anymore. Nothing updates in the file, when pressing the startQueue button. There's another contentTPL.update() when the queue expires, which updates only the level and the time needed as stated above. I'm asking Rich or Marty to advise on this problem as I'm stuck here for about 4 hours and can't seem to understand wether it is my misuse of the library or it's a bug.

It turns out this was a bug, which is now fixed in dev.

Related

URL images sometimes load sometimes not vue js

I have this problem in which i generate images by classical foreach method.
<div v-for="messageGroup in conversation" class="messagegroup" :class="{ recieved: messageGroup.recieved }">
<div v-if="messageGroup.recieved" class="iconcontainer">
<div class="iconcontainerinner">
<img class='usericoncontacts' :src="selectedContact.userPhotoURL" alt="">
</div>
</div>
<div class="textmessages" :class="{ recieved: messageGroup.recieved }">
<div class="message" v-for="message in messageGroup.messages">
<span>{{ message }}</span>
</div>
</div>
</div>
The images then have it's source at Google repo which looks for an example like this
The images then either or sometimes don't like
My guess is that it has something to do with vue rendering.
Thanks in advance

Empty space to the right when using W3-card

When I use the W3-card class, the right side of the element is not always used.
I have set the padding-right to 0px and still same.
What could be reason.
Code below
<div class="w3-content w3-card-4" style="width:500px; padding-right:2px ">
<div class="w3-row">
<div class="col-md-7">
<h2 style="color:blue;"> Logged Out </h2>
<br />
You have Logged Out Successfully. You can <a runat="server" class="w3-badge
w3-purple w3-hover-blue" href="~/Login.aspx">Login</a> here
</div>
</div>
</div>
The issue was the use of that class="col-md-7". it is limiting the usage of the other side.
Got it cracked

data binding to pivotItem using winjs.repeater

I tried to bind data into a pivotItem using Winjs.ui.repeater dynamically but the debugger throws an error and show the base.js, can anyone pls help me out.
<section class="page-section" aria-label="Main content" role="main">
<div>
<div data-win-control="WinJS.UI.Pivot">
<div data-win-control="WinJS.UI.PivotItem" data-win-options="{'header':'AJJ-MAS'}">
<div data-win-control="WinJS.UI.Repeater" data-win-options="{data: AjjMsb.data}">
<section>
<label data-win-bind="{innerText:trainnumber}"></label>
<p data-win-bind="{innerText:starttime}"></p>
<p data-win-bind="{innerText:endtime}"></p>
</section>
</div>
</div>
<div data-win-control="WinJS.UI.PivotItem" data-win-options="{'header':'AJJ-MSB'}">
</div>
</div>
</div>
</section>
Curly brackets are not required for the data-win-bind property. Let me know if that fixes your problem!

DomCrawler complex div nesting

I'm having trouble trying to get to some data using the dom crawler.
I want to get the name 'Avocado' and '£1.50' I though I'd be able to do something like
$message = $crawler->filterXPath('h3')->text();
<div class="product">
<div class="productInner">
<div class="productInfoWrapper">
<div class="productInfo">
<h3>
<a href="http://website.com" >
Avocado
<img src="pic.jpg" alt="" />
</a>
</h3>
</div>
</div>
<div class="pricingAndTrolleyOptions">
<div class="pricing">
<p class="pricePerUnit">
£1.50<abbr title="per">/</abbr><abbr title="unit"><span class="pricePerUnitUnit">unit</span></abbr>
</p>
<p class="pricePerMeasure">£1.50<abbr
title="per">/</abbr><abbr
title="each"><span class="pricePerMeasureMeasure">ea</span></abbr>
</p>
</div>
</div>
</div>
To get h3 text:
$message = $crawler->filterXPath('//div[#class="productInfo"]/h3')->text();
To get price (i.e. for class pricePerMeasure):
$price= $crawler->filterXPath('//p[#class="pricePerMeasure"]')->text();

Foundation 5 text box not responding

The text boxes load fine and look great, but you can't click and select text. You can click the textbox and the cursor moves to the first position, but nothing else. For some reason the mouse isn't working in the controls, but the keyboard is.
These are dynamically created text boxes based on the number of rows from the DB. Also, the user can click a spiffy + image to add additional rows. I'm using F5 and also a sortable plugin.
HTML:
<div class="row">
<div class="small-12 large-10 small-centered columns" id="Ingredients">
<ul id="sortable-with-handles" class="sortable list">
<li><div class='row'><div class='small-12 large-12 small-centered columns'><div class='row'>
<div class='small-3 large-1 columns'>Sort</div>
<div class='small-3 large-4 columns'>Ingredient</div>
<div class='small-2 large-2 columns'>Dept</div>
<div class='small-3 large-4 columns'>Shopping List</div>
<div class='small-1 large-1 columns'><img src='./images/green_add.png' id='add_row' height='25' width='25' title='Add Another Row' /></div>
</div></div></div></li>
<li data-id=1><div class='row'><div class='small-12 large-12 small-centered columns' id='ingredients1'><div class='row'>
<div class='small-3 large-1 columns'><img id='sort_1' class='handle' src='./images/sort-icon.png' /></div>
<div class='small-3 large-4 columns'><input type='text' id='ingr_1' name='ingr_1' value='1 (12 ounce) jar Franks Red Hot Buffalo Sauce' /></div>
<div class='small-2 large-2 columns'><select id='dept_1' name='dept_1' style='font-size:75%;' class='medium'>
<option value='0' style='font-size:8pt;'>Choose...</option>
<div class='small-3 large-4 columns'><input type='text' id='shop_1' name='shop_1' value='1 (12 ounce) jar Franks Red Hot Buffalo Sauce' /></div>
<div class='small-1 large-1 columns'><img src='./images/delete.png' id='delete_row_1' height='25' width='25' title='Remove Ingredient' /></div>
</div></div></div></li>
</ul>
</div>
</div>
I'm including a screenshot:
I had a similar problem and it was turned out to be malformed html - I believe in my case, I had a <div class="row"> that was nested improperly. Looking at your code, it appears you are missing a closing div on your dropdown.
<div class='small-2 large-2 columns'>
<select id='dept_1' name='dept_1' style='font-size:75%;' class='medium'>
<option value='0' style='font-size:8pt;'>Choose...</option>
<!-- missing closing div -->
<div class='small-3 large-4 columns'><input type='text' id='shop_1' name='shop_1' value='1 (12 ounce) jar Franks Red Hot Buffalo Sauce' />
</div>

Resources